如何测试依赖于 DomSanitizer 的 Pipe？

Question

Angular 版本：8.1.2
测试工具：Karma 和 Jasmine，由 ng new 预装

我目前正在从事我的第一个 Angular 项目。作为其中的一部分，我创建了一个调用DomSanitizer.bypassSecurityTrustResourceUrl 的管道。我这样做是为了能够在 iframe 中使用它们。我现在想为此管道实施测试。这是它的代码：

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

@Pipe({
  name: 'safe'
})
export class SafeResourceUrlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(url: string): SafeResourceUrl | string {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

自动生成的规范文件看起来像这样：

import { TestBed, async } from '@angular/core/testing';
import { SafeResourceUrlPipe } from './safe-resource-url.pipe';
import { DomSanitizer } from '@angular/platform-browser';

describe('Pipe: SafeResourceUrle', () => {
  it('should create an instance', () => {
    let pipe = new SafeResourceUrlPipe();
    expect(pipe).toBeTruthy();
  });
});

这不起作用 VSCode 在我运行测试之前告诉我，因为SafeResourceUrlPipe 的构造函数需要一个参数。到目前为止一切顺利，但我不知道现在该怎么办。我不能只使用new DomSanitizer，因为它是一个抽象类。

我尝试的是创建一个实现 DomSanitizer 的模拟类，但是我只能测试是否创建了管道，而且我之前已经知道这一点。我想测试的是它是否正确地完成了转换输入的工作，但是当我伪实现主要依赖项时，我几乎无法测试。

我已经对此进行了一些谷歌搜索，我怀疑结果会很明显，但我找不到。

Answer 1

你不需要模拟DomSanitizer，当你导入BrowserModule时它就可用了。所以你只需要在配置测试模块的时候导入这个模块，然后用TestBed.get()方法取回它就可以传递给你的管道构造器。

import { BrowserModule, DomSanitizer } from '@angular/platform-browser';

describe('Pipe: SafeResourceUrl', () => {

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

  it('should create an instance', () => {
    const domSanitizer = TestBed.get(DomSanitizer);
    const pipe = new SafeResourceUrlPipe(domSanitizer);
    expect(pipe).toBeTruthy();
  });
});

Answer 2

我建议使用 Angular Testbed 来注入这样的 dom sanitizer 的模拟。

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [SafeResourceUrlPipe],
      providers: [
           SafeResourceUrlPipe,
          { provide: DomSanitizer, useValue: {bypassSecurityTrustResourceUrl(){}}
     ]
    });
  }));

然后

describe('Pipe: SafeResourceUrle', () => {
  it('should create an instance', () => {
    let pipe = TestBed.get(SafeResourceUrlPipe);
    expect(pipe).toBeTruthy();
  });
});

附言useValue 在这里很重要。如果您只在此处提供一个值，则可以。如果你想用一个完整的模拟类替换它，你必须useClass（大多数人都会卡住的小错误）

export class MockDomSanitizer {
    bypassSecurityTrustResourceUrl() {}
    otherMethods(){}
}

这应该允许您使用模拟出来的 dom sanitizer 方法运行管道。