如何在计时器触发后正确调用函数进行单元测试。角度 7、RXJS 6

Question

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

由于我是角度单元测试的新手，我也承认问题可能是我如何设置测试（事实上，我怀疑这就是问题所在）。

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

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

当测试运行时，我得到一个失败的结果，显示“预期‘未定义’为‘已定义’。”

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

Answer 1

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

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

错误：1 个周期性计时器仍在队列中。

对于那些仍在阅读的人，这就是我进行测试的方式。

向服务添加“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 个周期性计时器仍在队列中”。即使您处理掉计时器，每次测试都会出错。