1

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

基本上，我的测试分为以下几个部分：

  1. 用户单击所选组件。它们会显示一个下拉菜单，顶部有一个搜索栏。
  2. 用户使用下拉菜单中不存在的选项填写搜索栏（例如，他们输入“Foo”，但下拉菜单仅包含“Bar”）。而不是默认的选择对话框，而是显示“未找到结果。添加新选项：”，并带有显示新选项的链接（例如，“未找到结果。添加新选项：'Foo'， " 以 "Foo" 作为链接)。
  3. 他们单击新选项，然后将其添加到下拉列表中。

我目前卡在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"');
      });
    });
  });
});

然而，那失败了。测试返回的不是预期的结果""。我在 last 之前放了一个断点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"');
      });
    });
  });
});

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

我还尝试了对组件的单元测试，但似乎我无法触发事件，并且组件正在侦听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 对象。

我将如何进行测试？

4

0 回答 0