Angular 中 setTimeOut 的单元测试

Question

我刚开始在 Angular 学习有关单元测试的新知识。我已经阅读了一些文章，但是当我为 setTimeOut 条件实现创建测试用例时，我仍然卡住了。我在 .component.ts

中有功能

  resetDropdown(elementId) {
    setTimeout(() => {
      if (elementId !== 'free-text-head-'.concat(this.id)) {
        if (elementId !== this.id) {
          if (this.isFreeTextEnabled && elementId !== 'free-text-body-'.concat(this.id)) {
            this.isFreeTextEnabled = false;
            this.assignSearchKeywowrd(this.value, this.config.displayKeyMain, this.config.selectedKey);
            this.isFreeTextSearchEmpty = false;
            this.listData = this.options;
          }
        }
      }
    }, 100);
  }

我如何在 jasmine 中创建这个？谢谢大家的帮助

Answer 1

fakeAsync + tick 非常方便。

describe('#resetDropdown when isFreeTextEnabled is true and argument is nor 'free-text-head-'.concat(component.id), nor 'free-text-body-'.concat(component.id), nor component.id', ()=>{
   const mockOptions = {someOption: 'someValue'};
   beforeEach(() => fakeAsync({
      component.options = mockOptions;
      component.isFreeTextEnabled = true;
      component.id = 'something not similar to argument';

      component.resetDropdown('something not similar to component.id');
      tick(100);
   }))
   it(`sets isFreeTextEnabled to false`, () => {
      expect(component.isFreeTextEnabled).toEqual(false)
   });
   it(`sets isFreeTextSearchEmpty to false`, () => {
      expect(component.isFreeTextSearchEmpty).toEqual(false)
   });
   it(`sets component.listData to component.options`, () => {
      expect(component.listData).toEqual(mockOptions)
   });
});

在一个 it 中只保留一个 expect 是一种有用的做法。当测试失败时，可以很容易地识别出了什么问题。当有几行像 expect(something).toEqual(true) 并且失败消息显示 expected false to be true 时，需要时间来找出 expect 中的哪一行失败。

PS：setTimeout 是 Angular 的气味。可能有更好的解决方案。从这段简短的代码摘录中很难说出什么味道。

Angular 中 setTimeOut 的单元测试

Unit Test for setTimeOut in Angular

javascript

unit-testing

jasmine

angular