Angular 2：在组件浅层测试中用jasmine spy对象替换注入的渲染器

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;
                });
            }));
       ... 
       });

let renderer2: Renderer2;
...
beforeEach(async( () => {
   TestBed.configureTestingModule({
      ...
      providers: [Renderer2]
   }).compileComponents();
}));

beforeEach(() => {
   fixture = TestBed.createComponent(YourComponent);
   // grab the renderer
   renderer2 = fixture.componentRef.injector.get<Renderer2>(Renderer2 as Type<Renderer2>);
   // and spy on it
   spyOn(renderer2, 'addClass').and.callThrough();
   // or replace
   // spyOn(renderer2, 'addClass').and.callFake(..);
   // etc
});

it('should call renderer', () => {
    expect(renderer2.addClass).toHaveBeenCalledWith(jasmine.any(Object), 'css-class');
});

description（'zip组件浅层测试'，（）=>{
让夹具：组件夹具，
组件：ZippyComponent；
让renderemock=jasmine.createSpyObj（'renderemock'，['myFakeMethod']）；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[ZippyComponent，Zippype]，
供应商：[
{provide:ZippyService，useValue:zippyServiceMock}，
{provide:Renderer，useValue:rendererMock}
],
架构：[无错误\u架构]
});
TestBed.compileComponents（）。然后（（）=>{
fixture=TestBed.createComponent（ZippyComponent）；
组件=fixture.componentInstance；
});
}));
... 
});

使用karma调试创建的组件表明正在注入zippyServiceMock而不是ZippyService。 但是，真正的渲染器不是renderemock，而是被注入的。

---

如何在测试中注入renderemock而不是真实的renderemock

您正在覆盖整个模块的渲染器。但您应该仅为组件覆盖渲染器：

    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;
    });

---

您正在覆盖整个模块的渲染器。但您应该仅为组件覆盖渲染器：

    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;
    });

---

与其模仿渲染器，不如尝试劫持它

这应该与Angular 6一起使用+

在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;
                });
            }));
       ... 
       });

let renderer2: Renderer2;
...
beforeEach(async( () => {
   TestBed.configureTestingModule({
      ...
      providers: [Renderer2]
   }).compileComponents();
}));

beforeEach(() => {
   fixture = TestBed.createComponent(YourComponent);
   // grab the renderer
   renderer2 = fixture.componentRef.injector.get<Renderer2>(Renderer2 as Type<Renderer2>);
   // and spy on it
   spyOn(renderer2, 'addClass').and.callThrough();
   // or replace
   // spyOn(renderer2, 'addClass').and.callFake(..);
   // etc
});

it('should call renderer', () => {
    expect(renderer2.addClass).toHaveBeenCalledWith(jasmine.any(Object), 'css-class');
});

let render2:render2；
...
beforeach（异步（（）=>{
TestBed.configureTestingModule({
...
提供者：[渲染器2]
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（您的组件）；
//抓取渲染器
Renderr2=fixture.componentRef.injector.get（Renderr2作为类型）；
//监视它
spyOn（renderer2，'addClass'）。和.callThrough（）；
//或替换
//spyOn（renderer2，'addClass'）。和.callFake（…）；
//等
});
它（'应该调用渲染器'，（）=>{
expect（renderr2.addClass）.tohavencalledwith（jasmine.any（Object），'css class'）；
});

不要模拟渲染器，而是尝试劫持它

这应该与Angular 6一起使用+

在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;
                });
            }));
       ... 
       });

let renderer2: Renderer2;
...
beforeEach(async( () => {
   TestBed.configureTestingModule({
      ...
      providers: [Renderer2]
   }).compileComponents();
}));

beforeEach(() => {
   fixture = TestBed.createComponent(YourComponent);
   // grab the renderer
   renderer2 = fixture.componentRef.injector.get<Renderer2>(Renderer2 as Type<Renderer2>);
   // and spy on it
   spyOn(renderer2, 'addClass').and.callThrough();
   // or replace
   // spyOn(renderer2, 'addClass').and.callFake(..);
   // etc
});

it('should call renderer', () => {
    expect(renderer2.addClass).toHaveBeenCalledWith(jasmine.any(Object), 'css-class');
});

let render2:render2；
...
beforeach（异步（（）=>{
TestBed.configureTestingModule({
...
提供者：[渲染器2]
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（您的组件）；
//抓取渲染器
Renderr2=fixture.componentRef.injector.get（Renderr2作为类型）；
//监视它
spyOn（renderer2，'addClass'）。和.callThrough（）；
//或替换
//spyOn（renderer2，'addClass'）。和.callFake（…）；
//等
});
它（'应该调用渲染器'，（）=>{
expect（renderr2.addClass）.tohavencalledwith（jasmine.any（Object），'css class'）；
});

我仍然得到真实的渲染器（

debugdomrender

）我仍然得到真实的渲染器（

debugdomrender

）