fix: invoke initialNavigation when a router is imported (#286)

Author: timdeschryver

lint-staged.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   '*.{ts,js}': ['eslint --fix'],
-  '*.{json,md}': ['prettier --write'],
+  '*.{ts,js,json,md}': ['prettier --write'],
 };

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

@@ -116,13 +116,12 @@ export async function render<SutType, WrapperType = SutType>(
     fixture.componentRef.injector.get(ChangeDetectorRef).detectChanges();
   };
 
-  let router = routes ? inject(Router) : null;
   const zone = inject(NgZone);
-  const navigate = async (elementOrPath: Element | string, basePath = ''): Promise<boolean> => {
-    if (!router) {
-      router = inject(Router);
-    }
 
+  const router = inject(Router);
+  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('?');
     const queryParams = params

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

@@ -1,66 +1,48 @@
-import {Component, NgModule} from '@angular/core';
-import {render, screen} from '@testing-library/angular';
-import {Router, RouterModule, Routes} from "@angular/router";
-import {RouterTestingModule} from "@angular/router/testing";
-import userEvent from "@testing-library/user-event";
-import {Location} from "@angular/common";
-import {TestBed} from "@angular/core/testing";
+import { Location } from '@angular/common';
+import { Component, NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../src/public_api';
 
 @Component({
-  template: `<div>Navigate</div> <router-outlet></router-outlet>`,
+  template: `<div>Navigate</div>
+    <router-outlet></router-outlet>`,
 })
 class MainComponent {}
 
 @Component({
-  template: `<div>first page</div><a routerLink="/second">go to second</a>`
+  template: `<div>first page</div>
+    <a routerLink="/second">go to second</a>`,
 })
 class FirstComponent {}
 
 @Component({
-  template: `<div>second page</div><button (click)="goBack()">navigate back</button>`
+  template: `<div>second page</div>
+    <button (click)="goBack()">navigate back</button>`,
 })
 class SecondComponent {
-  constructor(private location: Location) { }
-  goBack() {this.location.back();}
+  constructor(private location: Location) {}
+  goBack() {
+    this.location.back();
+  }
 }
 
 const routes: Routes = [
-  {path: '', redirectTo: '/first', pathMatch: 'full'},
-  {path: 'first', component: FirstComponent},
-  {path: 'second', component: SecondComponent}
+  { path: '', redirectTo: '/first', pathMatch: 'full' },
+  { path: 'first', component: FirstComponent },
+  { path: 'second', component: SecondComponent },
 ];
 
 @NgModule({
   declarations: [FirstComponent, SecondComponent],
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 class AppRoutingModule {}
 
-
-// test('navigate to second page and back', async () => {
-//   const subject = await render(MainComponent, {imports: [AppRoutingModule, RouterTestingModule]});
-//   await subject.navigate('/');
-//
-//   expect(await screen.findByText('Navigate')).toBeInTheDocument();
-//   expect(await screen.findByText('first page')).toBeInTheDocument();
-//
-//   userEvent.click(await screen.findByText('go to second'));
-//
-//   expect(await screen.findByText('second page')).toBeInTheDocument();
-//   expect(await screen.findByText('navigate back')).toBeInTheDocument();
-//
-//   userEvent.click(await screen.findByText('navigate back'));
-//
-//   expect(await screen.findByText('first page')).toBeInTheDocument();
-// });
-
 test('navigate to second page and back', async () => {
-  const subject = await render(MainComponent, {imports: [AppRoutingModule, RouterTestingModule]});
-
-  TestBed.inject(Router).initialNavigation();
-
-  await subject.navigate('/');
+  await render(MainComponent, { imports: [AppRoutingModule, RouterTestingModule] });
 
   expect(await screen.findByText('Navigate')).toBeInTheDocument();
   expect(await screen.findByText('first page')).toBeInTheDocument();