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);
  }

我如何在茉莉花中創建這個？ 謝謝你們的幫助

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 s 中的哪一個失敗。

PS： setTimeout是 Angular 中的一種味道。 可能有更好的解決方案。 很難說這段簡短的代碼摘錄有什么味道。