web-dev-qa-db-ja.com

Angular DomSanitizer依存関係のある6ユニットテストコンポーネント

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

エラープロパティ：Object（{ngDebugContext：DebugContext _（{view：Object（{def：Object（{factory：Function、nodeFlags：16793601、rootNodeFlags：1、nodeMatchedQueries：0、flags：0、nodes：[Object（{nodeIndex：0 、親：null、renderParent：null、bindingIndex：0、outputIndex：0、checkIndex：0、flags：1、childFlags：16793601、directChildFlags：16777217、childMatchedQueries：0、matchedQueries：Object（{}）、matchedQueryIds：0、参照：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 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）

angularunit-testingsanitization
9
Michael Trouw

回避策として、sanitize: () => 'safeString',を追加してみてください

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