listenglobal renderer event trigger in angular 6 testing script

Question

I want to test my RolesComponent listenGlobal Renderer method. RolesComponent code below.

import { Component, OnInit, Renderer, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';

import { AhanaService } from '../../services/ahana.service';

@Component({
    selector: 'app-roles',
    template: '<div><button roleId="1">test click</button></div>',
    styleUrls: ['./roles.component.css']
})
export class RolesComponent implements AfterViewInit {

    constructor(public router: Router, private ahanaService: AhanaService, private renderer: Renderer) {}

    ngAfterViewInit(): void {
        this.renderer.listenGlobal('document', 'click', (event) => {
            if (event.target.hasAttribute("roleId")) {
                var roleId = event.target.getAttribute('roleId')
                // console.log('/configuration/update-role/' + roleId)
                this.router.navigate(['/configuration/update-role/' + roleId]);
            }
        });
    }

}

how to convert RolesComponent.spec.ts and ngAfterViewInit(): void { this.renderer.listenGlobal('document', 'click', (event) => { method call.

Answer 1

If you want to test that your click listener is behaving as expected, then you can manually call the ngAfterViewInit lifecycle hook from your test and assert that router.navigate() is called as expected. In order to do this, you can mock and spy on the router.navigate method and expect it to have been called with a particular url route. The result is very similar to this stack overflow answer.

import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RolesComponent } from './roles.component';

describe('RolesComponent', () => {
  let component: RolesComponent;
  let fixture: ComponentFixture<RolesComponent>;
  const routerSpy = { navigate: jasmine.createSpy('navigate') }; // Create our router mock, which we will spy on

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ RolesComponent ],
      providers: [{ provide: Router, useValue: routerSpy }], // Register our mock router as a provider
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(RolesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should register click listener', fakeAsync(() => {
    component.ngAfterViewInit(); // Call the lifecycle hook
    const button = fixture.debugElement.nativeElement.querySelector('button');
    button.click(); // "Click" the button
    tick();
    expect(routerSpy.navigate).toHaveBeenCalledWith(['/configuration/update-role/1']); // Assert that our mock was called
  }));
});