选择选择的 Ember 验收测试

Posted 2023-02-23

【中文标题】选择选择的 Ember 验收测试

【英文标题】：Ember acceptance test for chosen-select

【发布时间】：2015-12-03 21:50:56

【问题描述】：

Chosen 对我来说非常有用，但我不知道如何让我的验收测试发送表单提交上的值。

车把模板：

<form>
  #ember-chosen value=country
    #each countries as |country|
      <option value=country>country</option>
    /each
  /ember-chosen
  #link-to 'countries.show' (query-params country=country) tagName='button' type='submit' replace=true class="submit__button"Search/link-to
</form>

验收测试：

test 'Searching for a country', (assert) ->
  visit '/search'
  find('.chosen-select').val('USA')
  find('.chosen-select').trigger('chosen:updated')
  click('.submit__button')
  andThen ->
    assert.equal find(".chosen-select :selected").text(), "USA"

这失败了，因为提交国家甚至没有作为查询参数传入，而只是在测试中。

如果我在控制台中执行此操作，也会发生同样的事情。如果我打开控制台并执行以下操作：

$('.chosen-select').val('USA')
$('.chosen-select').trigger('chosen:updated')

然后选择在我眼前更新！但是随后点击提交会产生与测试相同的结果，即国家没有传入查询参数中。

点击下拉菜单中的“美国”，然后点击提交，效果很好。

更新

Chad Carbert 下面的回复给了我答案。具体结果如下：

$('.chosen-select').val('USA')
$('.chosen-select').trigger('chosen:updated')

仅更新 DOM。不是 Ember 的数据绑定。

$('.chosen-select').trigger('change', 'selected': 'USA')

更新数据绑定（这是我真正需要的），而不是 DOM。 由于这仅用于我的验收测试并且我不需要查看 DOM 更改，因此我的测试现在看起来像这样：

test 'Searching for a country', (assert) ->
  visit '/search'
  find('.chosen-select').trigger('change', 'selected': 'USA')
  click('.submit__button')
  andThen ->
    assert.equal find(".chosen-select :selected").text(), "USA"

这就像一个魅力！但是，如果您愿意，同时执行这三个操作也没有什么坏处：

test 'Searching for a country', (assert) ->
  visit '/search'
  find('.chosen-select').val('USA')
  find('.chosen-select').trigger('chosen:updated')
  find('.chosen-select').trigger('change', 'selected': 'USA')
  click('.submit__button')
  andThen ->
    assert.equal find(".chosen-select :selected").text(), "USA"

谢谢乍得！

【问题讨论】：

顺便说一句，使用 ember fillIn 助手对选择的选择根本不起作用。那就是我正在更改val 并触发chosen:updated。这至少改变了浏览器中的选择，这就是为什么我认为它适用于我的验收测试。

【参考方案1】：

看起来这可能是这个组件包装 jQuery 库的方式的问题。查看所选文档：

动态更新选择 如果您需要更新您的选择字段中的选项并希望 Chosen 获取更改，您需要在该字段上触发“chosen:updated”事件。选择将根据更新的内容重新构建自己。 via chosen docs

但是，ember 组件看起来并没有以任何方式包装该事件。看起来 selected:update 正在更新所选的 UI 实现，而不是 Ember 中的数据绑定。这将是在您事后向选择添加选项并希望这些在屏幕上反映（“重建”）的情况。

查看该组件背后的代码以及它是如何包装所选库的，看来该组件仅捕获了change event。因此，请尝试在 change 事件上执行 trigger，这应该会在 ember 及其数据绑定中更新。

或者尝试按照选择的文档中提到的方式触发更改：

表单字段更改** 使用表单域时，您通常希望在选择或取消选择某个值后执行一些行为。每当用户在 Chosen 中选择一个字段时，它都会在原始表单字段上触发一个“更改”事件*。那让你做这样的事情： $("#form_field").chosen().change( … );

如果这不起作用，如果你能提供一个代码笔，我会仔细看看，谢谢！