web-dev-qa-db-fra.com

Angular 6 composant de test unitaire avec dépendance DomSanitizer

Dans un test unitaire pour simplement créer (instancier) un composant qui a une dépendance DomSanitizer, comment peut-on se moquer/écraser cette dépendance?

Parce que DomSanitizer est une classe Abstract, je n'ai aucune idée de ce à quoi ressemble vraiment la signature de méthode de bypassSecurityTrustHtml.

Et si ce n'est pas destiné à se moquer/stub DomSanitizer, comment doit-on procéder pour injecter l'implémentation réelle dans la classe abstraite?

l'instruction réelle dans le composant ressemble à:

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

TestBed la configuration ressemble à:

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

L'erreur spécifique que j'obtiens dans Karma dans Chrome (pas sans tête) est la suivante:

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

propriétés d'erreur: Object ({ngDebugContext: DebugContext _ ({view: Object ({def: Object ({factory: Function, nodeFlags: 16793601, rootNodeFlags: 1, nodeMatchedQueries: 0, flags: 0, nœuds: [Object ({nodeIndex: 0) , parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, drapeaux: 1, childFlags: 16793601, directChildFlags: 16777217, childMatchedQueries: 0, matchedQueries: Object ({}), matchedQueryIds: 0, références : Object ({}), ngContentIndex: null, childCount: 5, liaisons: [], bindingFlags: 0, sorties: [], élément: Object ({ns: null, nom: null, attrs: [], modèle: null , componentProvider: null, componentView: null, componentRendererType: null, publicProviders: null ({}), allProviders: null ({}), handleEvent: Function}), fournisseur: null, text: null, requête: 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) à checkAndUpdateElementValue (webpack: ///./node_modules/@angular/ core/fesm5/core.js?: 8189: 13) sur checkAndUpdateElementInline (webpack: ///./node_modules/@angular/core/fesm5/core.js?: 8136: 24) sur checkAndUpdateNodeInline (webpack: ///. /node_modules/@angular/core/fesm5/core.js?:10477:20) sur checkAndUpdateNode (webpack: ///./node_modules/@angular/core/fesm5/core.js?: 10443: 16) sur debugCheckAndUpdateNode ( webpack: ///./node_modules/@angular/core/fesm5/core.js?: 11076: 38) sur debugCheckRenderNodeFn (webpack: ///./node_modules/@angular/core/fesm5/core.js?: 11062 : 13) sur Object.eval [comme updateRenderer] (ng: ///DynamicTestModule/ConversationMessageComponent.ngfactory.js: 84: 5) sur Object.debugUpdateRenderer [as updateRenderer] (webpack: ///./node_modules/@angular/ core/fesm5/core.js?: 11054: 21) sur checkAndUpdateView (webpack: ///./node_modules/@angular/core/fesm5/core.js?: 10430: 14)

angularunit-testingsanitization
9
Michael Trouw

Pour contourner ce problème, essayez d'ajouter sanitize: () => 'safeString',

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