我该如何着手测试依赖于 DomSanitizer 的管道？

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，因为它是一个抽象的 class。

我尝试的是创建一个实现 DomSanitizer 的模拟 class，但是我只能测试管道是否已创建，而我之前已经知道了。我想测试的是它是否正确地完成了它的工作 t运行s 形成输入，但是当我伪实现主要依赖时我很难测试它。

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

Answer 1

我建议使用 Angular Testbed 像这样注入 dom 消毒剂的模拟。

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();
  });
});

p.s。 useValue 在这里很重要。如果您只在此处提供一个值，那么它很好。如果你想用一个完整的模拟 class 替换它，你必须 useClass （大多数人都会遇到的小错误）

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

这应该允许您运行使用模拟 dom 消毒方法的管道。

Answer 2

您不需要模拟 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();
  });
});

我该如何着手测试依赖于 DomSanitizer 的管道？

How do I go about testing a Pipe which depends on DomSanitizer?

angular

abstract-class

angular-test

angular-dom-sanitizer