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始终为null。我应该如何测试这种情况？理想情况下，我想检查一段时间内是否有多个更新。

谢谢

Answer 1

问题出在 Angular CLI 为您设置的单元测试模板的 beforeEach 中。您订阅了 interval 在第一个变更检测周期内（即在 ngOnInit 中）创建的 Observable。

订阅必须在 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();
}));

Answer 2

您必须在勾号后触发更改检测，这应该可以工作

tick(2000);
fixture.detectChanges();
expect(component.uploadStatus).toBe('woo');

Answer 3

您可以使用setTimeout()等待2秒（稍稍多一些，因为您再次在内部执行异步任务），然后检查property的值。

确保使用done()方法通知测试运行者测试用例已完成。

it('should start checking for status updates', (done) => {
  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();

  setTimeout(()=> {
        expect(component.uploadStatus).toBe('woo');
        done();
  },2500);

});

Answer 4

我最终解决的问题如下。我还必须存储下标，以便可以在测试结束时将其取消，以防止出现“定期计时器仍在队列中”错误：

ngOnInit() {
  // Store the subscription so we can unsubscribe when testing
  this.pollingSubscription = interval(2000).pipe(
    switchMap(() => this.dataService.getStatus())
  ).subscribe((result) => {
    this.uploadStatus = result;
  });
}

然后进行如下测试：

it(`init`, fakeAsync(inject([DataService],
  (dataService: DataService) => {
    const testReturns = [
      of('woo'),
      of('yay')
    ];
    let currentReturn = -1;
    spyOn(dataService, 'getStatus').and.callFake(() => {
      currentReturn++;
      return testReturns[currentReturn];
    });

    expect(component.uploadStatus).toBeUndefined();
    fixture.detectChanges();
    // expect(component.uploadStatus).toBe('Login');
    // spyOn(dataService, 'getStatus').and.returnValue(of('woo'));
    component.ngOnInit();
    tick(2000);
    expect(component.uploadStatus).toBe('woo');
    tick(2000);
    expect(component.uploadStatus).toBe('yay');

    // Unsubscribe to prevent the "periodic timers still in queue" errors
    component.pollingSubscription.unsubscribe();
})));

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

4 个答案: