3

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 的模拟类，但是我只能测试是否创建了管道，而且我之前已经知道了。我想测试的是它是否正确地完成了转换输入的工作，但是当我伪实现主要依赖项时，我几乎无法测试它。

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

4

2 回答 2

8

您不需要模拟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();
  });
});
于 2020-02-09T04:10:28.637 回答
1

我建议使用 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();
  });
});

ps 在useValue这里很重要。如果您只在此处提供一个值，那么就可以了。如果你想用一个完整的模拟类来代替它，你必须useClass（大多数人都会卡住的小失误）

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

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

于 2019-07-28T09:57:07.460 回答