Question

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

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

我发现许多有关Angular较早版本的帖子都存在Date无法正确模拟的问题，因此建议的解决方法是使用asyncScheduler绕过tick或导入其他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

似乎原因是您在timer中使用了rxjs UserTaskTrackerService。 Here is对问题和解决方案的解释。但是对于您而言，最简单的解决方案应该是将timer()替换为setInterval()。

您也可以使用done()回调来解决问题，但是在这种情况下，测试将需要30秒才能完成。您会注意到，我将31000毫秒的超时时间传递给了it()函数，因为据我所知，默认的超时时间是20秒。

it(`it should emit a UserTask when one expires`, done => {
  service.TaskExpired.subscribe(expiredUserTask => {
    expect(expiredUserTask).toBeDefined();
    expect(expiredUserTask.id).toBe('abc');
    done()
  });

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

Answer 2

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

TL：DR =>在服务（或组件）中使用timer（）或setInterval（）时，需要在fakeAsync函数中创建服务（或组件），以便正确修补不同的日期/时间函数使tick（）函数起作用。使用在fakeAsync（）外部创建的服务或组件的副本将不起作用。在service /组件中使用timers / 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个定期计时器仍在队列中”。即使您丢弃了计时器，每次测试也会出现错误。

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

2 个答案: