angular router handler

Author: FDIM

README.md

@@ -19,6 +19,9 @@ Basic input/output example:
 
 ![Basic](./assets/component-example.png)
 
+With angular router use (built in):
+![Angular router](./assets/component-example-with-angular-router.png)
+
 With custom event bus service dependency handler:
 
 ![With custom event service dependency handler](./assets/component-example-2.png)

assets/component-example-with-angular-router.png

@@ -1,17 +1,36 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HomePageComponent } from './home-page.component';
-import { Router, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router, RouterEvent } from '@angular/router';
+import { Observable, ReplaySubject } from 'rxjs';
 
 describe('HomePageComponent', () => {
   let component: HomePageComponent;
   let fixture: ComponentFixture<HomePageComponent>;
   let fakeRouter: jasmine.SpyObj<Router>;
+  let routerEventsSubject: ReplaySubject<RouterEvent>;
   let fakeRoute: jasmine.SpyObj<ActivatedRoute>;
+  let routeParams: { [prop: string]: string };
+  let routeParamMap: jasmine.SpyObj<ParamMap>;
+  let routeParamsSubject: ReplaySubject<ParamMap>;
+  let queryRouteParams: { [prop: string]: string };
+  let routeQueryParamMap: jasmine.SpyObj<ParamMap>;
+  let queryRouteParamsSubject: ReplaySubject<ParamMap>;
   let fakeWindow: jasmine.SpyObj<Window>;
 
   beforeEach(waitForAsync(() => {
     fakeRouter = jasmine.createSpyObj<Router>('Router', ['navigate']);
+    routerEventsSubject = new ReplaySubject<RouterEvent>(1);
     fakeRoute = {} as jasmine.SpyObj<ActivatedRoute>;
+    routeParams = {};
+    routeParamMap = jasmine.createSpyObj<ParamMap>('ParamMap', ['get', 'has']);
+    routeParamMap.get.and.callFake((k) => routeParams[k]);
+    routeParamMap.has.and.callFake((k) => !!routeParams[k]);
+    routeParamsSubject = (fakeRoute as { paramMap: Observable<ParamMap> }).paramMap = new ReplaySubject<ParamMap>(1);
+    queryRouteParams = {};
+    routeQueryParamMap = jasmine.createSpyObj<ParamMap>('ParamMap', ['get', 'has']);
+    routeQueryParamMap.get.and.callFake((k) => queryRouteParams[k]);
+    routeQueryParamMap.has.and.callFake((k) => !!queryRouteParams[k]);
+    queryRouteParamsSubject = (fakeRoute as { queryParamMap: Observable<ParamMap> }).queryParamMap = new ReplaySubject<ParamMap>(1);
     fakeWindow = {} as jasmine.SpyObj<Window>;
 
     TestBed.configureTestingModule({

spec/fixtures/components/home-page/home-page.component.spec.expected.ts

@@ -1,5 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router, ActivatedRoute, NavigationStart } from '@angular/router';
+import { take, filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-name',
@@ -14,10 +15,28 @@ export class HomePageComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
+    const value = this.route.snapshot.queryParams['value'];
+    console.info(value);
+
     this.route.paramMap.subscribe(params => {
       if (params.has('type') && params.get('type') === 'user') {
         this.router.navigate(['home', 'user']);
       }
     });
+
+    this.route.queryParamMap.subscribe(params => {
+      if (params.has('type') && params.get('type') === 'user') {
+        this.router.navigate(['home', 'user']);
+      }
+    });
+
+    this.router.events
+      .pipe(
+        take(1),
+        filter(ev => ev instanceof NavigationStart)
+      )
+      .subscribe(()=>{
+        console.info('nav start event')
+      });
   }
 }

spec/fixtures/components/home-page/home-page.component.ts

@@ -0,0 +1,103 @@
+
+import { DependencyHandler } from '../model';
+import defaultDependencyHandler from './default.handler';
+
+export default {
+  run(result, dep, options) {
+    defaultDependencyHandler.run(result, dep, options);
+
+    // extra subject to support router events if property is used
+    if (dep.type === 'Router' && options.sourceCode.includes(`${dep.name}.events`)) {
+      result.imports.push({
+        path: 'rxjs',
+        names: ['ReplaySubject']
+      });
+      result.imports.push({
+        path: '@angular/router',
+        names: ['RouterEvent']
+      });
+
+      result.declarations.push({
+        name: 'routerEventsSubject',
+        type: 'ReplaySubject<RouterEvent>'
+      });
+
+      result.initializers.push({
+        name: 'routerEventsSubject',
+        value: 'new ReplaySubject<RouterEvent>(1)'
+      });
+    }
+
+    if (dep.type === 'ActivatedRoute') {
+      const usesParamMap = options.sourceCode.includes(`${dep.name}.paramMap`);
+      const usesQueryParamMap = options.sourceCode.includes(`${dep.name}.queryParamMap`);
+
+      // param map mock
+      if (usesParamMap || usesQueryParamMap) {
+        result.imports.push({
+          path: '@angular/router',
+          names: ['ParamMap']
+        });
+
+        result.imports.push({
+          path: 'rxjs',
+          names: ['Observable']
+        });
+      }
+      const variants: [apiName: string, varName: string, mapName: string][] = [];
+      if (usesParamMap) {
+        variants.push(['paramMap', 'routeParams', 'routeParamMap']);
+      }
+      if (usesQueryParamMap) {
+        variants.push(['queryParamMap', 'queryRouteParams', 'routeQueryParamMap']);
+      }
+
+      variants.forEach(([apiName, varName, mapName]) => {
+        result.declarations.push({
+          name: varName,
+          type: '{ [prop: string]: string }'
+        });
+
+        result.initializers.push({
+          name: varName,
+          value: '{}'
+        });
+
+        result.declarations.push({
+          name: `${mapName}`,
+          type: 'jasmine.SpyObj<ParamMap>'
+        });
+
+        result.initializers.push({
+          name: `${mapName}`,
+          value: `jasmine.createSpyObj<ParamMap>(${options.quoteSymbol}ParamMap${options.quoteSymbol}, [${options.quoteSymbol}get${options.quoteSymbol}, ${options.quoteSymbol}has${options.quoteSymbol}])`
+        });
+
+        result.initializers.push({
+          value: `${mapName}.get.and.callFake((k) => ${varName}[k])`
+        });
+
+        result.initializers.push({
+          value: `${mapName}.has.and.callFake((k) => !!${varName}[k])`
+        });
+
+        result.declarations.push({
+          name: `${varName}Subject`,
+          type: 'ReplaySubject<ParamMap>'
+        });
+
+        result.initializers.push({
+          // cast below makes sure that typescript is checking asignment
+          // this is basically a workaround for readonly properties
+          name: `${varName}Subject`,
+          value: `(${options.variableName} as { ${apiName}: Observable<ParamMap> }).${apiName} = new ReplaySubject<ParamMap>(1)`
+        });
+      });
+
+    }
+  },
+
+  test(dep) {
+    return dep.type === 'Router' || dep.type === 'ActivatedRoute';
+  }
+} as DependencyHandler;

src/dependency-handlers/angular.router.handler.ts

@@ -1,8 +1,11 @@
-import handler from './default.handler';
 import { DependencyHandler } from '../model';
+import _defaultDependencyHandler from './default.handler';
+import _angularRouterHandler from './angular.router.handler';
 
-export const defaultDependencyHandler: typeof handler = handler;
+export const defaultDependencyHandler: DependencyHandler = _defaultDependencyHandler;
+export const angularRouterHandler: DependencyHandler = _angularRouterHandler;
 
 export const dependencyHandlers: DependencyHandler[] = [
-  handler
+  angularRouterHandler,
+  defaultDependencyHandler,
 ];