Overriding Dependencies for Testing

TestBed provides several functions to allow us to override dependencies that are being used in a test module.

  • overrideModule
  • overrideComponent
  • overrideDirective
  • overridePipe
    For example, you might want to override the template of a component. This is useful for testing a small part of a large component, as you can ignore the output from the rest of the DOM and only focus on the part you are interested in testing.
  1. import {Component} from '@angular/core';
  3. @Component({
  4.   selector: 'display-message',
  5.   template: `
  6.     <div>
  7.       <div>
  8.         <h1>{{message}}</h1>
  9.       <div>
  10.     </div>
  11.   `
  12. })
  13. export class MessageComponent {
  14.   public message: string = '';
  16.   setMessage(newMessage: string) {
  17.       this.message = newMessage;
  18.   }
  19. }
  1. import {MessageComponent} from './message.component';
  2. import { provide } from '@angular/core';
  3. import {
  4.   async,
  5.   inject,
  6.   TestBed,
  7. } from '@angular/core/testing';
  9. describe('MessageComponent', () => {
  11.   let fixture;
  13.   beforeEach(() => {
  14.     TestBed.configureTestingModule({
  15.       declarations: [MessageComponent],
  16.       providers: []
  17.     });
  19.     fixture = TestBed.overrideComponent(MessageComponent, {
  20.       set: {
  21.         template: '<span>{{message}}</span>'
  22.       }})
  23.       .createComponent(MessageComponent);
  25.     fixture.detectChanges();
  26.   });
  28.   it('should set the message', async(inject([], () => {
  29.     fixture.componentInstance.setMessage('Test message');
  30.     fixture.detectChanges();
  31.     fixture.whenStable().then(() => {
  32.       const compiled = fixture.debugElement.nativeElement;
  33.       expect(compiled.querySelector('span').innerText).toEqual('Test message');
  34.     });
  35.   })));
  37. });

View Example

原文: https://angular-2-training-book.rangle.io/handout/testing/components/overriding.html