Question

我已为我的Chosen组件添加了自定义no_results文本（使用Chosen jQuery插件），并且我尝试编写集成测试以查看它是否正常工作。为此，我需要找到一些方法来触发chosen:no_results事件。

基本上，我的测试分解为这些部分：

用户点击所选组件。他们会看到一个下拉菜单，顶部有一个搜索栏。
用户在搜索栏中填入下拉列表中不存在的选项（例如，他们输入＆＃34; Foo，＆＃34;但下拉列表仅包含＆＃34; Bar＆＃34 ）。而不是默认的选择对话框，它们会显示，＆＃34;未找到任何结果。添加一个新选项：，＆＃34;使用显示新选项的链接（例如，＆＃34;未找到结果。添加新选项：＆＃39; Foo＆＃39;，＆＃34;＆＃34; Foo＆＃34;作为链接）。
他们点击新选项，然后将其添加到下拉列表中。

我目前被困在2。

我已经尝试过简单地填写输入字段，如下所示：

test('user can create a new option from the dialog box', function() {
  visit('/collaborate/foo/430/bar/2/edit');

  andThen(function() {
    click('.chosen-container > .chosen-single');

    andThen(function() {
      fillIn('.chosen-container > .chosen-drop > .chosen-search > input', 'New Test');

      andThen(function() {
        equal(find('.chosen-container > .chosen-drop > .chosen-results > .no-results').text(), 'No results found. Add a new option: "New Test"');
      });
    });
  });
});

然而，失败了。测试返回""而不是预期的结果。我在最后一个equal之前设置了一个断点，#ember-testing窗口仍显示默认下拉选项而不是no_results文本。

所以，然后我意识到fillIn实际上没有输入文本，我得出结论，事件是由于按键触发的。考虑到这一点，我尝试重写这样的测试：

test('user can create a new owner from the dialog box', function() {
  visit('/collaborate/foo/430/bar/2/edit');

  andThen(function() {
    click('.chosen-container > .chosen-single');

    andThen(function() {
      keyEvent('.chosen-container > .chosen-drop > .chosen-search > input', 'keypress', 84);

      andThen(function() {
        equal(find('.chosen-container > .chosen-drop > .chosen-results > .no-results').text(), 'No results found. Add a new option: "t"');
      });
    });
  });
});

我也尝试触发keyup和keydown事件。结果与第一次测试相同。

我还尝试了组件的单元测试，但似乎我无法触发事件，组件正在侦听chosen:no_results事件。

最后，我尝试直接在测试中触发chosen:no_results事件：

test('user can create a new option from the dialog box', function() {
  visit('/collaborate/foo/430/bar/2/edit');

  andThen(function() {
    click('.chosen-container > .chosen-single');

    andThen(function() {
      fillIn('.chosen-container > .chosen-drop > .chosen-search > input', 'New Test');

      andThen(function() {
        triggerEvent(find('.chosen-container').parent().find('select'), 'chosen:no_results');

        andThen(function() {
          equal(find('.chosen-container > .chosen-drop > .chosen-results > .no-results').text(), 'No results found. Add a new option: "New Test"');
        });
      });
    });
  });
});

显然，该事件会触发，但我收到错误。似乎chosen:no_results事件在事件选项中的Chosen对象中传递，这是我的组件运行所需的。我无法从测试本身访问它，所以我需要找到一些方法来使用测试助手来触发它，或者我必须找到一些方法从测试本身传入Chosen对象。

我将如何测试？

触发事件需要Ember集成测试中的特定选项吗？

0 个答案: