fix: call navigate correctly without queryparams (#154)

Author: timdeschryver

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

@@ -2,15 +2,14 @@ import { Component, Type, NgZone, SimpleChange, OnChanges, SimpleChanges } from
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Router } from '@angular/router';
+import { NavigationExtras, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import {
   getQueriesForElement as dtlGetQueriesForElement,
   prettyDOM as dtlPrettyDOM,
   waitFor as dtlWaitFor,
   waitForElementToBeRemoved as dtlWaitForElementToBeRemoved,
   screen as dtlScreen,
-  queries as dtlQueries,
   waitForOptions as dtlWaitForOptions,
   configure as dtlConfigure,
 } from '@testing-library/dom';
@@ -134,15 +133,19 @@ export async function render<SutType, WrapperType = SutType>(
     const queryParams = params
       ? params.split('&').reduce((qp, q) => {
           const [key, value] = q.split('=');
+          // TODO(Breaking): group same keys qp[key] ? [...qp[key], value] : value
           qp[key] = value;
           return qp;
         }, {})
       : undefined;
 
-    const doNavigate = () =>
-      router.navigate([path], {
-        queryParams,
-      });
+    const navigateOptions: NavigationExtras = queryParams
+      ? {
+          queryParams,
+        }
+      : undefined;
+
+    const doNavigate = () => (navigateOptions ? router.navigate([path], navigateOptions) : router.navigate([path]));
 
     let result;
 

projects/testing-library/tests/find-by.spec.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { timer } from 'rxjs';
 import { render, screen } from '../src/public_api';
-import { mapTo, timeout } from 'rxjs/operators';
+import { mapTo } from 'rxjs/operators';
 
 @Component({
   selector: 'fixture',

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

@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { render } from '../src/public_api';
+
+@Component({
+  selector: 'fixture',
+  template: ``,
+})
+class FixtureComponent {}
+
+test('should navigate correctly', async () => {
+  const { navigate } = await render(FixtureComponent, {
+    routes: [{ path: 'details', component: FixtureComponent }],
+  });
+
+  const router = TestBed.inject(Router);
+  const navSpy = jest.spyOn(router, 'navigate');
+
+  navigate('details');
+
+  expect(navSpy).toBeCalledWith(['details']);
+});
+
+test('should pass queryParams if provided', async () => {
+  const { navigate } = await render(FixtureComponent, {
+    routes: [{ path: 'details', component: FixtureComponent }],
+  });
+
+  const router = TestBed.inject(Router);
+  const navSpy = jest.spyOn(router, 'navigate');
+
+  navigate('details?sortBy=name&sortOrder=asc');
+
+  expect(navSpy).toBeCalledWith(['details'], {
+    queryParams: {
+      sortBy: 'name',
+      sortOrder: 'asc',
+    },
+  });
+});