角度单元路由测试:单独的路由测试序列

Question

我必须测试我的 Angular 应用程序路由：

这是我的路线声明文件：

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';
export 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-routing.spec.ts ：

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 {routes} from './app-routing.module';
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';
import {AppRoutingModule} from './app-routing.module';
import {CustomerDetailComponent} from './customer/customer-detail/customer-detail.component';
import {CustomersListComponent} from './customer/customers-list/customers-list.component';
describe('Testing the application routes', () => {
let location: Location;
let router: Router;
let fixture;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ RouterTestingModule.withRoutes(routes)
, FormsModule , DxTemplateModule , HttpModule ],
providers: [SessionService , HttpService ],
declarations: [
AppComponent,
LoginComponent,
WelcomeComponent,
ApplicationParametersComponent,
InscriptionComponent,
CustomersListComponent,
CustomerDetailComponent
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
});
router = TestBed.get(Router);
location = TestBed.get(Location);
fixture = TestBed.createComponent(AppComponent);
router.initialNavigation();
});
it('navigate to nothing  takes you to /login', () => {
router.navigate(['']).then(() => {
expect(location.path()).toBe('/login');
});
});

问题是当我执行这个时，它工作正常，因为它只在e 测试用例上包含。

问题是当我添加第二个时，例如我添加这个：

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

我收到一个错误，显示路由之间存在干扰：

Expected '/inscription' to be '/login'.
at webpack:///src/app/app-routing.spec.ts:65:30 <- src/test.ts:144329:37
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:232587:39)
at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:390:0 <- src/polyfills.ts:1545:32)

我认为我应该使用afterEach((循环来修复它，但我不知道该怎么做

Answer 1

我通过添加一个简单的

：

tick(50)

倒查克测试用例。

这里是测试用例的结构：

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