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

Question

在单元测试中只创建(实例化)具有DomSanitizer依赖关系的组件,如何模拟/存根这种依赖关系？

因为DomSanitizer是一个Abstract类,我不知道方法签名究竟是什么bypassSecurityTrustHtml样的.

如果它不打算模拟/存根DomSanitizer,那么应该如何继续注入抽象类的实际实现呢？

组件中的实际语句如下所示:

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属性: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,directChildFlag s:16777217 ... at setElementProperty(webpack:///./node_modules/@angular/core/fesm5/core.js？:8237:61)at checkAndUpdateElementValue(webpack:///./node_modules/@angular/在checkAndUpdateNodeInline(webpack:///. /node_modules/@angular/core/fesm5/core.js?:10477:20)在checkChendAndUpdateNode上的checkAndUpdateNode(webpack:///./node_modules/@angular/core/fesm5/core.js？:10443:16) webpack:///./node_modules/@angular/core/fesm5/core.js？:11076:38)在debugCheckRenderNodeFn(webpack:///./node_modules/@angular/core/fesm5/core.js？:11062 :13)在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)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,
  },
}