Angular 5 - 尝试导航到特定路线时，Jasmine 的路由测试失败答案

【问题标题】：Angular 5 - Routing test failed with Jasmine when try to navigate to a specific routeAngular 5 - 尝试导航到特定路线时，Jasmine 的路由测试失败
【发布时间】：2018-01-30 10:17:34
【问题描述】：

我使用 Angular 5，我正在使用 Jasmine & Karma 测试 Angular 服务。我有一个身份验证服务，其功能包括可以重定向到登录页面的功能。如果用户未通过身份验证，我会调用它。

我尝试了这个功能，它做一个简单的“router.navigate['login']”，但我有以下错误：

Chrome 62.0.3202 (Linux 0.0.0) AuthenticationService should redirect to login page FAILED
        Expected '' to be '/login'.
            at Object.<anonymous> home/user/Git/astre-fo/src/app/services/authentification.service.spec.ts:171:29)
            at Object.<anonymous> home/user/Git/astre-fo/node_modules/@angular/core/esm5/testing.js:411:1)
            at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke home/user/Git/astre-fo/node_modules/zone.js/dist/zone.js:388:1)
            at ProxyZoneSpec.webpackJsonp.../../../../zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke home/user/Git/astre-fo/node_modules/zone.js/dist/proxy.js:79:1)
Chrome 62.0.3202 (Linux 0.0.0): Executed 17 of 17 (1 FAILED) (0 secs / 1.922 secs)
Chrome 62.0.3202 (Linux 0.0.0) AuthenticationService should redirect to login page FAILED
        Expected '' to be '/login'.
            at Object.<anonymous> home/user/Git/astre-fo/src/app/services/authentification.service.spec.ts:171:29)
            at Object.<anonymous> home/user/Git/astre-fo/node_modules/@angular/core/esm5/testing.js:411:1)
            at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke home/user/Git/astre-fo/node_modules/zone.js/dist/zone.js:388:1)
Chrome 62.0.3202 (Linux 0.0.0): Executed 17 of 17 (1 FAILED) (2.031 secs / 1.922 secs)

authentication.service.spec.ts ：

import {AuthenticationService} from './authentification.service';
import {async, fakeAsync, TestBed, tick} from '@angular/core/testing';
import {UserService} from './user.service';
import {RouterTestingModule} from '@angular/router/testing';
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
import {Router} from '@angular/router';
import {Location} from '@angular/common';
import {routes} from '../app.routes';
import {AppModule} from '../app.module';
import {AppComponent} from '../app.component';

describe('AuthenticationService', () => {

  let service: AuthenticationService;
  let httpMock: HttpTestingController;

  let location: Location;
  let router: Router;
  let fixture;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        AppModule,
        HttpClientTestingModule,
        RouterTestingModule.withRoutes(routes)
      ],
      providers: [
        AuthenticationService,
        UserService
      ],
    });

    service = TestBed.get(AuthenticationService);
    httpMock = TestBed.get(HttpTestingController);

    router = TestBed.get(Router);
    location = TestBed.get(Location);

    fixture = TestBed.createComponent(AppComponent);
    router.initialNavigation();
  });

  it('should redirect to login page', fakeAsync(() => {

    service.redirectToLogin();

    tick(50);
    fixture.detectChanges();

    expect(location.path()).toBe('/login');
  }));

});

authentication.service.ts ：

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {UserService} from './user.service';
import {Router} from '@angular/router';
import {Location} from '@angular/common';

@Injectable()
export class AuthenticationService {

  constructor(
    private httpClient: HttpClient,
    public userService: UserService,
    private router: Router,
    private location: Location
  ) { }

  public redirectToLogin() {
    this.router.navigate(['login']);
  }
}

app.routes.ts ：

import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { AuthGuardService } from './services/auth-guard.service';
import { SearchComponent } from './search/search.component';

export const routes: Routes = [
    { path: '', redirectTo: 'search', pathMatch: 'full'},
    { path: 'login', component: LoginComponent },
    { path: 'search', component: SearchComponent, canActivate: [AuthGuardService] }
];

export const routing = RouterModule.forRoot(routes);

有人有想法吗？

【问题讨论】：

标签： angular unit-testing routing jasmine angular5

【解决方案1】：

this.router.navigate(['/login']);

通过/它会起作用

【讨论】：

【解决方案2】：

我找到了解决方案：使用承诺！

  it('should redirect to login page', fakeAsync(() => {

    service.redirectToLogin().then(() => {
      expect(location.path()).toBe('/login');
    });
  }));

如果有人有更好的解决方案，或者我的解决方案不是正确的，请告诉我:)

【讨论】：