2角度：成分浅い試験でジャスミンスパイオブジェクトを注入レンダラを交換

Question

zippy.component.ts：

import { Component } from '@angular/core'; 
    import {ZippyService} from '../services/zippy.service' 
    import {Renderer} from '@angular/core' 

    @Component({ 
    selector: 'app-zippy', 
    templateUrl: './zippy.component.html', 
    styleUrls: ['./zippy.component.less'] 
    }) 
    export class ZippyComponent { 
    doNotShow:boolean = true; 

    text:string; 
    constructor(private zippyService:ZippyService, private renderer:Renderer) { 
     this.text = this.zippyService.getText(); 
    } 

    toggleDisplay() { 
     this.doNotShow = !this.doNotShow; 
    } 

    } 

zippy.component.spec.tsカルマで作成されたコンポーネントのデバッグ

describe('Zippy component shallow tests',()=>{ 
      let fixture:ComponentFixture<ZippyComponent>, 
       component: ZippyComponent; 

      let rendererMock = jasmine.createSpyObj('rendererMock', ['myFakeMethod']); 
      beforeEach(async(() => { 

       TestBed.configureTestingModule({ 
        declarations: [ZippyComponent, ZippyPipe], 
        providers: [ 
         { provide: ZippyService, useValue: zippyServiceMock }, 
         { provide: Renderer, useValue: rendererMock } 
        ], 
        schemas: [NO_ERRORS_SCHEMA] 
       }); 

       TestBed.compileComponents().then(()=>{ 
        fixture = TestBed.createComponent(ZippyComponent); 
        component = fixture.componentInstance; 
       }); 
      })); 
     ... 
     }); 

ZippyServiceの代わりにzippyServiceMockが注入されていることを示しています。 レンダラモックの代わりに、実際のレンダラが注入されています。 テストで本当のレンダラモックの代わりにレンダラモックを注入するにはどうしたらいいですか？

Answer 1

モジュール全体のレンダリングをオーバーライドしています。しかし、あなただけのコンポーネントのレンダラをオーバーライドする必要があります。

TestBed.configureTestingModule({ 
       declarations: [ZippyComponent, ZippyPipe], 
       providers: [ 
        { provide: ZippyService, useValue: zippyServiceMock } 
       ], 
       schemas: [NO_ERRORS_SCHEMA] 
      })     
    .overrideComponent(ZippyComponent, { 
     set: { 
      providers: [ 
        {provide: Renderer, useValue: rendererMock} 
      ] 
     } 
    }); 

    TestBed.compileComponents().then(()=>{ 
     fixture = TestBed.createComponent(ZippyComponent); 
     component = fixture.componentInstance; 
    });