A sample app for Angular route testing.
This project was generated with Angular CLI version 1.1.3.
-
Generate app with routing included.
ng new angular-route-testing --routing
-
Generate components and modules with routing included.
ng g c dashboard -r ng g m feature -r ng g c feature -m
-
Configure app and feature routing modules.
// app-routing.module.ts const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'dashboard' }, { path: 'dashboard', component: DashboardComponent }, { path: 'feature', component: FeatureComponent } ];
// feature-routing.module.ts const routes: Routes = [ { path: 'feature', component: FeatureComponent } ];
-
Add router links to app component template
<div> <a [routerLink]="['/feature']">Feature</a> <br/> <a [routerLink]="['']">Home</a> </div>
-
Create an app routing spec and configure router testing module.
// app-routing.module.spec.ts describe('Router: App', () => { let location: Location; let router: Router; let fixture: any; beforeEach(() => { TestBed.configureTestingModule({ imports: [ FeatureModule, RouterTestingModule.withRoutes(routes) ], declarations: [ AppComponent, DashboardComponent ] }).compileComponents(); router = TestBed.get(Router); location = TestBed.get(Location); }); });
-
Add a test for
fakeAsync
.it('fakeAsync works', fakeAsync(() => { const promise = new Promise(resolve => { setTimeout(resolve, 10); }); let done = false; promise.then(() => done = true); tick(50); expect(done).toBeTruthy(); }));
-
Add a test for redirecting /dashboard to root.
it('navigate to "" redirects you to /dashboard', fakeAsync(() => { const fixture = TestBed.createComponent(DashboardComponent); router.navigateByUrl(''); tick(); fixture.detectChanges(); expect(location.path()).toBe('/dashboard'); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('p').textContent).toContain('dashboard works!'); }));
-
Add a test for navigating to /feature.
it('navigate to "feature" redirects to /feature', fakeAsync(() => { const fixture = TestBed.createComponent(FeatureComponent); router.navigateByUrl('/feature'); tick(); fixture.detectChanges(); expect(location.path()).toBe('/feature'); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('p').textContent).toContain('feature works!'); }));
-
Enable lazy loading of the feature module.
Note: We will need to refactor the tests to pass after enabling lazy module loading.
- Remove
FeatureModule
fromAppModule
. - Change feature path in app routing module to load children.
{ path: 'feature', loadChildren: 'app/feature/feature.module#FeatureModule' }
- Remove 'feature' from path in feature routing module.
{ path: '', component: FeatureComponent }
- Remove