要编写Angular 7的路由测试,可以按照以下步骤进行:
src/app
目录下创建一个名为app-routing.module.ts
的文件,用于定义应用的路由。import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
src/app
目录下创建两个组件文件home.component.ts
和about.component.ts
。home.component.ts
:
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
template: 'Home Component
'
})
export class HomeComponent { }
about.component.ts
:
import { Component } from '@angular/core';
@Component({
selector: 'app-about',
template: 'About Component
'
})
export class AboutComponent { }
src/app
目录下创建一个名为app-routing.module.spec.ts
的文件,用于编写路由测试。import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
describe('AppRoutingModule', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule.withRoutes([]),
],
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
}).compileComponents();
}));
it('should navigate to home', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
const navigateSpy = spyOn(fixture.debugElement.injector.get(Router), 'navigate');
app.goToHome();
expect(navigateSpy).toHaveBeenCalledWith(['/']);
});
it('should navigate to about', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
const navigateSpy = spyOn(fixture.debugElement.injector.get(Router), 'navigate');
app.goToAbout();
expect(navigateSpy).toHaveBeenCalledWith(['/about']);
});
});
ng test
命令来执行测试。以上代码示例是一个简单的路由测试,其中AppComponent
是应用的根组件,goToHome
和goToAbout
是在根组件中定义的导航方法。在测试中,我们首先创建了一个测试模块,然后通过createComponent
方法创建了根组件的实例,最后使用spyOn
方法来监视路由导航方法的调用。通过expect
断言来验证是否正确导航到了指定的路径。
下一篇:Angular 7编译突然失败