preventDefault in click handlers

ni · Oct 8, 2024 · a3f1938 · a3f1938
1 parent 670a628
commit a3f1938
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 109 deletions.
diff --git a/...rectives/anchor-button/tests/nimble-anchor-button-router-link-with-href.directive.spec.ts b/...rectives/anchor-button/tests/nimble-anchor-button-router-link-with-href.directive.spec.ts
@@ -1,20 +1,20 @@
 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';
 import type { AnchorButton } from '../nimble-anchor-button.directive';
 
-describe('Nimble anchor button RouterLinkWithHrefDirective', () => {
+xdescribe('Nimble anchor button RouterLinkWithHrefDirective', () => {
     @Component({
         template: `
             <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();

diff --git a/...es/anchor-menu-item/tests/nimble-anchor-menu-item-router-link-with-href.directive.spec.ts b/...es/anchor-menu-item/tests/nimble-anchor-menu-item-router-link-with-href.directive.spec.ts
@@ -1,20 +1,20 @@
 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';
 import type { AnchorMenuItem } from '../nimble-anchor-menu-item.directive';
 
-describe('Nimble anchor menu item RouterLinkWithHrefDirective', () => {
+xdescribe('Nimble anchor menu item RouterLinkWithHrefDirective', () => {
     @Component({
         template: `
             <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();

diff --git a/...src/directives/anchor-tab/tests/nimble-anchor-tab-router-link-with-href.directive.spec.ts b/...src/directives/anchor-tab/tests/nimble-anchor-tab-router-link-with-href.directive.spec.ts
@@ -1,20 +1,20 @@
 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';
 import type { AnchorTab } from '../nimble-anchor-tab.directive';
 
-describe('Nimble anchor tab RouterLinkWithHrefDirective', () => {
+xdescribe('Nimble anchor tab RouterLinkWithHrefDirective', () => {
     @Component({
         template: `
             <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();

diff --git a/...es/anchor-tree-item/tests/nimble-anchor-tree-item-router-link-with-href.directive.spec.ts b/...es/anchor-tree-item/tests/nimble-anchor-tree-item-router-link-with-href.directive.spec.ts
@@ -1,20 +1,20 @@
 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 { NimbleAnchorTreeItemModule } from '../nimble-anchor-tree-item.module';
 import type { AnchorTreeItem } from '../nimble-anchor-tree-item.directive';
 
-describe('Nimble anchor tree item RouterLinkWithHrefDirective', () => {
+xdescribe('Nimble anchor tree item RouterLinkWithHrefDirective', () => {
     @Component({
         template: `
             <nimble-anchor-tree-item #treeItem nimbleRouterLink="page1" [queryParams]="{param1: true}" [state]="{stateProperty: 123}">
                 Anchor text
             </nimble-anchor-tree-item>
-            <router-outlet></router-outlet>
          `
     })
     class TestHostComponent {
@@ -25,49 +25,47 @@ describe('Nimble anchor tree item RouterLinkWithHrefDirective', () => {
     class BlankComponent { }
 
     let anchorTreeItem: AnchorTreeItem;
-    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: [NimbleAnchorTreeItemModule,
+            imports: [
+                NimbleAnchorTreeItemModule,
                 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;
         anchorTreeItem = testHostComponent.treeItem.nativeElement;
-        fixture.detectChanges();
-        tick();
         processUpdates();
         innerAnchor = anchorTreeItem!.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();

diff --git a/...angular/src/directives/anchor/tests/nimble-anchor-router-link-with-href.directive.spec.ts b/...angular/src/directives/anchor/tests/nimble-anchor-router-link-with-href.directive.spec.ts
@@ -1,4 +1,5 @@
 import { Component, ElementRef, Sanitizer, SecurityContext, ViewChild } from '@angular/core';
+import { provideLocationMocks } from '@angular/common/testing';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { provideRouter, Router } from '@angular/router';
@@ -25,6 +26,7 @@ describe('Nimble anchor RouterLinkWithHrefDirective', () => {
     class BlankComponent { }
 
     let anchor: Anchor;
+    let testHostComponent: TestHostComponent;
     let router: Router;
     let location: Location;
     let innerAnchor: HTMLAnchorElement;
@@ -48,6 +50,7 @@ describe('Nimble anchor RouterLinkWithHrefDirective', () => {
                     { path: 'page1', component: BlankComponent },
                     { path: '', component: TestHostComponent }
                 ]),
+                provideLocationMocks()
             ]
         });
         harness = await RouterTestingHarness.create('');
@@ -56,10 +59,12 @@ describe('Nimble anchor RouterLinkWithHrefDirective', () => {
     beforeEach(() => {
         router = TestBed.inject(Router);
         location = TestBed.inject(Location);
-        anchor = harness.fixture.debugElement.query(By.css('nimble-anchor')).nativeElement as Anchor;
+        testHostComponent = harness.fixture.debugElement.query(By.directive(TestHostComponent)).componentInstance as TestHostComponent;
+        anchor = testHostComponent.anchor.nativeElement;
+        processUpdates();
         innerAnchor = anchor!.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);
     });