在 Angular 6 组件 ngOnInit 函数中测试 rxjs 间隔

Question

我有一个具有以下 ngOnInit 函数的组件，该函数轮询服务方法以获取状态更新：

ngOnInit() {
  interval(2000).pipe(
    switchMap(() => this.dataService.getStatus())
  ).subscribe((result) => {
    this.uploadStatus = result;
  );
}

我正在尝试使用以下代码测试更新是否实际发生：

beforeEach(() => {
  fixture = TestBed.createComponent(UploadComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});


it('should start checking for status updates', fakeAsync(() => {
  const dataService = TestBed.get(DataService);
  // Mock the getStatus function
  spyOn(dataService, 'getStatus').and.returnValue(Observable.create().pipe(map(() => 'woo')));
  // Should not be initialised yet
  expect(component.uploadStatus).toBeUndefined();
  tick(2000);
  expect(component.uploadStatus).toBe('woo');
}));

但component.uploadStatus始终为空。我应该如何测试这种类型的场景？理想情况下，我想随着时间的推移检查多次更新。

谢谢

Answer 1

问题出在beforeEachAngular CLI 为您设置的单元测试模板中。您订阅了interval在第一个更改检测周期（即在ngOnInit.

订阅必须在区域内进行fakeAsync，以便tick管理 Observable 的时间。将呼叫移至区域fixture.detectChanges内fakeAsync，您将看到tick现在管理时间。

beforeEach((): void => {
  fixture = TestBed.createComponent(UploadComponent);
  component = fixture.componentInstance;
  // Get rid of call to detectChanges
});


it('should start checking for status updates', fakeAsync((): void => {
  // Arrange
  const dataService = TestBed.get(DataService);
  spyOn(dataService, 'getStatus').and.returnValue(of('woo'));
  
  // Assert
  expect(component.uploadStatus).toBeUndefined();

  // Act
  fixture.detectChanges();
  tick(2000);

  // Assert
  expect(component.uploadStatus).toBe('woo');

  // Clean up RxJS.interval function
  discardPeriodicTasks();
}));