feat: add initialRoute parameter to avoid resolver issues with using a default route (#367)

Author: JJosephttg

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

@@ -328,6 +328,21 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    */
   routes?: Routes;
 
+  /**
+   * @description
+   * Specifies which route should be initially navigated to
+   *
+   * @example
+   * const component = await render(AppComponent, {
+   *  initialRoute: 'myroute',
+   *  routes: [
+   *    { path: '', component: HomeComponent },
+   *    { path: 'myroute', component: SecondaryComponent }
+   *  ]
+   * })
+   */
+  initialRoute?: string;
+
   /**
    * @description
    * Removes the Angular attributes (ng-version, and root-id) from the fixture.

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

@@ -64,6 +64,7 @@ export async function render<SutType, WrapperType = SutType>(
     routes = [],
     removeAngularAttributes = false,
     defaultImports = [],
+    initialRoute = '',
   } = { ...globalConfig, ...renderOptions };
 
   dtlConfigure({
@@ -107,6 +108,8 @@ export async function render<SutType, WrapperType = SutType>(
   const zone = safeInject(NgZone);
   const router = safeInject(Router);
 
+  if (initialRoute) await router.navigate([initialRoute]);
+
   if (typeof router?.initialNavigation === 'function') {
     if (zone) {
       zone.run(() => router.initialNavigation());

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

@@ -12,6 +12,7 @@ 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';
 
 @Component({
   selector: 'atl-fixture',
@@ -296,3 +297,48 @@ describe('DebugElement', () => {
     expect(view.debugElement.componentInstance).toBeInstanceOf(FixtureComponent);
   });
 });
+
+describe('initialRoute', () => {
+  @Component({
+    standalone: true,
+    selector: 'atl-fixture2',
+    template: `<button>Secondary Component</button>`,
+  })
+  class SecondaryFixtureComponent {}
+
+  @Component({
+    standalone: true,
+    selector: 'atl-router-fixture',
+    template: `<router-outlet></router-outlet>`,
+    imports: [RouterModule],
+  })
+  class RouterFixtureComponent {}
+
+  @Injectable()
+  class FixtureResolver implements Resolve<void> {
+    public isResolved = false;
+
+    public resolve() {
+      this.isResolved = true;
+    }
+  }
+
+  it('allows initially rendering a specific route to avoid triggering a resolver for the default route', async () => {
+    const initialRoute = 'initial-route';
+    const routes = [
+      { path: initialRoute, component: FixtureComponent },
+      { path: '**', resolve: { data: FixtureResolver }, component: SecondaryFixtureComponent },
+    ];
+
+    await render(RouterFixtureComponent, {
+      initialRoute,
+      routes,
+      providers: [FixtureResolver],
+    });
+    const resolver = TestBed.inject(FixtureResolver);
+
+    expect(resolver.isResolved).toBe(false);
+    expect(screen.queryByText('Secondary Component')).not.toBeInTheDocument();
+    expect(screen.getByText('button')).toBeInTheDocument();
+  });
+});