feat(routing): add routing tests

Author: juristr

src/app/routing/app-routing.module-custom.spec.ts

@@ -0,0 +1,63 @@
+import { Location } from '@angular/common';
+import {
+  TestBed,
+  fakeAsync,
+  tick,
+  async,
+  ComponentFixture
+} from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Router } from '@angular/router';
+import { AppRoutingModule, appRoutes } from './app-routing.module';
+import { AppModule } from './app.module';
+import { Component } from '@angular/core';
+import { HomeComponent } from './home/home.component';
+import { SearchComponent } from './search/search.component';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  selector: 'routing-test-cmp',
+  template: `<router-outlet></router-outlet>`
+})
+class RoutingTestComponent {}
+
+describe('The App Routing (with custom cmp)', () => {
+  let routingComponentFixture: ComponentFixture<RoutingTestComponent>;
+  let routingComponent: RoutingTestComponent;
+  let router: Router;
+  let location: Location;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [RouterTestingModule.withRoutes(appRoutes)],
+      declarations: [HomeComponent, SearchComponent, RoutingTestComponent]
+    });
+
+    routingComponentFixture = TestBed.createComponent(RoutingTestComponent);
+    routingComponent = routingComponentFixture.componentInstance;
+
+    router = TestBed.get(Router) as Router;
+    location = TestBed.get(Location) as Location;
+  });
+
+  it(
+    'should properly navigate back from search to home again',
+    fakeAsync(() => {
+      router.navigate(['']);
+      tick();
+
+      router.navigate(['/search']);
+      tick();
+
+      const searchCmpEl = routingComponentFixture.debugElement.query(
+        By.css('app-search')
+      );
+      expect(searchCmpEl).not.toBeNull();
+      const searchCmp = searchCmpEl.componentInstance as SearchComponent;
+
+      searchCmp.onGoBack();
+      tick();
+      expect(location.path()).toBe('/home');
+    })
+  );
+});

src/app/routing/app-routing.module.spec.ts

@@ -0,0 +1,38 @@
+import { Location } from '@angular/common';
+import { TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { appRoutes } from './app-routing.module';
+import { AppModule } from './app.module';
+
+describe('The App Routing', () => {
+  let router: Router;
+  let location: Location;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppModule, RouterTestingModule.withRoutes(appRoutes)]
+    });
+
+    router = TestBed.get(Router) as Router;
+    location = TestBed.get(Location) as Location;
+  });
+
+  it(
+    'automatically redirects to home when the app starts',
+    fakeAsync(() => {
+      router.navigate(['']);
+      tick();
+      expect(location.path()).toBe('/home');
+    })
+  );
+
+  it(
+    'automatically redirects to search when invoking /search',
+    fakeAsync(() => {
+      router.navigate(['/search']);
+      tick();
+      expect(location.path()).toBe('/search');
+    })
+  );
+});

src/app/routing/app-routing.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './home/home.component';
+import { SearchComponent } from './search/search.component';
+
+export const appRoutes: Routes = [
+  {
+    path: '',
+    redirectTo: 'home',
+    pathMatch: 'full'
+  },
+  {
+    path: 'home',
+    component: HomeComponent
+  },
+  {
+    path: 'search',
+    component: SearchComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(appRoutes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}

src/app/routing/app.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `<router-outlet></router-outlet>`
+})
+export class RoutingAppComponent {}

src/app/routing/app.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { AppRoutingModule } from './app-routing.module';
+import { RoutingAppComponent } from './app.component';
+import { HomeModule } from './home/home.module';
+import { SearchModule } from './search/search.module';
+
+@NgModule({
+  declarations: [RoutingAppComponent],
+  imports: [HomeModule, SearchModule, AppRoutingModule]
+})
+export class AppModule {}

src/app/routing/home/home-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomeRoutingModule { }

src/app/routing/home/home.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  template: `home component`
+})
+export class HomeComponent {}

src/app/routing/home/home.module.ts

@@ -0,0 +1,7 @@
+import { NgModule } from '@angular/core';
+import { HomeComponent } from './home.component';
+
+@NgModule({
+  declarations: [HomeComponent]
+})
+export class HomeModule {}

src/app/routing/search/search.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-search',
+  template: `
+    search component
+
+    <button (click)="onGoBack()">Go back</button>
+  `
+})
+export class SearchComponent {
+  constructor(private location: Location) {}
+
+  onGoBack() {
+    this.location.back();
+  }
+}

src/app/routing/search/search.module.ts

@@ -0,0 +1,7 @@
+import { NgModule } from '@angular/core';
+import { SearchComponent } from './search.component';
+
+@NgModule({
+  declarations: [SearchComponent]
+})
+export class SearchModule {}