用 jasmine 测试 bloodhound 的远程选项

Question

我正在与 https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ 合作处理标签选择。如这些示例所示，该库使用 bloodhound 作为建议引擎。

在我的 angular2+ 组件测试中，我正在调用 $el.focus()。 $el 是我在 bootstrap-tagsinput 上使用的输入字段。

在 focus() 事件之后，我调用了 1000 毫秒的超时，然后我像这样对 ajax 响应进行存根...

const request = jasmine.Ajax.requests.mostRecent();
request.respondWith(response);

问题是，测试在 CircleCI 中 flaky 并且它们在本地通过（仅使用浏览器时）。在 CI，它们有时有效，有时无效。当我删除超时（我很想取消）时，测试根本不起作用。这是因为调用 jasmine.Ajax.requests.mostRecent() returns undefined.

当我尝试在本地终端中运行整个 angular 套件时，测试总是失败。感觉 bloodhound 的 ajax 调用根本没有被触发，或者它被其他东西吞噬了。这是我的完整测试服...

describe('Component', () => {
  let $el: JQuery;

  beforeEach(() => {
    jasmine.Ajax.install();
  });

  afterEach(() => {
    jasmine.Ajax.uninstall();
  });

  describe('filters with different roles', () => {
    it('should load and select project filter optionsr', () => {
      setCurrentUser({ role: ['some role'] });
      $el = instantiateComponent();

      const response = {
        responseText: '[{ "id":1, "name":"Nice name"}]',
        status: 200,
      };

      $el.find('input[placeholder="Project(s)"]').focus();

      runTimeouts(1000)

      // the focus triggered an Ajax request to /projects.json
      const request = jasmine.Ajax.requests.mostRecent();

      request.respondWith(response); // this fails because request sometimes is undefined.

     // I then test for UI changes here
    });

  });
});

我做错了什么？有没有一种方法可以在没有超时的情况下确保测试的一致性？

Answer 1

原来使用$elemet.focus() 或$element.click() 是问题所在。它通过使用 ngClick() 来代替。 $el.find('input[placeholder="Project(s)"]').ngClick();。虽然不知道为什么会这样。

用 jasmine 测试 bloodhound 的远程选项

testing remote option for bloodhound with jasmine

ajax

angular

karma-jasmine

bloodhound

bootstrap-tags-input