Компонент модульного тестирования Angular 6 с зависимостью от DomSanitizer

В модульном тесте для простого создания (инстанцирования) компонента, имеющего зависимость 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();
}));

Конкретная ошибка, которую я получаю в Karma в Chrome (не без головы), такова:

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)

🤔 А знаете ли вы, что...
Angular предоставляет средства для работы с HTTP-запросами и взаимодействия с внешними API.


15
9 483
2

Ответы:

Решено

В качестве обходного пути попробуйте добавить sanitize: () => 'safeString',

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

Если вы хотите сохранить значение, используйте:

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