Home > Back-end >  Registering child routes from parent while testing in anguler
Registering child routes from parent while testing in anguler

Time:05-28

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');
  });

});
  • Related