angular - 如何在计时器触发后正确调用函数进行单元测试。 Angular 7，RXJS 6

Question

在我的 Angular 7 应用程序中，我有一个用于跟踪事件用户任务的服务。在该服务中，计时器每秒运行一次，以检查是否有任何任务在 30 秒内仍未完成。如果发现任何任务已过期，则该任务将通过服务上的事件发射器发出，以在其他地方处理。当应用程序在浏览器中运行时，这一切都有效，但是当我尝试编写单元测试来测试 fakeAsync 环境中的行为时，tick(X) 不会提前(或者 fakeAsync 没有模拟在服务中创建的任何“new Date()”的时间，以便 tick() 正常工作。

由于我是 Angular 单元测试的新手，我也承认问题可能出在我设置测试的方式上(事实上，我怀疑这就是问题所在)。

我发现许多关于旧版本 Angular 的帖子都存在 Date 未被正确模拟的问题，因此建议的解决方法是使用 asyncScheduler 绕过 tick 或导入其他 npm 包，或者，我什至尝试过其他版本的从区域的功能。我试过这些但没有成功。我还通过运行下面的简单测试测试了 @angular/core/testing 中的 fakeAsync() 和 tick() 函数，该测试通过了:

  it('should tick', fakeAsync(() => {
    const firstDate = new Date();
    tick(30000);
    const secondDate = new Date();
    expect(secondDate.getTime() - firstDate.getTime()).toBe(30000);
  }));

这是该服务的简化版本:

export class UserTaskTrackerService {
  TaskExpired = new EventEmitter<UserTask>

  private activeUserTasks: UserTask[] = []
  private oneSecondTimer;
  private timerSubscription$;

  constructor() {
    this.oneSecondTimer = timer(1000, 1000);
    this.timerSubscription$ = this.oneSecondTimer.subscribe(() => {
       this.checkForExpiredUserTasks();
    });
  }

  addNewTask(task: UserTask) {
    if(this.taskExists(task)) {
      this.completeTask(task);  // not included in example
    }
    else {
      task.startTime = new Date();
      this.activeUserTasks.push(task);
    }
  }

  private checkForExpiredUserTasks() {
    const currentTime = new Date();
    const expiredTasks: UserTask[] = [];

    this.activeUserTasks.forEach(userTask => {
       if (this.taskHasExpired(userTask.startTime, currentTime)) {
         expiredTasks.push(userTask);
       }
    });

    if (expiredTasks.length > 0) {
       this.handleExpiredTasks(expiredTasks);
    }
  }

  private taskHasExpired(taskStartTime: Date, currentTime: Date): boolean {
     return (currentTime.getTime() - taskStartTime.getTime()) / 1000 > 30;
  }

  private handleExpiredTasks(expiredTasks: UserTasks[]) {
     // remove task(s) from collection and then emit the task
  }
}

示例单元测试。在这个例子中，所有测试函数都来自@angular/core/testing

describe('User Action Tracking Service', () => {
   let service: UserTaskTrackerService;
   let testBed: TestBed;

   beforeEach(() => {
     TestBed.configureTestingModule({
         providers: [UserTaskTrackerService]
    });
   });

   beforeEach(() => {
     service = TestBed.get(UserTaskTrackerService);
   });

   it('should tick', fakeAsync(() => {
      const firstDate = new Date();
      tick(30000);
      const secondDate = new Date();
      expect(secondDate.getTime() - firstDate.getTime()).toBe(30000);
    }));

// Other tests removed for brevity

  it(`it should emit a UserTask when one expires`, fakeAsync(() => {
    let expiredUserTask: UserTask;

    service.TaskExpired.subscribe((userTask: UserTask) => {
      expiredUserTask = userTask;
    });

    service.addNewTask(new UserTask('abc', 'test action - request'));
    expect(service.getTaskCount()).toBe(1);

    tick(31000);

    expect(expiredUserTask).toBeDefined();
    expect(expiredUserTask.id).toBe('abc');
  }));
});

当测试运行时，我得到一个失败的结果，说“预期‘undefined’为‘defined’。”

如果我继续观察控制台，在测试完成约 30 秒后，我会看到服务代码中的一些 console.log 输出，当发现过期任务时打印过期用户任务。

Answer 1

我已经找到了答案，我想它是有道理的。

TL:DR => 在服务(或组件)中使用 timer() 或 setInterval() 时，需要在 fakeAsync 函数中创建服务(或组件)，以便正确修补不同的日期/时间函数使 tick() 函数起作用。使用在 fakeAsync() 之外创建的服务或组件的副本将不起作用。在服务/组件中使用计时器/setInterval 时，您还需要公开一个函数以在测试完成后处理计时器，否则您将收到错误消息:

Error: 1 periodic timer(s) still in the queue.

对于那些仍在阅读的人，这就是我如何让测试工作的。

向服务添加“disposeTimers()”函数。

disposeTimers() {
    if (this.timerSubscription$) {
        if (!this.timerSubscription$.closed) {
            this.timerSubscription$.unsubscribe();
            this.oneSecondTimer = undefined;
        }
    }
}

然后为了我的测试，我使用了下面的代码:

   it(`it should emit a UserTask when one expires`, fakeAsync(() => {
      let expiredUserTask: UserTask;
      const singleTestService = new UserTaskTrackerService();

      singleTestService.TaskExpired.subscribe((userTask: UserTask) => {
      expiredUserTask = userTask;
      });

      singleTestService.addNewTask(new UserTask('abc', 'test action - request'));
      expect(singleTestService.getTaskCount()).toBe(1);

      tick(31000);

      expect(expiredUserTask).toBeDefined();
      expect(expiredUserTask.id).toBe('abc');
      singleTestService.disposeTimers();
   }));

我尝试通过使用“beforeEach( fakeAsync() => { ... }); 来减少它的骇人听闻”生成服务，但这会导致“1 个周期性计时器仍在队列中。”每次测试都会出错，即使您丢弃了计时器也是如此。