角：單元測試路由：預期'是「/路由」

Question

上午在單元測試的工作我的路由下我的角的應用程序，

我的路線這是該應用下的進口特定模塊中delacred。 module.ts，

這裏是我的路由模塊：

APP-routing.module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { LoginComponent } from './login/login.component'; 
import { WelcomeComponent } from './welcome/welcome.component'; 
import { CustomersListComponent } from './customer/customers-list/customers-list.component'; 
import { CustomerDetailComponent } from './customer/customer-detail/customer-detail.component'; 
import { ApplicationParametersComponent } from './superAdministrator/application-parameters/application-parameters.component'; 
import { InscriptionComponent } from './inscription/inscription.component'; 

const routes: Routes = [ 
    { path: '', redirectTo: '/login', pathMatch: 'full' }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'login/:keyWording', component: LoginComponent }, 
    { path: 'welcome', component: WelcomeComponent }, 
    { path: 'customers-list', component: CustomersListComponent }, 
    { path: 'customer-create', component: CustomerDetailComponent }, 
    { path: 'customer-detail/:idCustomer', component: CustomerDetailComponent }, 
    { path: 'application-parameters', component: ApplicationParametersComponent }, 
    { path: 'inscription', component: InscriptionComponent } 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {} 

這裏是我的app.m odule.ts（其中我用來導入路由模塊：

import { NgModule } from '@angular/core'; 

import { AppRoutingModule } from './app-routing.module'; 
import { SharedModule } from './../shared/shared.module'; 
import { LoginComponent } from './login/login.component'; 
import { WelcomeComponent } from './welcome/welcome.component'; 
import { AppComponent } from './app.component'; 
import { CustomerModule } from './customer/customer.module'; 
import { ApplicationParametersComponent } from './superAdministrator/application-parameters/application-parameters.component'; 
import { InscriptionComponent } from './inscription/inscription.component'; 

import { DxProgressBarModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    LoginComponent, 
    WelcomeComponent, 
    ApplicationParametersComponent, 
    InscriptionComponent 
    ], 
    imports: [ 
    AppRoutingModule, /* HERE IS THE ROUTING FILE */ 

    SharedModule, 
    CustomerModule, 
    DxProgressBarModule/*, 
    BrowserAnimationsModule, 
    BrowserModule*/ 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

在我的測試文件，我也跟着從這個博客的政黨成員： https://codecraft.tv/courses/angular/unit-testing/routing/

的路由測試我的測試文件如下：

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { AppComponent } from './app.component'; 
// DevExtreme Module 
import {DxProgressBarModule, DxTemplateModule} from 'devextreme-angular'; 
// Router Modules 
import {RouterTestingModule} from '@angular/router/testing'; 
// Services and HTTP Module 
import { SessionService } from './../shared/service'; 
import { HttpService } from './../shared/service'; 
import {HttpModule} from '@angular/http'; 
// Routs testing 
import {Router, RouterModule} from '@angular/router'; 
import {fakeAsync, tick} from '@angular/core/testing'; 
import {Location} from '@angular/common'; 
import {LoginComponent} from './login/login.component'; 
import {WelcomeComponent} from './welcome/welcome.component'; 
import {ApplicationParametersComponent} from './superAdministrator/application-parameters/application-parameters.component'; 
import {InscriptionComponent} from './inscription/inscription.component'; 
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; 
import {FormsModule} from '@angular/forms'; 


describe('Testing the application routes',() => { 

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

    beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports: [RouterTestingModule, FormsModule , DxTemplateModule , HttpModule ], 
     providers: [SessionService , HttpService ], 
     declarations: [ 
     AppComponent, 
     LoginComponent, 
     WelcomeComponent, 
     ApplicationParametersComponent, 
     InscriptionComponent 
     ], 
     schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 

    }); 

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

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

    it('navigate to "inscription" takes you to /inscription', fakeAsync(() => { 
    router.navigate(['inscription']); 
    tick(); 
    expect(location.path()).toBe('/inscription'); 
    })); 
}); 

我的測試失敗，說明這一點：

Expected '' to be '/inscription'. 
    at Object.<anonymous> (webpack:///src/app/app-routing.spec.ts:52:28 <- src/test.ts:143891:33) 
    at Object.<anonymous> (webpack:///~/@angular/core/@angular/core/testing.es5.js:348:0 <- src/test.ts:34691:26) 
    at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:391:0 <- src/polyfills.ts:1546:26) 
    at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- src/test.ts:232357:39) 

想法??

Answer 1

您忘記了在測試文件中將路由導入RouterTestingModule。

你必須export關鍵字添加到您的const routes在AppRoutingModule文件，那麼你可以import在您的測試文件的路徑（在您的測試配置添加的話）。

import {routes} from '...'; // I don't have the app-routing.module file path. 
... 
... 
... 
beforeEach(() => { 
    TestBed.configureTestingModule({ 
     imports: [RouterTestingModule.withRoutes(routes), <-- I added the routes here. 
       FormsModule , DxTemplateModule , HttpModule 
    ], 
     providers: [SessionService , HttpService ], 
     declarations: [ 
     AppComponent, 
     LoginComponent, 
     WelcomeComponent, 
     ApplicationParametersComponent, 
     InscriptionComponent 
     ], 
     schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 

    }); 

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

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

如果沒有加載路由器測試模塊路由時，將無法知道哪裏去了，當你navigate，所以它會回到原來的頁面，在控制檯的錯誤。

您遵循的教程有一個非常奇怪的方式來處理路由，因爲tick()用於fakeAsync測試，這是一個真正的async之一。所以，你必須使用由router.navigate返回的Promise<boolean>：

it('navigate to "inscription" takes you to /inscription',() => { 
    router.navigate(['inscription']).then(() => { 
     expect(location.path()).toBe('/inscription'); 
    }); 
}); 

正如你看到的，你也可以刪除fakeAsync因爲這不是假的，這是一個async電話。

See it on plunkr