Angularjs 测试单击按钮后是否调用了正确的路由

我不熟悉单元测试，试着阅读了一些教程，比如如何测试ng2组件、路由器等。。但我仍然不知道如何做到这一点

我想在点击

#logout

按钮后测试“登录”路径是否被激活

这是我到目前为止得到的，但它根本不起作用，部分起作用。当我调用

spy.calls.first（）

时，我得到了

undefined

，但是当我调用

spy.calls.all（）

时，我可以看到预期的结果

import { ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { By }              from '@angular/platform-browser';
import { Router } from '@angular/router';
import { DebugElement }    from '@angular/core';
import { async } from '@angular/core/testing';

import { HomeComponent } from './home.component';

import { click } from '../testing/index'

class RouterStub {
  navigate(url: string) { return url; }
}

describe('HomeComponent', () => {

  let comp:    HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;
  let de:      DebugElement;
  let el:      HTMLElement;
  let logoutBtnEl: HTMLElement;

  // async beforeEach
  beforeEach( async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomeComponent ], // declare the test component
      providers: [
        { provide: Router,      useClass: RouterStub }
      ]
    })
    .compileComponents();  // compile template and css
  }));


  // synchronous beforeEach
  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    comp = fixture.componentInstance; // BannerComponent test instance

    de = fixture.debugElement.query(By.css('h1'));  // query for the title <h1> by CSS element selector
    el = de.nativeElement;
    logoutBtnEl = fixture.debugElement.query(By.css('#logout')).nativeElement;
    fixture.detectChanges(); // trigger initial data binding
  });

  it('should display contain \'Welcome\' in title', () => {
    expect(el.textContent).toContain("Welcome");
  });

  it('should tell ROUTER to navigate when logout clicked',
    inject([Router], (router: Router) => {
        const spy = spyOn(router, 'navigate');
        click(logoutBtnEl);
        console.log(spy.calls.first())
        const navArgs = spy.calls.first().args[0];
        expect( navArgs ).toBe('login', 'should nav to login screen')
    }
  ));


});

从'@angular/core/testing'导入{ComponentFixture，TestBed，inject}；
从“@angular/platform browser”导入{By}”；
从'@angular/Router'导入{Router}；
从“@angular/core”导入{DebugElement}；
从“@angular/core/testing”导入{async}；
从“./home.component”导入{HomeComponent}；
从“../testing/index”导入{click}
类路由桶{
导航（url:string）{返回url；}
}
描述（'HomeComponent'，（）=>{
let comp：HomeComponent；
let夹具：组件夹具；
设de:DebugElement；
让el:HTMLElement；
让logoutBtnEl:HTMLElement；
//之前异步
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[HomeComponent]，//声明测试组件
供应商：[
{提供：路由器，useClass:RouterStub}
]
})
.compileComponents（）；//编译模板和css
}));
//同步前置
在每个之前（（）=>{
fixture=TestBed.createComponent（HomeComponent）；
comp=fixture.componentInstance；//BannerComponent测试实例
de=fixture.debugElement.query（By.css（'h1'）；//通过css元素选择器查询标题
el=自然元素；
logoutBtnEl=fixture.debugElement.query（By.css（'#logout'））.nativeElement；
fixture.detectChanges（）；//触发初始数据绑定
});
它（'应在标题中显示包含'欢迎'，（）=>{
期望（el.textContent）.toContain（“欢迎”）；
});
它（'应该在单击注销时通知路由器导航'，
注入（[路由器]，（路由器：路由器）=>{
constspy=spyOn（路由器，“导航”）；
单击（注销btnel）；
console.log（spy.calls.first（））
const navArgs=spy.calls.first（）.args[0]；
expect（navArgs）.toBe（'login'，'shouldnav to login screen'）
}
));
});

这对我很有用：

使用：

RouterTestingModule

：

import { RouterTestingModule } from '@angular/router/testing';

导入它：

imports: [
                etc...,
                RouterTestingModule
            ],

然后测试它：

let component: DashboardComponent;

it ('should be able to go to login on click', () => {
        spyOn(component.router, 'navigate').and.returnValue(true);
        component.logout();
        expect(component.router.navigate).toHaveBeenCalledWith(['login']);
    });

这对我很有用：

使用：

RouterTestingModule

：

import { RouterTestingModule } from '@angular/router/testing';

导入它：

imports: [
                etc...,
                RouterTestingModule
            ],

然后测试它：

let component: DashboardComponent;

it ('should be able to go to login on click', () => {
        spyOn(component.router, 'navigate').and.returnValue(true);
        component.logout();
        expect(component.router.navigate).toHaveBeenCalledWith(['login']);
    });

---

你为什么不直接使用

expect（spy.navigate）。toHaveBeenCalledWith（['login']）

？这确实是一个好观点：…你为什么不直接使用

expect（spy.navigate）。toHaveBeenCalledWith（['login']）

？这确实是一个好观点：。。