首页 > 解决方案 > 用茉莉花测试猎犬的远程选项

问题描述

我正在使用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);

问题是,测试flaky在 CircleCI 中并且它们在本地通过(仅使用浏览器时)。在 CI 中,它们有时工作,有时不工作。当我删除超时(我很想取消)时,测试根本不起作用。这是因为调用jasmine.Ajax.requests.mostRecent()返回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
    });

  });
});

我究竟做错了什么?有没有办法在没有超时的情况下确保测试的一致性?

标签: ajaxangularkarma-jasminebloodhoundbootstrap-tags-input

解决方案


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


推荐阅读