Angular:单元测试路由:预期”为’/ route’
我正在使用我的Angular应用程序进行单元测试,
我的路由在特定模块中被删除,该模块是在app.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',{ path: 'welcome',component: WelcomeComponent },{ path: 'customers-list',component: CustomersListComponent },{ path: 'customer-create',component: CustomerDetailComponent },{ path: 'customer-detail/:idCustomer',{ path: 'application-parameters',component: ApplicationParametersComponent },{ path: 'inscription',component: InscriptionComponent } ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ],exports: [ RouterModule ] }) export class AppRoutingModule {} 这是我的app.module.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 { } 在我的测试文件下,我关注了此博客中的tuto: 我的路由测试测试文件如下: 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,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) 想法? 解决方法
您忘记将路由导入到测试文件中的RouterTestingModule.
您必须将export关键字添加到AppRoutingModule文件中的const路由,然后您可以在测试文件中导入路径(并将它们添加到您的测试配置中). 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,HttpModule ],schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }); router = TestBed.get(Router); location = TestBed.get(Location); fixture = TestBed.createComponent(AppComponent); router.initialNavigation(); }); 如果您没有在路由器测试模块中加载路由,则导航时将无法知道去哪里,因此它将返回原始页面并在控制台中出错. 您所遵循的教程有一种非常奇怪的方法来处理路由,因为tick()用于fakeAsync测试,这是一个真正的异步测试.所以你必须使用Promise< boolean>由router.navigate返回: it('navigate to "inscription" takes you to /inscription',() => { router.navigate(['inscription']).then(() => { expect(location.path()).toBe('/inscription'); }); }); 如你所见,你也可以删除fakeAsync,因为这不是假的,它是一个异步调用. See it on plunkr (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |