How to test a component with a renderer in the constructor

Question

Consider this code:

import {
    Component,
    OnInit,
    Renderer,
    OnDestroy
  } from '@angular/core';

  import { TranslateService } from 'ng2-translate/ng2-translate';

  export class AppComponent implements OnInit, OnDestroy {

  constructor( private translate: TranslateService, renderer: Renderer ) {
    this.globalKeyListenFunc = renderer.listenGlobal('document', 'keydown', (event) => {
      if (event.keyCode === 18) { // ALT-Key
        event.preventDefault();
      }
    });
    ...
  }

How can I test such a component with a jasmine test?

I tried following test:

describe('App', () => {
  let injector: Injector;
  let backend: MockBackend;
  let connection: MockConnection;
  let translate: TranslateService;
  let renderer: Renderer;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpModule, TranslateModule.forRoot()],
      providers: [
        AppComponent,
        {provide: XHRBackend, useClass: MockBackend},
        Renderer
      ]
    });
    injector = getTestBed();
    backend = injector.get(XHRBackend);
    translate = injector.get(TranslateService);
    renderer= injector.get(Renderer);
    backend.connections.subscribe((c: MockConnection) => connection = c);

  });


  it('should have fore languages', inject([ AppComponent ], (app: AppComponent) => {
    app.ngOnInit();
    expect(app.supportedLanguages.length).toBe(4);
  }));

The error I get:

TypeError: undefined is not a constructor (evaluating 'renderer.listenGlobal') in config/spec-bundle.js

It seams that the Renderer instance has not the same behavior as in a real browser environment. As usual in a CI environment, I am using the PhantomJS browser to execute the test.

Answer 1

This should be working with Angular 6+

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