listenglobal renderer event trigger in angular 6 testing script

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.