I have two modules AppModule and SharedDataModule and their routes are registered in corresponding modules using lazy loading.
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 { }
Using routing I will be navigating to SharedDataComponent after clicking on some button in app-component. Everything is working as expected when I work with UI and trying to cover these using jasmine test cases.
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');
});
});
The above test case is failing and not routing to the expected URL, Please suggest what I am missing here for this test case to pass.
Error encountered in debug console of jasmine test cases
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)
CodePudding user response:
You need to use RouterTestingModule.withRoutes
and provide the routes.
Try this to get rid of the error:
// !! 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');
});
});