angular router handler

Author: FDIM

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

@@ -1,17 +1,20 @@
 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 { ReplaySubject } from 'rxjs';
 
 describe('HomePageComponent', () => {
   let component: HomePageComponent;
   let fixture: ComponentFixture<HomePageComponent>;
   let fakeRouter: jasmine.SpyObj<Router>;
+  let routerEvents: ReplaySubject<RouterEvent>;
   let fakeRoute: jasmine.SpyObj<ActivatedRoute>;
   let fakeWindow: jasmine.SpyObj<Window>;
 
   beforeEach(waitForAsync(() => {
     fakeRouter = jasmine.createSpyObj<Router>('Router', ['navigate']);
     fakeRoute = {} as jasmine.SpyObj<ActivatedRoute>;
+    routerEvents = new ReplaySubject<RouterEvent>(1);
     fakeWindow = {} as jasmine.SpyObj<Window>;
 
     TestBed.configureTestingModule({

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

@@ -0,0 +1,45 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { HomePageComponent } from './home-page.component';
+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>;
+
+  beforeEach(async(() => {
+    fakeRouter = jasmine.createSpyObj<Router>('Router', ['navigate']);
+    routerEventsSubject = new ReplaySubject<RouterEvent>(1);
+    fakeRoute = jasmine.createSpyObj<ActivatedRoute>('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);
+
+    TestBed.configureTestingModule({
+      declarations: [HomePageComponent],
+      providers: [
+        { provide: Router, useFactory: () => fakeRouter },
+        { provide: ActivatedRoute, useFactory: () => fakeRoute },
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomePageComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+});

spec/fixtures/components/home-page/home-page.component.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,22 @@ 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.router.events
+      .pipe(
+        take(1),
+        filter(ev => ev instanceof NavigationStart)
+      )
+      .subscribe(()=>{
+        console.info('nav start event')
+      });
   }
 }

spec/integration.spec.ts

@@ -1,7 +1,7 @@
 import { run } from '../src/main';
 import { unlinkSync, readFileSync } from 'fs';
 
-const leaveSpecFilesOnDisk = false;
+const leaveSpecFilesOnDisk = true;
 
 describe('integration', () => {
 
@@ -15,7 +15,7 @@ describe('integration', () => {
 
   });
 
-  describe(`home component test`, () => {
+  fdescribe(`home component test`, () => {
 
     createSpec({
       file: 'spec/fixtures/components/home-page/home-page.component.ts',

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

@@ -0,0 +1,90 @@
+
+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') {
+      // param map mock
+      if (options.sourceCode.includes(`${dep.name}.paramMap`)) {
+        result.imports.push({
+          path: '@angular/router',
+          names: ['ParamMap']
+        });
+
+        result.imports.push({
+          path: 'rxjs',
+          names: ['Observable']
+        });
+
+        
+        result.declarations.push({
+          name: 'routeParams',
+          type: '{ [prop: string]: string }'
+        });
+
+        result.initializers.push({
+          name: 'routeParams',
+          value: '{}'
+        });
+
+        result.declarations.push({
+          name: 'routeParamMap',
+          type: 'jasmine.SpyObj<ParamMap>'
+        });
+
+        result.initializers.push({
+          name: 'routeParamMap',
+          value: `jasmine.createSpyObj<ParamMap>(${options.quoteSymbol}ParamMap${options.quoteSymbol}, [${options.quoteSymbol}get${options.quoteSymbol}, ${options.quoteSymbol}has${options.quoteSymbol}])`
+        });
+        result.initializers.push({
+          value: 'routeParamMap.get.and.callFake((k) => routeParams[k])'
+        });
+
+        result.initializers.push({
+          value: 'routeParamMap.has.and.callFake((k) => !!routeParams[k])'
+        });
+
+        result.declarations.push({
+          name: 'routeParamsSubject',
+          type: 'ReplaySubject<ParamMap>'
+        });
+
+        result.initializers.push({
+          // cast below makes sure that typescript is checking asignment
+          // this is basically a workaround for readonly properties
+          name: 'routeParamsSubject',
+          value: `(${options.variableName} as { paramMap: Observable<ParamMap> }).paramMap = new ReplaySubject<ParamMap>(1)`
+        });
+      }
+    }
+  },
+
+  test(dep) {
+    return dep.type === 'Router' || dep.type === 'ActivatedRoute';
+  }
+} as DependencyHandler;

src/dependency-handlers/index.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,
 ];