Ember 所选的验收测试-select

Question

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')

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

从下拉列表中单击 "USA"，然后单击提交，效果很好。

更新

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"

谢谢查德！

Answer 1

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

Updating Chosen Dynamically If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "chosen:updated" event on the field. Chosen will re-build itself based on the updated content. via chosen docs

但是，ember 组件似乎没有以任何方式包装该事件。看起来 chosen:update 正在更新所选的 UI 实现，而不是 Ember 中的数据绑定。如果您事后向 select 添加了选项，并希望这些选项在屏幕上得到反映 ('rebuilt')。

查看此组件背后的代码及其包装所选库的方式，似乎此组件仅捕获 change event。因此，请尝试对 change 事件执行 trigger，这应该会在 ember 及其数据绑定中更新内容。

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

Form Field Change** When working with form fields, you often want to perform some behavior after a value has been selected or deselected. Whenever a user selects a field in Chosen, it triggers a "change" event* on the original form field. That let's you do something like this: $("#form_field").chosen().change( … );

如果还是不行，如果你能提供一个代码笔，我会仔细看看，谢谢！

Ember 所选的验收测试-select

Ember acceptance test for chosen-select

acceptance-testing

ember.js

jquery-chosen

ember-cli