预期的间谍导航已使用 [ [ 'users' ] ] 调用，但在集成测试 angular CLI 中从未调用过 [英] Expected spy navigate to have been called with [ [ 'users' ] ] but it was never called in integration testing angular CLI

问题描述

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

I implemented a simple integration test on a project but it failed because expect () line is executed before component.save() method. When I put the expect() line on a setTimeout() it is succeed. How to be succeed without 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

推荐答案

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

I have faced the same problem I solved by creating mockRouter and check the method nav() have been called.

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

In this HomeComponent is the landing component and AppComponent is having the router.navigate method.

在我的 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']);   
    }));
});

这篇关于预期的间谍导航已使用 [ [ 'users' ] ] 调用，但在集成测试 angular CLI 中从未调用过的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！