feat(Router): Import RouterTestingModule when stubs are enabled (#488)

docs/docs/testing-with-routing.md

@@ -120,5 +120,5 @@ The `createRoutesFactory` function can take the following options, on top of the
 * `children`: the value for `children` for the `ActivatedRoute` stub
 * `firstChild`: the value for `firstChild` for the `ActivatedRoute` stub
 * `fragment`: initial fragment to use in `ActivatedRoute` stub
-* `stubsEnabled` (default: `true`): enables the `ActivatedRoute` stub, if set to `false` it uses `RouterTestingModule` instead
+* `stubsEnabled` (default: `true`): enables the `ActivatedRoute` stub
 * `routes`: if `stubsEnabled` is set to false, you can pass a `Routes` configuration for `RouterTestingModule`

projects/spectator/jest/test/with-routing/my-page.component.spec.ts

@@ -83,19 +83,6 @@ describe('MyPageComponent', () => {
     });
   });
 
-  describe('routerLinks', () => {
-    const createComponent = createRoutingFactory(MyPageComponent);
-
-    it('should mock routerLinks', () => {
-      const spectator = createComponent();
-
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-      const link1 = spectator.query('.link-1', { read: RouterLink })!;
-
-      expect(link1.routerLink).toEqual(['/foo']);
-    });
-  });
-
   describe('default router mocking', () => {
     const createComponent = createRoutingFactory({
       component: MyPageComponent,

projects/spectator/src/lib/spectator-routing/initial-module.ts

@@ -7,7 +7,6 @@ import { initialSpectatorModule } from '../spectator/initial-module';
 
 import { ActivatedRouteStub } from './activated-route-stub';
 import { SpectatorRoutingOptions } from './options';
-import { RouterLinkDirectiveStub } from './router-link-stub';
 import { RouterStub } from './router-stub';
 
 /**
@@ -16,21 +15,21 @@ import { RouterStub } from './router-stub';
 export function initialRoutingModule<S>(options: Required<SpectatorRoutingOptions<S>>): ModuleMetadata {
   const moduleMetadata = initialSpectatorModule(options);
 
-  if (options.mockRouterLinks && options.stubsEnabled) {
-    moduleMetadata.declarations.push(RouterLinkDirectiveStub);
-  }
-
   if (options.stubsEnabled) {
+    moduleMetadata.imports.push(RouterTestingModule);
     moduleMetadata.providers.push(
       options.mockProvider(RouterStub, {
         events: new Subject<Event>(),
         emitRouterEvent(event: Event): void {
           this.events.next(event);
-        }
+        },
+        serializeUrl(): string {
+          return '/';
+        },
       }),
       {
         provide: Router,
-        useExisting: RouterStub
+        useExisting: RouterStub,
       }
     );
 
@@ -40,12 +39,12 @@ export function initialRoutingModule<S>(options: Required<SpectatorRoutingOption
         useValue: new ActivatedRouteStub({
           params: options.params,
           queryParams: options.queryParams,
-          data: options.data
-        })
+          data: options.data,
+        }),
       },
       {
         provide: ActivatedRoute,
-        useExisting: ActivatedRouteStub
+        useExisting: ActivatedRouteStub,
       }
     );
   } else {

projects/spectator/src/lib/spectator-routing/options.ts

@@ -8,7 +8,6 @@ import { RouteOptions } from './route-options';
 
 export type SpectatorRoutingOptions<C> = SpectatorOptions<C> &
   RouteOptions & {
-    mockRouterLinks?: boolean;
     stubsEnabled?: boolean;
     routes?: Routes;
   };
@@ -19,14 +18,13 @@ const defaultRoutingOptions: OptionalsRequired<SpectatorRoutingOptions<any>> = {
   queryParams: {},
   data: {},
   fragment: null,
-  mockRouterLinks: true,
   stubsEnabled: true,
   routes: [],
   url: [],
   root: null,
   parent: null,
   children: null,
-  firstChild: null
+  firstChild: null,
 };
 
 /**

projects/spectator/src/lib/spectator-routing/router-stub.ts

@@ -2,6 +2,7 @@ import { Router, Event } from '@angular/router';
 
 export abstract class RouterStub extends Router {
   public abstract emitRouterEvent(event: Event): void;
+  public abstract serializeUrl(): string;
 }
 
 export function isRouterStub(router: Router): router is RouterStub {

projects/spectator/test/with-routing/my-page.component.spec.ts

@@ -95,18 +95,6 @@ describe('MyPageComponent', () => {
     });
   });
 
-  describe('routerLinks', () => {
-    const createComponent = createRoutingFactory(MyPageComponent);
-
-    it('should mock routerLinks', () => {
-      const spectator = createComponent();
-
-      const link1 = spectator.query('.link-1', { read: RouterLink })!;
-
-      expect(link1.routerLink).toEqual(['/foo']);
-    });
-  });
-
   describe('default router mocking', () => {
     const createComponent = createRoutingFactory({
       component: MyPageComponent,

projects/spectator/test/with-routing/my-page.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router, UrlSegment } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { Component, NgModule, OnInit } from '@angular/core';
+import { ActivatedRoute, Router, RouterModule, UrlSegment } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -13,7 +14,21 @@ import { map } from 'rxjs/operators';
     <div class="baz">{{ baz$ | async }}</div>
     <a class="link-1" [routerLink]="['/foo']">Some link</a>
     <a class="link-2" (click)="navigate()">Other link</a>
-  `
+    <a
+      class="link-3"
+      [routerLink]="['/foo']"
+      [queryParams]="{ foo: 'bar' }"
+      queryParamsHandling="merge"
+      fragment="education"
+      [state]="{ tracingId: 123 }"
+      [skipLocationChange]="true"
+      [preserveFragment]="true"
+      [replaceUrl]="true"
+      [relativeTo]="null"
+    >
+      Some link With Extras
+    </a>
+  `,
 })
 export class MyPageComponent implements OnInit {
   public title?: string;
@@ -32,13 +47,13 @@ export class MyPageComponent implements OnInit {
 
   public ngOnInit(): void {
     this.title = this.route.snapshot.data.title;
-    this.route.data.subscribe(data => (this.dynamicTitle = data.dynamicTitle));
+    this.route.data.subscribe((data) => (this.dynamicTitle = data.dynamicTitle));
 
-    this.route.params.subscribe(params => (this.foo = params.foo));
-    this.route.paramMap.subscribe(params => (this.bar = params.get('bar')!));
-    this.baz$ = this.route.queryParams.pipe(map(params => params.baz));
-    this.route.fragment.subscribe(fragment => (this.fragment = fragment));
-    this.route.url.subscribe(url => (this.url = url));
+    this.route.params.subscribe((params) => (this.foo = params.foo));
+    this.route.paramMap.subscribe((params) => (this.bar = params.get('bar')!));
+    this.baz$ = this.route.queryParams.pipe(map((params) => params.baz));
+    this.route.fragment.subscribe((fragment) => (this.fragment = fragment));
+    this.route.url.subscribe((url) => (this.url = url));
     this.root = this.route.root;
     this.parent = this.route.parent;
     this.children = this.route.children;
@@ -49,3 +64,13 @@ export class MyPageComponent implements OnInit {
     this.router.navigate(['bar']);
   }
 }
+
+/*
+  This is an unused module to resolve the errors given by the angular language service:
+    "Can't bind to 'routerLink' since it isn't a known property of 'a'"
+*/
+@NgModule({
+  declarations: [MyPageComponent],
+  imports: [CommonModule, RouterModule],
+})
+export class RouterLinkDirectiveStubModule {}