测试组件 - 注入依赖和DOM更改

优质

小牛编辑

139浏览

2023-12-01

quote.component.ts

此组件依赖于来获取随机报价，然后它将显示。类很简单 - 它只有getQuote函数，它将修改DOM，因此它将是我们测试的主要目标。

为了测试这个组件，我们需要启动QuoteComponent类。 Angular测试库提供了一个名为TestBed的实用程序。这允许我们配置一个测试模块，我们可以提供模拟依赖。此外，它将为我们创建组件并返回一个组件fixture

，我们可以对其执行测试操作。

import { QuoteService } from './quote.service';
import { QuoteComponent } from './quote.component';
import { provide, destroyPlatform } from '@angular/core';
import {
  async,
  inject,
  TestBed,
} from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
class MockQuoteService {
  public quote: string = 'Test quote';
  getQuote() {
    return Promise.resolve(this.quote);
}
describe('Testing Quote Component', () => {
  let fixture;
  beforeEach(() => destroyPlatform());
  beforeEach(() => {
    TestBed.initTestEnvironment(
      BrowserDynamicTestingModule,
      platformBrowserDynamicTesting()
    );
    TestBed.configureTestingModule({
      declarations: [
        QuoteComponent
      ],
        { provide: QuoteService, useClass: MockQuoteService }
      ]
    });
    fixture = TestBed.createComponent(QuoteComponent);
    fixture.detectChanges();
  });
  it('Should get quote', async(inject([], () => {
    fixture.componentInstance.getQuote();
    fixture.whenStable()
        fixture.detectChanges();
        return fixture.whenStable();
      })
      .then(() => {
        const compiled = fixture.debugElement.nativeElement;
        expect(compiled.querySelector('div').innerText).toEqual('Test quote');
      });
});

测试QuoteComponent是一个相当简单的过程。我们想创建一个QuoteComponent，给它一个报价，看看它是否出现在DOM中。这个过程需要我们创建组件，传入任何依赖项，触发组件执行一个动作，然后查看DOM，看看动作是否是我们所期望的。

让我们来看看上面的单元测试是如何实现的。

我们使用TestBed.initTestingEnvironment创建一个使用BrowserDynamicTestingModule和platformBrowserDynamicTesting作为参数的测试平台，它们也从Angular导入，并允许应用程序被引导进行测试。这对于使用TestBed的所有单元测试都是必要的。请注意，在每次测试运行之前，该平台将被销毁并重置。

接下来我们使用TestBed.createComponent(QuoteComponent)创建一个fixture ，供我们在我们的测试中使用。这将创建一个我们的组件的新实例，完成任何角度特定的例程，如依赖注入。 fixture是一个强大的工具，允许我们查询组件渲染的DOM，以及更改DOM元素和组件属性。它是测试组件的主要接入点，我们广泛使用它。

在Should get quote测试中，我们通过fixture.componentInstance属性访问了我们的组件。然后我们调用getQuote来启动我们在QuoteComponent组件中的唯一操作。我们通过使用它的whenStable方法来运行测试，该方法将确保getQuote()中的promise已经解决，给组件一个设置报价值的机会。我们调用fixture.detectChanges来监视对DOM发生的任何更改，并使用fixture.debugElement.nativeElement属性来访问那些基础DOM元素。

现在我们可以检查由我们的QuoteComponent渲染的DOM是否包含我们通过设置的报价。最后一行试图断言DOM的div标签包含模拟报价’Test Quote’。如果是，则我们的组件通过测试并按预期工作；如果没有，这意味着我们的组件不正确地输出引号。

我们的报价测试包在async()中。这是为了允许我们的测试在异步测试区域运行。使用异步将创建一个测试区域，这将确保所有异步功能在结束测试之前已经完成。