使用 Renderer2 对 angular 组件进行单元测试

Question

I have a angular component which looks like this:

constructor(
        @Inject(INJECTION_TOKEN_WINDOW) private window: Window,
        private renderer: Renderer2
){}

ngOnInit() {
  this.renderer.addClass(this.window.document.body, 'myCssClass');
}

Unit test snippet:

const TOKEN_WINDOW = 'Window';

const WindowMock = {
    document: {
        body: {}
    }
};
describe('MyComponent', () => {
let renderer: Renderer2;
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;

beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            providers: [
                Renderer2,
                { provide: TOKEN_WINDOW, useValue: WindowMock }
            ]
        }).compileComponents();
    }));

beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        el = fixture.debugElement;

        renderer = fixture.componentRef.injector.get<Renderer2>(Renderer2 as Type<Renderer2>);
        spyOn(renderer, 'myCssClass').and.callThrough();
        fixture.detectChanges();
    });
})

//Tests here...

I am getting below error when I run the tests (for any test I am getting the same error below). I guess something wrong with Renderer2 configuration in my test? Please help

TypeError: Cannot read property 'add' of undefined
    at <Jasmine>
    at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.addClass (http://localhost:9876/_karma_webpack_/node_modules/@angular/platform-browser/fesm5/platform-browser.js:1160:67)
    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.addClass (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:30455:1)
    at <Jasmine>

Answer 1

I am thinking the Renderer2 requires the actual implementation of the window and not the mock and to mock the actual window to the point that the actual Renderer2 is satisfied can be cumbersome.

Either mock both the window and Renderer2 to the point that your component is satisfied or provide the actual window and actual Renderer2 .