用于angular2 router.navigate（）的Jasmine测试用例

Question

我有一个带有按钮的app.component.html文件，可以导航到另一个名为HomeComponent的组件

<button (click)="nav()" id="nav">Navigate</button>
 <router-outlet></router-outlet>

我的app.component.ts文件

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(private router: Router){

  }
  nav(){
    this.router.navigate(['/home']);
  }

}

和我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { RouterModule, Routes,Router } from '@angular/router';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([{ path: "", component: AppComponent}]),
    RouterModule.forChild([{ path: "home", component: HomeComponent}])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的规范文件app.component.spec.ts

import { TestBed, async, ComponentFixture, fakeAsync, tick,inject } from '@angular/core/testing';
import { By, BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DebugElement } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Router, RouterOutlet } from "@angular/router";
import { FormsModule } from "@angular/forms";
import { RouterTestingModule } from '@angular/router/testing';
import * as br from '@angular/platform-browser';


describe('Component:AppComponent', () => {
  let location, router;
  let mockRouter

  beforeEach(() => {
    mockRouter = {
      navigate: jasmine.createSpy('navigate')
    };
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes([
        { path: 'home', component: HomeComponent }
      ])],
      declarations: [AppComponent, HomeComponent]
    });
  });




  it('should go home', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
     console.log(mockRouter.navigate);
    let component = TestBed.createComponent(AppComponent).componentInstance;
    component.nav();
    spyOn(component, 'nav');

    fixture.detectChanges();

    expect(mockRouter.navigate).toHaveBeenCalledWith(['/home']);

  }));
});

我得到的结果是

Answer 1

为了为router.navigate创建单元测试用例，您可以执行以下操作：

import { TestBed, async, ComponentFixture, fakeAsync, tick,inject } from '@angular/core/testing';
import { By, BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DebugElement } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Router, RouterOutlet } from "@angular/router";
import { FormsModule } from "@angular/forms";
import { RouterTestingModule } from '@angular/router/testing';
import * as br from '@angular/platform-browser';


describe('Component:AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent, HomeComponent]
    });
  });

  it('should go home', async(inject([Router], (router) => {
    spyOn(router, 'navigate'); //added a spy on router
    let fixture = TestBed.createComponent(AppComponent);
    let component = TestBed.createComponent(AppComponent).componentInstance;
    component.nav();
    expect(router.navigate).toHaveBeenCalled();
    expect(router.navigate).toHaveBeenCalledWith(['/home']);

  }));
});

Answer 2

您已对[{1}}进行了间谍活动，但尚未将其提供给router环境。尝试添加

testBed

宣言后

。

此外，您不需要包含providers: [ { provide: Router, useValue: mockRouter}, ], ，因为您没有点击任何链接。

参考文献：

https://stackoverflow.com/a/46342813/8558515

Angular 2 Unit Testing - Cannot read property 'root' of undefined