testing - 在 angular 6 测试脚本中监听全局渲染器事件触发器

Question

我想测试我的 RolesComponent listenGlobal Renderer 方法。 RolesComponent 代码如下。

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

}

如何转换 RolesComponent.spec.ts 和 ngAfterViewInit(): void { this.renderer.listenGlobal('document', 'click', (event) => {方法调用。

Answer 1

如果你想测试你的点击监听器是否按预期运行，那么你可以手动调用 ngAfterViewInit来自您的测试的生命周期 Hook 并断言 router.navigate()按预期调用。为此，您可以模拟和监视 router.navigate方法并期望它被特定的 url 路由调用。结果与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
  }));
});