angular - 预期 spy 导航已使用 [ [ 'users' ] ] 调用，但从未在集成测试 Angular CLI 中调用过

Question

我在一个项目上实现了一个简单的集成测试，但它失败了，因为 expect () 行在 component.save() 方法之前执行。当我将 expect() 行放在 setTimeout() 上时，它成功了。没有 setTimeout() 如何成功？

规范

 import { Observable } from 'rxjs/Rx';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser'; 
 import { DebugElement } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/Router';
 import { UserDetailsComponent } from './user-details.component';
 import { RouterTestingModule } from '@angular/router/testing';

 class RouterStub {
 navigate(params) { };
 }
 class ActivatedRouteStub {
 params: Observable<any> = Observable.empty();
 }
 describe('UserDetailsComponent', () => {
 let component: UserDetailsComponent;
 let fixture: ComponentFixture<UserDetailsComponent>;

 beforeEach(async(() => {
  TestBed.configureTestingModule({
  imports: [RouterTestingModule],
   declarations: [UserDetailsComponent],
   providers: [
     { provide: Router, useClass: RouterStub },
     { provide: ActivatedRoute, useClass: ActivatedRouteStub }
   ],
 })
   .compileComponents();
}));

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

it('should redirect the user to the users page after saving', () => {
let router = TestBed.get(Router);
let spy = spyOn(router, 'navigate');

component.save();

expect(spy).toHaveBeenCalledWith(['users']);

 });
});

错误:

Expected spy navigate to have been called with [ [ 'users' ] ] but it was never called

Answer 1

我遇到了同样的问题，我通过创建 mockRouter 解决了这个问题，并检查方法 nav() 是否被调用。

在这个 HomeComponent 中是登陆组件，AppComponent 有 router.navigate 方法。

在我的app.component.ts

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

还有我的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 { RouterModule, Routes } from '@angular/router';
import { Router, RouterOutlet,ActivatedRoute } from "@angular/router";
import { RouterTestingModule } from '@angular/router/testing';
import * as br from '@angular/platform-browser';

describe('Component:AppComponent', () => {
    let component: AppComponent;
    let fixture: ComponentFixture<AppComponent>;
    let debugElement: DebugElement;
    let location, router: Router;
    let mockRouter;

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

    beforeEach(() => {
        fixture = TestBed.createComponent(AppComponent);
        component = fixture.componentInstance;
        debugElement = fixture.debugElement;
    });

    it('should go home', async(() => {
        fixture.detectChanges();
        component.nav();
        expect(mockRouter.navigate).toHaveBeenCalledWith(['/home']);   
    }));
});