Migrate Angular router link tests to use RouterTestingHarness

change/@ni-nimble-angular-16d68d67-9ecc-41b3-b7aa-cb52dbd66da4.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Angular router link test improvements",
+  "packageName": "@ni/nimble-angular",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/angular-workspace/nimble-angular/src/directives/anchor-button/tests/nimble-anchor-button-router-link-with-href.directive.spec.ts

@@ -1,8 +1,9 @@
 import { Component, ElementRef, Sanitizer, SecurityContext, ViewChild } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { Router } from '@angular/router';
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { provideRouter, Router } from '@angular/router';
 import { CommonModule, Location } from '@angular/common';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterTestingHarness } from '@angular/router/testing';
 import { parameterizeSpec } from '@ni/jasmine-parameterized';
 import { processUpdates } from '../../../testing/async-helpers';
 import { NimbleAnchorButtonModule } from '../nimble-anchor-button.module';
@@ -14,7 +15,6 @@ describe('Nimble anchor button RouterLinkWithHrefDirective', () => {
             <nimble-anchor-button #anchor nimbleRouterLink="page1" [queryParams]="{param1: true}" [state]="{stateProperty: 123}">
                 Anchor text
             </nimble-anchor-button>
-            <router-outlet></router-outlet>
          `
     })
     class TestHostComponent {
@@ -25,49 +25,47 @@ describe('Nimble anchor button RouterLinkWithHrefDirective', () => {
     class BlankComponent { }
 
     let anchorButton: AnchorButton;
-    let fixture: ComponentFixture<TestHostComponent>;
     let testHostComponent: TestHostComponent;
     let router: Router;
     let location: Location;
     let innerAnchor: HTMLAnchorElement;
     let routerNavigateByUrlSpy: jasmine.Spy;
     let anchorClickHandlerSpy: jasmine.Spy;
     let sanitizer: jasmine.SpyObj<Sanitizer>;
+    let harness: RouterTestingHarness;
 
-    beforeEach(() => {
+    beforeEach(async () => {
         sanitizer = jasmine.createSpyObj<Sanitizer>('Sanitizer', ['sanitize']);
         sanitizer.sanitize.and.callFake((_, value: string) => value);
 
         TestBed.configureTestingModule({
             declarations: [TestHostComponent, BlankComponent],
-            imports: [NimbleAnchorButtonModule,
+            imports: [
+                NimbleAnchorButtonModule,
                 CommonModule,
-                RouterTestingModule.withRoutes([
-                    { path: '', redirectTo: '/start', pathMatch: 'full' },
-                    { path: 'page1', component: BlankComponent },
-                    { path: 'start', component: TestHostComponent }
-                ], { useHash: true })
             ],
             providers: [
-                { provide: Sanitizer, useValue: sanitizer }
+                { provide: Sanitizer, useValue: sanitizer },
+                provideRouter([
+                    { path: 'page1', component: BlankComponent },
+                    { path: '', component: TestHostComponent }
+                ]),
             ]
         });
+        harness = await RouterTestingHarness.create('');
     });
 
-    beforeEach(fakeAsync(() => {
+    beforeEach(() => {
         router = TestBed.inject(Router);
         location = TestBed.inject(Location);
-        fixture = TestBed.createComponent(TestHostComponent);
-        testHostComponent = fixture.componentInstance;
+        testHostComponent = harness.fixture.debugElement.query(By.directive(TestHostComponent)).componentInstance as TestHostComponent;
         anchorButton = testHostComponent.anchor.nativeElement;
-        fixture.detectChanges();
-        tick();
         processUpdates();
         innerAnchor = anchorButton!.shadowRoot!.querySelector('a')!;
         routerNavigateByUrlSpy = spyOn(router, 'navigateByUrl').and.callThrough();
-        anchorClickHandlerSpy = jasmine.createSpy('click');
+        anchorClickHandlerSpy = jasmine.createSpy('click').and.callFake((event: Event) => event.preventDefault());
         innerAnchor!.addEventListener('click', anchorClickHandlerSpy);
-    }));
+    });
 
     afterEach(() => {
         processUpdates();

packages/angular-workspace/nimble-angular/src/directives/anchor-button/tests/nimble-anchor-button-router-link.directive.spec.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
-import { RouterTestingModule } from '@angular/router/testing';
 import { processUpdates } from '../../../testing/async-helpers';
 import { NimbleAnchorButtonModule } from '../nimble-anchor-button.module';
 
@@ -23,8 +22,7 @@ describe('Nimble anchor button RouterLinkDirective', () => {
             imports: [
                 NimbleAnchorButtonModule,
                 CommonModule,
-                RouterTestingModule.withRoutes([{ path: '', component: TestHostComponent, pathMatch: 'full' }], { useHash: true })
-            ]
+            ],
         });
     });
 

packages/angular-workspace/nimble-angular/src/directives/anchor-menu-item/tests/nimble-anchor-menu-item-router-link-with-href.directive.spec.ts

@@ -1,8 +1,9 @@
 import { Component, ElementRef, Sanitizer, SecurityContext, ViewChild } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { Router } from '@angular/router';
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { provideRouter, Router } from '@angular/router';
 import { CommonModule, Location } from '@angular/common';
-import { RouterTestingModule } from '@angular/router/testing';
+import { RouterTestingHarness } from '@angular/router/testing';
 import { parameterizeSpec } from '@ni/jasmine-parameterized';
 import { processUpdates } from '../../../testing/async-helpers';
 import { NimbleAnchorMenuItemModule } from '../nimble-anchor-menu-item.module';
@@ -14,7 +15,6 @@ describe('Nimble anchor menu item RouterLinkWithHrefDirective', () => {
             <nimble-anchor-menu-item #menuItem nimbleRouterLink="page1" [queryParams]="{param1: true}" [state]="{stateProperty: 123}">
                 Anchor text
             </nimble-anchor-menu-item>
-            <router-outlet></router-outlet>
          `
     })
     class TestHostComponent {
@@ -25,49 +25,47 @@ describe('Nimble anchor menu item RouterLinkWithHrefDirective', () => {
     class BlankComponent { }
 
     let menuItem: AnchorMenuItem;
-    let fixture: ComponentFixture<TestHostComponent>;
     let testHostComponent: TestHostComponent;
     let router: Router;
     let location: Location;
     let innerAnchor: HTMLAnchorElement;
     let routerNavigateByUrlSpy: jasmine.Spy;
     let anchorClickHandlerSpy: jasmine.Spy;
     let sanitizer: jasmine.SpyObj<Sanitizer>;
+    let harness: RouterTestingHarness;
 
-    beforeEach(() => {
+    beforeEach(async () => {
         sanitizer = jasmine.createSpyObj<Sanitizer>('Sanitizer', ['sanitize']);
         sanitizer.sanitize.and.callFake((_, value: string) => value);
 
         TestBed.configureTestingModule({
             declarations: [TestHostComponent, BlankComponent],
-            imports: [NimbleAnchorMenuItemModule,
+            imports: [
+                NimbleAnchorMenuItemModule,
                 CommonModule,
-                RouterTestingModule.withRoutes([
-                    { path: '', redirectTo: '/start', pathMatch: 'full' },
-                    { path: 'page1', component: BlankComponent },
-                    { path: 'start', component: TestHostComponent }
-                ], { useHash: true })
             ],
             providers: [
-                { provide: Sanitizer, useValue: sanitizer }
+                { provide: Sanitizer, useValue: sanitizer },
+                provideRouter([
+                    { path: 'page1', component: BlankComponent },
+                    { path: '', component: TestHostComponent }
+                ]),
             ]
         });
+        harness = await RouterTestingHarness.create('');
     });
 
-    beforeEach(fakeAsync(() => {
+    beforeEach(() => {
         router = TestBed.inject(Router);
         location = TestBed.inject(Location);
-        fixture = TestBed.createComponent(TestHostComponent);
-        testHostComponent = fixture.componentInstance;
+        testHostComponent = harness.fixture.debugElement.query(By.directive(TestHostComponent)).componentInstance as TestHostComponent;
         menuItem = testHostComponent.menuItem.nativeElement;
-        fixture.detectChanges();
-        tick();
         processUpdates();
         innerAnchor = menuItem!.shadowRoot!.querySelector('a')!;
         routerNavigateByUrlSpy = spyOn(router, 'navigateByUrl').and.callThrough();
-        anchorClickHandlerSpy = jasmine.createSpy('click');
+        anchorClickHandlerSpy = jasmine.createSpy('click').and.callFake((event: Event) => event.preventDefault());
         innerAnchor!.addEventListener('click', anchorClickHandlerSpy);
-    }));
+    });
 
     afterEach(() => {
         processUpdates();

packages/angular-workspace/nimble-angular/src/directives/anchor-menu-item/tests/nimble-anchor-menu-item-router-link.directive.spec.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
-import { RouterTestingModule } from '@angular/router/testing';
 import { processUpdates } from '../../../testing/async-helpers';
 import { NimbleAnchorMenuItemModule } from '../nimble-anchor-menu-item.module';
 
@@ -20,11 +19,10 @@ describe('Nimble anchor menu item RouterLinkDirective', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             declarations: [TestHostComponent],
-            imports: [NimbleAnchorMenuItemModule,
-                CommonModule,
-                RouterTestingModule.withRoutes([{ path: '', component: TestHostComponent, pathMatch: 'full' }
-                ], { useHash: true })
-            ]
+            imports: [
+                NimbleAnchorMenuItemModule,
+                CommonModule
+            ],
         });
     });
 

packages/angular-workspace/nimble-angular/src/directives/anchor-tab/tests/nimble-anchor-tab-router-link-with-href.directive.spec.ts

@@ -1,8 +1,9 @@
 import { Component, ElementRef, Sanitizer, SecurityContext, ViewChild } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { Router } from '@angular/router';
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { provideRouter, Router } from '@angular/router';
 import { CommonModule, Location } from '@angular/common';
-import { RouterTestingModule } from '@angular/router/testing';
+import { By } from '@angular/platform-browser';
+import { RouterTestingHarness } from '@angular/router/testing';
 import { parameterizeSpec } from '@ni/jasmine-parameterized';
 import { processUpdates } from '../../../testing/async-helpers';
 import { NimbleAnchorTabModule } from '../nimble-anchor-tab.module';
@@ -14,7 +15,6 @@ describe('Nimble anchor tab RouterLinkWithHrefDirective', () => {
             <nimble-anchor-tab #anchorTab nimbleRouterLink="page1" [queryParams]="{param1: true}" [state]="{stateProperty: 123}">
                 Anchor text
             </nimble-anchor-tab>
-            <router-outlet></router-outlet>
          `
     })
     class TestHostComponent {
@@ -25,49 +25,47 @@ describe('Nimble anchor tab RouterLinkWithHrefDirective', () => {
     class BlankComponent { }
 
     let anchorTab: AnchorTab;
-    let fixture: ComponentFixture<TestHostComponent>;
     let testHostComponent: TestHostComponent;
     let router: Router;
     let location: Location;
     let innerAnchor: HTMLAnchorElement;
     let routerNavigateByUrlSpy: jasmine.Spy;
     let anchorClickHandlerSpy: jasmine.Spy;
     let sanitizer: jasmine.SpyObj<Sanitizer>;
+    let harness: RouterTestingHarness;
 
-    beforeEach(() => {
+    beforeEach(async () => {
         sanitizer = jasmine.createSpyObj<Sanitizer>('Sanitizer', ['sanitize']);
         sanitizer.sanitize.and.callFake((_, value: string) => value);
 
         TestBed.configureTestingModule({
             declarations: [TestHostComponent, BlankComponent],
-            imports: [NimbleAnchorTabModule,
+            imports: [
+                NimbleAnchorTabModule,
                 CommonModule,
-                RouterTestingModule.withRoutes([
-                    { path: '', redirectTo: '/start', pathMatch: 'full' },
-                    { path: 'page1', component: BlankComponent },
-                    { path: 'start', component: TestHostComponent }
-                ], { useHash: true })
             ],
             providers: [
-                { provide: Sanitizer, useValue: sanitizer }
+                { provide: Sanitizer, useValue: sanitizer },
+                provideRouter([
+                    { path: 'page1', component: BlankComponent },
+                    { path: '', component: TestHostComponent }
+                ]),
             ]
         });
+        harness = await RouterTestingHarness.create('');
     });
 
-    beforeEach(fakeAsync(() => {
+    beforeEach(() => {
         router = TestBed.inject(Router);
         location = TestBed.inject(Location);
-        fixture = TestBed.createComponent(TestHostComponent);
-        testHostComponent = fixture.componentInstance;
+        testHostComponent = harness.fixture.debugElement.query(By.directive(TestHostComponent)).componentInstance as TestHostComponent;
         anchorTab = testHostComponent.anchorTab.nativeElement;
-        fixture.detectChanges();
-        tick();
         processUpdates();
         innerAnchor = anchorTab!.shadowRoot!.querySelector('a')!;
         routerNavigateByUrlSpy = spyOn(router, 'navigateByUrl').and.callThrough();
-        anchorClickHandlerSpy = jasmine.createSpy('click');
+        anchorClickHandlerSpy = jasmine.createSpy('click').and.callFake((event: Event) => event.preventDefault());
         innerAnchor!.addEventListener('click', anchorClickHandlerSpy);
-    }));
+    });
 
     afterEach(() => {
         processUpdates();

packages/angular-workspace/nimble-angular/src/directives/anchor-tab/tests/nimble-anchor-tab-router-link.directive.spec.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { CommonModule } from '@angular/common';
-import { RouterTestingModule } from '@angular/router/testing';
 import { processUpdates } from '../../../testing/async-helpers';
 import { NimbleAnchorTabModule } from '../nimble-anchor-tab.module';
 
@@ -20,12 +19,10 @@ describe('Nimble anchor tab RouterLinkDirective', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             declarations: [TestHostComponent],
-            imports: [NimbleAnchorTabModule,
+            imports: [
+                NimbleAnchorTabModule,
                 CommonModule,
-                RouterTestingModule.withRoutes([
-                    { path: '', component: TestHostComponent, pathMatch: 'full' }
-                ], { useHash: true })
-            ]
+            ],
         });
     });