fix: don't fire router events on render (#325)

Closes #318

Author: timdeschryver

projects/testing-library/src/lib/testing-library.ts

@@ -29,7 +29,7 @@ import { RenderComponentOptions, RenderTemplateOptions, RenderResult, ComponentO
 import { getConfig } from './config';
 
 const mountedFixtures = new Set<ComponentFixture<any>>();
-const inject = TestBed.inject || TestBed.get;
+const safeInject = TestBed.inject || TestBed.get;
 
 export async function render<ComponentType>(
   component: Type<ComponentType>,
@@ -99,6 +99,17 @@ export async function render<SutType, WrapperType = SutType>(
 
   const componentContainer = createComponentFixture(sut, wrapper);
 
+  const zone = safeInject(NgZone);
+  const router = safeInject(Router);
+
+  if (typeof router?.initialNavigation === 'function') {
+    if (zone) {
+      zone.run(() => router?.initialNavigation());
+    } else {
+      router?.initialNavigation();
+    }
+  }
+
   let fixture: ComponentFixture<SutType>;
   let detectChanges: () => void;
 
@@ -120,17 +131,6 @@ export async function render<SutType, WrapperType = SutType>(
     fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
   };
 
-  const zone = inject(NgZone);
-
-  const router = inject(Router);
-  if (typeof router?.initialNavigation === 'function') {
-    if (zone) {
-      zone.run(() => router?.initialNavigation());
-    } else {
-      router?.initialNavigation();
-    }
-  }
-
   const navigate = async (elementOrPath: Element | string, basePath = ''): Promise<boolean> => {
     const href = typeof elementOrPath === 'string' ? elementOrPath : elementOrPath.getAttribute('href');
     const [path, params] = (basePath + href).split('?');
@@ -229,7 +229,7 @@ export async function render<SutType, WrapperType = SutType>(
 
 async function createComponent<SutType>(component: Type<SutType>): Promise<ComponentFixture<SutType>> {
   /* Make sure angular application is initialized before creating component */
-  await inject(ApplicationInitStatus).donePromise;
+  await safeInject(ApplicationInitStatus).donePromise;
   return TestBed.createComponent(component);
 }
 

projects/testing-library/tests/issues/issue-318.spec.ts

@@ -0,0 +1,43 @@
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+import {RouterTestingModule} from '@angular/router/testing';
+import {Subject, takeUntil} from 'rxjs';
+import {render} from "@testing-library/angular";
+
+@Component({
+  selector: 'atl-app-fixture',
+  template: '',
+})
+class FixtureComponent implements OnInit, OnDestroy {
+  unsubscribe$ = new Subject<void>();
+
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.router.events.pipe(takeUntil(this.unsubscribe$)).subscribe((evt) => {
+      this.eventReceived(evt)
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
+
+  eventReceived(evt: any) {
+    console.log(evt);
+  }
+}
+
+
+test('it does not invoke router events on init', async () => {
+  const eventReceived = jest.fn();
+  await render(FixtureComponent, {
+    imports: [RouterTestingModule],
+    componentProperties: {
+      eventReceived
+    }
+  });
+  expect(eventReceived).not.toHaveBeenCalled();
+});
+