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

使用karma调试创建的组件表明正在注入zippyServiceMock而不是ZippyService。但是，而不是rendererMock，正在注入真正的渲染器。如何在我的测试中注入rendererMock而不是真实的？

Answer 1

与其嘲笑渲染器，不如尝试劫持它……

这应该适用于Angular 6 +

在您的component.spec.ts

中

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

Answer 2

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

    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 2：在组件浅层测试中用jasmine spy对象替换注入的Renderer

2 个答案: