注入依赖和DOM修改

在前面的例子中,我们测试的类MessageComponent没有任何注入的依赖。 在Angular 2中,组件通常依赖于服务和其他类(管道/提供程序等)来运行,这将被注入到组件类的构造函数中。 当测试这些组件时,我们自己注入依赖。 由于这是一个Angular特定的例程,没有用于完成这个的纯Jasmine函数。 Angular在@angular/core/testing中提供了许多函数,使我们能够有效地测试我们的组件。 让我们来看一个基本组件:

quote.component.ts

import { QuoteService } from './quote.service';
import { Component } from '@angular/core';

@Component({
  selector: 'my-quote',
  template: '<h3>Random Quote</h3> <div>{{quote}}</div>'
})

export class QuoteComponent {
  quote: string;

  constructor(private quoteService: QuoteService){};

  getQuote() {
    this.quoteService.getQuote().then((quote) => {
      this.quote = quote;
    });
  };
}

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

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

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

quote.spec.ts

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
      ],
      providers: [
        { provide: QuoteService, useClass: MockQuoteService }
      ]
    });
    fixture = TestBed.createComponent(QuoteComponent);
    fixture.detectChanges();
  });

  it('Should get quote', async(inject([], () => {
    fixture.componentInstance.getQuote();
    fixture.whenStable()
      .then(() => {
        fixture.detectChanges();
        return fixture.whenStable();
      })
      .then(() => {
        const compiled = fixture.debugElement.nativeElement;
        expect(compiled.querySelector('div').innerText).toEqual('Test quote');
      });
  })));
});

View Example

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

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

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

我们使用TestBed.configureTestingModule来提供我们的组件所需的任何依赖项。 这里我们的组件依赖于QuoteService来获取数据。 我们自己模拟这些数据,从而让我们控制我们期望出现的价值。 优秀的做法是将组件测试与服务测试分开 - 这使得测试更容易,因为您一次只关注应用程序的一个方面。 如果您的服务或组件失败,您将如何知道哪个是罪魁祸首? 我们使用我们的mock类MockQuoteService注入QuoteService依赖,在这里我们将为组件提供模拟数据。

接下来我们使用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是否包含我们通过QuoteService设置的报价。最后一行试图断言DOM的div标签包含模拟报价'Test Quote'。如果是,则我们的组件通过测试并按预期工作;如果没有,这意味着我们的组件不正确地输出引号。

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