测试依赖于服务的管道

Question

我有一个消毒 HTML 的管道，如下所示：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'sanitiseHtml'
})

export class SanitiseHtmlPipe implements PipeTransform {

constructor(private _sanitizer: DomSanitizer) {}

    transform(value: any): any {
      return this._sanitizer.bypassSecurityTrustHtml(value);
    }

}

我想测试如下：

describe('Pipe: Sanatiser', () => {
    let pipe: SanitiseHtmlPipe;

    beforeEach(() => {
        pipe = new SanitiseHtmlPipe(new DomSanitizer());
    });

    it('create an instance', () => {
        expect(pipe).toBeTruthy();
    }); 
});

DomSanatizer 是一个抽象 class，它通过将其传递给构造函数由打字稿自动装配：

constructor(private _sanitizer: DomSanitizer) {}

目前我收到打字稿错误：

Cannot create an instance of the abstract class 'DomSanitizer'.

有谁知道在 Angular 中实例化传递给构造函数的依赖项时打字稿会做什么？或者这样的测试方法是什么？

Answer 1

由于你管道中的DI，你需要配置一个测试环境（test bed）来解决依赖：

import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
import { inject, TestBed } from '@angular/core/testing';

describe('SanitiseHtmlPipe', () => {
  beforeEach(() => {
    TestBed
      .configureTestingModule({
        imports: [
          BrowserModule
        ]
      });
  });

  it('create an instance', inject([DomSanitizer], (domSanitizer: DomSanitizer) => {
    let pipe = new SanitiseHtmlPipe(domSanitizer);
    expect(pipe).toBeTruthy();
  })); 
});

Answer 2

万一有人想重用 Pipe 的构造函数，您可以使用 TestBed 来获得相同的结果：

  let pipe: SafeHtmlPipe;
  let sanitized: DomSanitizer

  beforeEach(async() => {
    TestBed.configureTestingModule({
      providers: [DomSanitizer]
    });
    sanitized = TestBed.get(DomSanitizer);
    pipe = new SafeHtmlPipe(sanitized);
  });

  it('create an instance', () => {
    expect(pipe).toBeTruthy();
  });

Answer 3

如果您想模拟整个提供者并且不想使用构造函数，我就是这样做的（使用 Jest，但将间谍替换为常规 jasmine.createSpyObj）

规格

describe("MyPipe", () => {
  let pipe: MyPipe;
  const myServiceSpy = { myFunction: jest.fn() };

  beforeEach(() => {
    jest.clearAllMocks();
    TestBed.configureTestingModule({
      providers: [
        MyPipe,
        {
          provide: MyService,
          useValue: myServiceSpy
        }
      ]
    });

    pipe = TestBed.inject(myPipe);
  });

  it("create an instance", () => {
    expect(pipe).toBeTruthy();
  });
});

管道

@Pipe({
  name: "myPipe"
})
export class MyPipe implements PipeTransform {
  constructor(private readonly myService: MyService) {}

  transform(value: Item): boolean {
    // stuff with your service
    return true;
  }
}

测试依赖于服务的管道

Test pipe with dependencies on services

angular

typescript

dependency-injection

angular2-testing

angular-test