在angular中测试时从父节点注册子路由

Question

我有两个模块AppModule和SharedDataModule，它们的路由在相应的模块中使用延迟加载注册。

app-routing-module

const routes: Routes = [
{
path: "", component: AppComponent, pathMatch: 'full'
},
{
path: 'records',
loadChildren: () => import('./shared-data/shared-data.module').then(modules => modules.SharedDataModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true})],
exports: [RouterModule]
})
export class AppRoutingModule { }

shared-data-routing-module.ts

const routes: Routes = [
{path: '', children: [{
path: 'shared-data', component: SharedDataComponent }]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class SharedDataRoutingModule { }

使用路由，我将导航到shareddataccomponent后，点击一些按钮在应用组件。当我使用UI并尝试使用jasmine测试用例来覆盖这些时，一切都如预期的那样工作。

app-component-spec.ts

describe('AppComponent', () => {
let fixture: ComponentFixture<AppComponent>;
let component: AppComponent;
let sharedService: SharedService;
let router: Router;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [
RouterTestingModule,
SharedDataModule,
SharedDataRoutingModule
],
declarations: [
AppComponent,
SharedDataComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}).compileComponents();
fixture = TestBed.createComponent(AppComponent);
router = TestBed.inject(Router);
component = fixture.componentInstance;
fixture.autoDetectChanges();
fixture.detectChanges();
});

it('on click on any nav element showscreen should call and page should navigate to corresponding route', () => {
expect(router.url).toEqual('/');
fixture.debugElement.nativeElement.querySelectorAll('element')[1].click();
expect(router.url).toEqual('/records/shared-data');
});
});

上面的测试用例失败，没有路由到预期的URL，请建议我在这里错过了这个测试用例的通过。

茉莉测试用例调试控制台出现错误

Uncaught Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'records/shared-data'
Error: Cannot match any routes. URL Segment: 'records/shared-data'
at ApplyRedirects.noMatchError (:9876/_karma_webpack_/webpack:/node_modules/@angular/router/__ivy_ngcc__/fesm2015/router.js:2628:1)
at CatchSubscriber.selector (:9876/_karma_webpack_/webpack:/node_modules/@angular/router/__ivy_ngcc__/fesm2015/router.js:2610:1)
at CatchSubscriber.error (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/operators/catchError.js:27:1)
at MapSubscriber._error (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:75:1)
at MapSubscriber.error (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:55:1)
at MapSubscriber._error (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:75:1)
at MapSubscriber.error (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:55:1)
at ThrowIfEmptySubscriber._error (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:75:1)
at ThrowIfEmptySubscriber.error (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:55:1)
at TakeLastSubscriber._error (:9876/_karma_webpack_/webpack:/node_modules/rxjs/_esm2015/internal/Subscriber.js:75:1)
at resolvePromise (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:1211:1)
at resolvePromise (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:1165:1)
at :9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:1278:1
at _ZoneDelegate.invokeTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:406:1)
at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvokeTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:334:1)
at _ZoneDelegate.invokeTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:405:1)
at Object.onInvokeTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:284:1)
at _ZoneDelegate.invokeTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:405:1)
at Object.onInvokeTask (:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:28578:1)
at _ZoneDelegate.invokeTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:405:1)
at ____________________Elapsed_2_ms__At__Thu_May_26_2022_19_44_12_GMT_0530__India_Standard_Time_ ()
at Object.onScheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:120:1)
at _ZoneDelegate.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:386:1)
at Object.onScheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:283:1)
at _ZoneDelegate.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:386:1)
at Zone.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:221:1)
at Zone.scheduleMicroTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:241:1)
at scheduleResolveOrReject (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:1265:1)
at resolvePromise (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:1202:1)
at ____________________Elapsed_2_ms__At__Thu_May_26_2022_19_44_12_GMT_0530__India_Standard_Time_ ()
at Object.onScheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:120:1)
at _ZoneDelegate.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:386:1)
at Object.onScheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:283:1)
at _ZoneDelegate.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:386:1)
at Zone.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:221:1)
at Zone.scheduleMicroTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:241:1)
at scheduleResolveOrReject (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:1265:1)
at ZoneAwarePromise.then (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:1450:1)
at ____________________Elapsed_1_ms__At__Thu_May_26_2022_19_44_12_GMT_0530__India_Standard_Time_ ()
at Object.onScheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:120:1)
at _ZoneDelegate.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:386:1)
at Object.onScheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:283:1)
at _ZoneDelegate.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:386:1)
at Zone.scheduleTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:221:1)
at Zone.scheduleEventTask (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:247:1)
at HTMLElement.addEventListener (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:1951:1)
at DomEventsPlugin.addEventListener (:9876/_karma_webpack_/webpack:/node_modules/@angular/platform-browser/__ivy_ngcc__/fesm2015/platform-browser.js:860:1)

Answer 1

您需要使用RouterTestingModule.withRoutes并提供路由

试着消除这个错误:

// !! add a dummy component for the route
@Component({
selector: 'dummy',
template: '<h1>Hello</h1>',
})
class DummyComponent {}
describe('AppComponent', () => {
let fixture: ComponentFixture<AppComponent>;
let component: AppComponent;
let sharedService: SharedService;
let router: Router;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [
// !! add routes here
RouterTestingModule.withRoutes([{
path: 'records',
children: [{
path: 'shared-data',
component: DummyComponent
}]
}]),
SharedDataModule,
SharedDataRoutingModule
],
declarations: [
AppComponent,
SharedDataComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}).compileComponents();
fixture = TestBed.createComponent(AppComponent);
router = TestBed.inject(Router);
component = fixture.componentInstance;
fixture.autoDetectChanges();
fixture.detectChanges();
});

it('on click on any nav element showscreen should call and page should navigate to corresponding route', () => {
expect(router.url).toEqual('/');
fixture.debugElement.nativeElement.querySelectorAll('element')[1].click();
expect(router.url).toEqual('/records/shared-data');
});
});