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

问题描述

我在一个项目上实现了一个简单的集成测试，但是失败了，因为Expect()行在component.save()方法之前执行.当我将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()?

spec.ts

 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

推荐答案

我也遇到了与我创建模拟路由器并检查方法 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']]调用，但在集成测试角度CLI中从未调用过的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！