angular5 testing - iframe安全管道 - bypassSecurityTrustResourceUrl不是函数 - 错误

Question

我有Angular5项目，我们正在使用带有Safe Pipe的iframe加载我们组件的外部站点（使用DomSanitizer.bypassSecurityTrustResourceUrl转换站点URL的自定义管道）。应用程序运行良好（通过加载站点内容）。

在编写测试用例时，我们遇到了错误。

Chrome 66.0.3359 (Windows 10 0.0.0) DummyComponent toggle button check FAILED
    TypeError: this.sanitizer.bypassSecurityTrustResourceUrl is not a function
        at SafePipe.transform (webpack:///./src/app/safe.pipe.ts?:21:31)

这是整个测试案例bootstarping。

describe('DummyComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        BrowserModule,
        HttpClientTestingModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        NoopAnimationsModule,
        TranslateModule.forRoot()],
      declarations: [DummyComponent, SafePipe],
      providers: [NotificationService, TranslateService, DomSanitizer],
    }).compileComponents();
  });

   it('load content', () => {
     // expecting content is loading
     ....
   }

}

Answer 1

在您呼叫pipe时，可能没有分配要使用的pipe类型。在组件HTML中，确保它类似于

<div [innerHTML]="description | safe: 'html'"></div> 

重要的是，| safe:之后是DomSanitizer的类型。