Currently, I am in the process of testing the routing functionality of my Angular application:
Below is the file where I have declared the routes for my app:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { CustomersListComponent } from './customer/customers-list/customers-list.component';
import { CustomerDetailComponent } from './customer/customer-detail/customer-detail.component';
import { ApplicationParametersComponent } from './superAdministrator/application-parameters/application-parameters.component';
import { InscriptionComponent } from './inscription/inscription.component';
export const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'login/:keyWording', component: LoginComponent },
{ path: 'welcome', component: WelcomeComponent },
{ path: 'customers-list', component: CustomersListComponent },
{ path: 'customer-create', component: CustomerDetailComponent },
{ path: 'customer-detail/:idCustomer', component: CustomerDetailComponent },
{ path: 'application-parameters', component: ApplicationParametersComponent },
{ path: 'inscription', component: InscriptionComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
Furthermore, here is the test file that I have created: app-routing.spec.ts :
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
// DevExtreme Module
import {DxProgressBarModule, DxTemplateModule} from 'devextreme-angular';
// Router Modules
import {RouterTestingModule} from '@angular/router/testing';
// Services and HTTP Module
import { SessionService } from './../shared/service';
import { HttpService } from './../shared/service';
import {HttpModule} from '@angular/http';
// Routs testing
import {Router, RouterModule} from '@angular/router';
import {routes} from './app-routing.module';
import {fakeAsync, tick} from '@angular/core/testing';
import {Location} from '@angular/common';
import {LoginComponent} from './login/login.component';
import {WelcomeComponent} from './welcome/welcome.component';
import {ApplicationParametersComponent} from './superAdministrator/application-parameters/application-parameters.component';
import {InscriptionComponent} from './inscription/inscription.component';
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {AppRoutingModule} from './app-routing.module';
import {CustomerDetailComponent} from './customer/customer-detail/customer-detail.component';
import {CustomersListComponent} from './customer/customers-list/customers-list.component';
describe('Testing the application routes', () => {
let location: Location;
let router: Router;
let fixture;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ RouterTestingModule.withRoutes(routes)
, FormsModule , DxTemplateModule , HttpModule ],
providers: [SessionService , HttpService ],
declarations: [
AppComponent,
LoginComponent,
WelcomeComponent,
ApplicationParametersComponent,
InscriptionComponent,
CustomersListComponent,
CustomerDetailComponent
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
});
router = TestBed.get(Router);
location = TestBed.get(Location);
fixture = TestBed.createComponent(AppComponent);
router.initialNavigation();
});
it('When navigating to a route without specifying one, it should redirect to /login.', () => {
router.navigate(['']).then(() => {
expect(location.path()).toBe('/login');
});
});
The issue arises when trying to add another test case. For example, adding the following causes interference between routes:
it('Navigating to "inscription" should take you to /inscription', () => {
router.navigate(['/inscription']).then(() => {
expect(location.path()).toBe('/inscription');
});
});
An error occurs as shown below:
Expected '/inscription' to be '/login'.
at webpack:///src/app/app-routing.spec.ts:65:30 <- src/test.ts:144329:37
at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:391:0 <- src/polyfills.ts:1546:26)
at ProxyZoneSpec.Array.concat.ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- src/test.ts:232587:39)
at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:390:0 <- src/polyfills.ts:1545:32)
In order to resolve this issue, using the afterEach() loop might help, but the exact implementation is not clear to me.