feat: accept query params in initialRoute (#409)

Closes #407

Author: jwbaart

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

@@ -112,8 +112,45 @@ export async function render<SutType, WrapperType = SutType>(
 
   const zone = safeInject(NgZone);
   const router = safeInject(Router);
+  const _navigate = async (elementOrPath: Element | string, basePath = ''): Promise<boolean> => {
+    const href = typeof elementOrPath === 'string' ? elementOrPath : elementOrPath.getAttribute('href');
+    const [path, params] = (basePath + href).split('?');
+    const queryParams = params
+      ? params.split('&').reduce((qp, q) => {
+          const [key, value] = q.split('=');
+          const currentValue = qp[key];
+          if (typeof currentValue === 'undefined') {
+            qp[key] = value;
+          } else if (Array.isArray(currentValue)) {
+            qp[key] = [...currentValue, value];
+          } else {
+            qp[key] = [currentValue, value];
+          }
+          return qp;
+        }, {} as Record<string, string | string[]>)
+      : undefined;
 
-  if (initialRoute) await router.navigate([initialRoute]);
+    const navigateOptions: NavigationExtras | undefined = queryParams
+      ? {
+          queryParams,
+        }
+      : undefined;
+
+    const doNavigate = () => {
+      return navigateOptions ? router?.navigate([path], navigateOptions) : router?.navigate([path]);
+    };
+
+    let result;
+
+    if (zone) {
+      await zone.run(() => (result = doNavigate()));
+    } else {
+      result = doNavigate();
+    }
+    return result ?? false;
+  };
+
+  if (initialRoute) await _navigate(initialRoute);
 
   if (typeof router?.initialNavigation === 'function') {
     if (zone) {
@@ -167,43 +204,9 @@ export async function render<SutType, WrapperType = SutType>(
   };
 
   const navigate = async (elementOrPath: Element | string, basePath = ''): Promise<boolean> => {
-    const href = typeof elementOrPath === 'string' ? elementOrPath : elementOrPath.getAttribute('href');
-    const [path, params] = (basePath + href).split('?');
-    const queryParams = params
-      ? params.split('&').reduce((qp, q) => {
-          const [key, value] = q.split('=');
-          const currentValue = qp[key];
-          if (typeof currentValue === 'undefined') {
-            qp[key] = value;
-          } else if (Array.isArray(currentValue)) {
-            qp[key] = [...currentValue, value];
-          } else {
-            qp[key] = [currentValue, value];
-          }
-          return qp;
-        }, {} as Record<string, string | string[]>)
-      : undefined;
-
-    const navigateOptions: NavigationExtras | undefined = queryParams
-      ? {
-          queryParams,
-        }
-      : undefined;
-
-    const doNavigate = () => {
-      return navigateOptions ? router?.navigate([path], navigateOptions) : router?.navigate([path]);
-    };
-
-    let result;
-
-    if (zone) {
-      await zone.run(() => (result = doNavigate()));
-    } else {
-      result = doNavigate();
-    }
-
+    const result = await _navigate(elementOrPath, basePath);
     detectChanges();
-    return result ?? false;
+    return result;
   };
 
   return {

projects/testing-library/tests/integrations/ng-mocks.spec.ts

@@ -3,6 +3,7 @@ import { By } from '@angular/platform-browser';
 
 import { MockComponent } from 'ng-mocks';
 import { render } from '../../src/public_api';
+import { NgIf } from '@angular/common';
 
 test('sends the correct value to the child input', async () => {
   const utils = await render(TargetComponent, {
@@ -34,6 +35,7 @@ test('sends the correct value to the child input 2', async () => {
   selector: 'atl-child',
   template: 'child',
   standalone: true,
+  imports: [NgIf],
 })
 class ChildComponent {
   @ContentChild('something')

projects/testing-library/tests/render.spec.ts

@@ -14,7 +14,9 @@ import {
 import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TestBed } from '@angular/core/testing';
 import { render, fireEvent, screen } from '../src/public_api';
-import { Resolve, RouterModule } from '@angular/router';
+import { ActivatedRoute, Resolve, RouterModule } from '@angular/router';
+import { map } from 'rxjs';
+import { AsyncPipe, NgIf } from '@angular/common';
 
 @Component({
   selector: 'atl-fixture',
@@ -365,6 +367,30 @@ describe('initialRoute', () => {
     expect(screen.queryByText('Secondary Component')).not.toBeInTheDocument();
     expect(screen.getByText('button')).toBeInTheDocument();
   });
+
+  it('allows initially rendering a specific route with query parameters', async () => {
+    @Component({
+      standalone: true,
+      selector: 'atl-query-param-fixture',
+      template: `<p>paramPresent$: {{ paramPresent$ | async }}</p>`,
+      imports: [NgIf, AsyncPipe],
+    })
+    class QueryParamFixtureComponent {
+      constructor(public route: ActivatedRoute) {}
+
+      paramPresent$ = this.route.queryParams.pipe(map((queryParams) => (queryParams?.param ? 'present' : 'missing')));
+    }
+
+    const initialRoute = 'initial-route?param=query';
+    const routes = [{ path: 'initial-route', component: QueryParamFixtureComponent }];
+
+    await render(RouterFixtureComponent, {
+      initialRoute,
+      routes,
+    });
+
+    expect(screen.getByText(/present/i)).toBeVisible();
+  });
 });
 
 describe('configureTestBed', () => {