测试异步操作

有时候，我们需要测试依赖于在特定时间发生的异步操作的组件。 Angular提供了一个称为fakeAsync的函数，它将我们的测试包裹在一个区域中，并让我们访问tick函数，这将允许我们精确地模拟时间的流逝。

让我们回到QuoteComponent组件的例子，并使用fakeAsync重写单元测试：

  1. import { Component } from '@angular/core';
  2. import { QuoteService } from './quote.service';
  4. @Component({
  5.   selector: 'my-quote',
  6.   template: '<h3>Random Quote</h3> <div>{{quote}}</div>'
  7. })
  9. export class QuoteComponent {
  10.   quote: string;
  12.   constructor(private quoteService: QuoteService){};
  14.   getQuote() {
  15.     this.quoteService.getQuote().then((quote) => {
  16.       this.quote = quote;
  17.     });
  18.   };
  19. }
  1. import { QuoteService } from './quote.service';
  2. import { QuoteComponent } from './quote.component';
  3. import { provide } from '@angular/core';
  4. import {
  5.   async,
  6.   TestBed,
  7.   fakeAsync,
  8.   tick,
  9. } from '@angular/core/testing';
  11. class MockQuoteService {
  12.   public quote: string = 'Test quote';
  14.   getQuote() {
  15.     return Promise.resolve(this.quote);
  16.   }
  17. }
  19. describe('Testing Quote Component', () => {
  21.   let fixture;
  23.   beforeEach(() => {
  24.     TestBed.configureTestingModule({
  25.       declarations: [
  26.         QuoteComponent
  27.       ],
  28.       providers: [
  29.         { provide: QuoteService, useClass: MockQuoteService }
  30.       ]
  31.     });
  32.     fixture = TestBed.createComponent(QuoteComponent);
  33.     fixture.detectChanges();
  34.   });
  36.   it('Should get quote', fakeAsync(() => {
  37.     fixture.componentInstance.getQuote();
  38.     tick();
  39.     fixture.detectChanges();
  40.     const compiled = fixture.debugElement.nativeElement;
  41.     expect(compiled.querySelector('div').innerText).toEqual('Test quote');
  42.   }));
  43. });

View Example

这里我们有一个QuoteComponent，它有一个getQuote触发异步更新。 我们将整个测试包装在fakeAsync中，这将允许我们通过调用tick()来使用同步函数调用来测试我们的组件(getQuote())的异步行为。 然后我们可以运行detectChanges并查询DOM的预期结果。