Question

选择对我来说很有用，但我无法弄清楚如何让我的验收测试在表格提交中发送价值。

把手模板：

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

然后选择在我眼前更新！但是然后单击“提交”会产生与测试相同的结果，也就是说，该国家/地区不会传递给查询参数。

点击＆＃34; USA＆＃34;然而，从下拉列表，然后单击提交，完美地工作。

更新

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"

谢谢Chad！

Answer 1

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

动态更新动态 如果您需要更新选择字段中的选项并希望选择选择更改，则您需要触发选择的选项：已更新＆＃34;在球场上的事件。 Chosen将根据更新的内容重新构建自己。 via chosen docs

然而，看起来ember组件并没有以任何方式包装该事件。它看起来也像所选：更新正在更新所选择的UI实现，而不是更新Ember中的数据绑定。如果您在选择后添加选项，并希望在屏幕上反映（＆＃39;重建＆＃39;），则会出现这种情况。

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

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

表格字段变更** 使用表单域时，通常需要在选择或取消选择值后执行某些操作。每当用户选择一个选择的字段时，它就会触发＆＃34;更改＆＃34;原始表单字段上的事件*。这让你做这样的事情： $("#form_field").chosen().change( … );

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

选择选择的灰烬验收测试

1 个答案: