加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular:单元测试路由:预期”为’/ route’

发布时间:2020-12-17 17:47:05 所属栏目:安全 来源:网络整理
导读:我正在使用我的Angular应用程序进行单元测试, 我的路由在特定模块中被删除,该模块是在app.module.ts下导入的, 这是我的路由模块: APP-routing.module.ts import { NgModule } from '@angular/core';import { RouterModule,Routes } from '@angular/router';
我正在使用我的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:
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,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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读