Angular 6 个具有 DomSanitizer 依赖性的单元测试组件

Question

在仅创建（实例化）具有 DomSanitizer 依赖项的组件的单元测试中，如何模拟/存根此依赖项？

因为 DomSanitizer 是一个 Abstract class，我不知道 bypassSecurityTrustHtml 的方法签名到底是什么样的。

如果它不是为了模拟/存根 DomSanitizer，应该如何继续将实际实现注入抽象 class？

组件中的实际语句如下：

this.trustedString = <string>this.domSanitizer.bypassSecurityTrustHtml(trustedHTML);

TestBed 设置如下：

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      BrowserModule,
      // other modules
    ],
    providers: [
      {
        provide: DomSanitizer,
        useValue: {
          bypassSecurityTrustHtml: () => 'safeString'
        }
      },
      // more providers
    ],
    declarations: [ TheComponent ],
    schemas: [ NO_ERRORS_SCHEMA ]
  })
    .compileComponents();
}));

我在 Chrome（不是无头）中的 Karma 中遇到的具体错误是：

TypeError: view.root.sanitizer.sanitize is not a function

error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 16793601, rootNodeFlags: 1, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 16793601, directChildFlags: 16777217, childMatchedQueries: 0, matchedQueries: Object({ }), matchedQueryIds: 0, references: Object({ }), ngContentIndex: null, childCount: 5, bindings: [ ], bindingFlags: 0, outputs: [ ], element: Object({ ns: null, name: null, attrs: [ ], template: null, componentProvider: null, componentView: null, componentRendererType: null, publicProviders: null({ }), allProviders: null({ }), handleEvent: Function }), provider: null, text: null, query: null, ngContent: null }), Object({ nodeIndex: 1, parent: Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 16793601, directChildFlags: 16777217 ... at at setElementProperty (webpack:///./node_modules/@angular/core/fesm5/core.js?:8237:61) at checkAndUpdateElementValue (webpack:///./node_modules/@angular/core/fesm5/core.js?:8189:13) at checkAndUpdateElementInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:8136:24) at checkAndUpdateNodeInline (webpack:///./node_modules/@angular/core/fesm5/core.js?:10477:20) at checkAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:10443:16) at debugCheckAndUpdateNode (webpack:///./node_modules/@angular/core/fesm5/core.js?:11076:38) at debugCheckRenderNodeFn (webpack:///./node_modules/@angular/core/fesm5/core.js?:11062:13) at Object.eval [as updateRenderer] (ng:///DynamicTestModule/ConversationMessageComponent.ngfactory.js:84:5) at Object.debugUpdateRenderer [as updateRenderer] (webpack:///./node_modules/@angular/core/fesm5/core.js?:11054:21) at checkAndUpdateView (webpack:///./node_modules/@angular/core/fesm5/core.js?:10430:14)

Answer 1

作为解决方法，尝试添加 sanitize: () => 'safeString',

...
useValue: {
  sanitize: () => 'safeString',
  bypassSecurityTrustHtml: () => 'safeString'
}
...

Answer 2

如果要保留值，请使用：

{
  provide: DomSanitizer,
  useValue: {
    sanitize: (ctx: any, val: string) => val,
    bypassSecurityTrustResourceUrl: (val: string) => val,
  },
}

Angular 6 个具有 DomSanitizer 依赖性的单元测试组件

Angular 6 unit testing component with DomSanitizer dependency

unit-testing

sanitization

angular