Karma-Jasmine 如何在 angular 路由器组件中进行测试

Question

我想测试这个 header 组件，但我不知道该怎么做，我正在使用 angular，只想测试路由器功能

这是html

<header class="site-header">
  <nav class="navbar-home">
    <a (click)="routerTo('/home')">CIUDADELA </a> |
    <a (click)="routerTo('/request')">Solicitudes</a> |
    <a (click)="routerTo('/materials')">Materiales</a> |
  </nav>
</header>

这是 header.component.ts

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent{

  constructor(
    private router: Router
  ) { }

  routerTo(link : string): void {
    this.router.navigate([link]);
  }

}

这就是我需要测试的报道内容

Answer 1

我会编写这样的测试来覆盖对路由器的调用：

it('navbar-home item should call router.navigate',() => {
     const router= TestBed.inject(Router)
     spyOn(router, 'navigate')
     const firstLink = fixture.debugElement.query(By.css('.navbar-home')).children[0]
     firstLink .triggerEventHandler('click', '/home');
     fixture.detectChanges()
     expect(router.navigate).toHaveBeenCalledWith(['/home']);
  });

您可以用同样的方式检查对您的组件函数的调用。

您需要在测试设置中提供路由器

Karma-Jasmine 如何在 angular 路由器组件中进行测试

Karma-Jasmine How to test in angular a Router component

testing

alert

jasmine

karma-jasmine

angular