fix: extract router params in navigate (#93)

Closes #91

Author: timdeschryver

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

@@ -121,9 +121,28 @@ export async function render<SutType, WrapperType = SutType>(
     }
 
     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('=');
+          qp[key] = value;
+          return qp;
+        }, {})
+      : undefined;
+
+    const doNavigate = () =>
+      router.navigate([path], {
+        queryParams,
+      });
 
     let result;
-    await zone.run(() => (result = router.navigate([basePath + href])));
+
+    if (zone) {
+      await zone.run(() => (result = doNavigate()));
+    } else {
+      result = doNavigate();
+    }
+
     detectChanges();
     return result;
   };

src/app/examples/09-router.spec.ts

@@ -73,8 +73,10 @@ test('it can navigate to routes with a base path', async () => {
   await navigate(screen.getByText(/Back to parent/));
   expect(screen.queryByText(/Detail three/i)).not.toBeInTheDocument();
 
-  await navigate('base/detail/two'); // possible to just use strings
+  await navigate('base/detail/two?text=Hello&subtext=World'); // possible to just use strings
   expect(screen.queryByText(/Detail two/i)).toBeInTheDocument();
+  expect(screen.queryByText(/Hello World/i)).toBeInTheDocument();
+
   await navigate('/hidden-detail', basePath);
   expect(screen.queryByText(/You found the treasure!/i)).toBeInTheDocument();
 });

src/app/examples/09-router.ts

@@ -20,12 +20,16 @@ export class MasterComponent {}
   template: `
     <h2>Detail {{ id | async }}</h2>
 
+    <p>{{ text | async }} {{ subtext | async }}</p>
+
     <a [routerLink]="'../..'">Back to parent</a>
     <a routerLink="/hidden-detail">hidden x</a>
   `,
 })
 export class DetailComponent {
   id = this.route.paramMap.pipe(map(params => params.get('id')));
+  text = this.route.queryParams.pipe(map(params => params['text']));
+  subtext = this.route.queryParams.pipe(map(params => params['subtext']));
   constructor(private route: ActivatedRoute) {}
 }