Setting up multiple routed features

💡 Tip Lazy loading a feature isn't a requirement in an integration test.

Standalone feature routes

To set up multiple standalone feature routes for a feature test, add routes to the routes array option that wrap the standalone routes.

Pass the route path of the primary feature as the featurePath option.

Feature harness

Use createFeatureHarness to create a feature testing harness.

import { createFeatureHarness } from '@ngworker/spectacular';
import {
  crisisCenterPath,
  crisisCenterRoutes,
} from '@tour-of-heoes/crisis-center';
import { heroesPath, heroesRoutes } from '@tour-of-heoes/heroes';

function setup() {
  const harness = createFeatureHarness({
    featurePath: crisisCenterPath,
    routes: [
      { path: crisisCenterPath, loadChildren: () => crisisCenterRoutes },
      { path: heroesPath, loadChildren: () => heroesRoutes },
    ],
  });

  return {
    harness,
  };
}

Angular Testing Library

Using Angular Testing Library, pass SpectacularAppComponent as the first argument to render and add provideSpectacularFeatureTesting to the providers array option.

import {
  provideSpectacularFeatureTesting,
  SpectacularAppComponent,
} from '@ngworker/spectacular';
import { render } from '@testing-library/angular';
import {
  crisisCenterPath,
  crisisCenterRoutes,
} from '@tour-of-heroes/crisis-center';
import { heroesPath, heroesRoutes } from '@tour-of-heoes/heroes';

async function setup() {
  await render(SpectacularAppComponent, {
    providers: [
      provideSpectacularFeatureTesting({
        featurePath: crisisCenterPath,
        routes: [
          { path: crisisCenterPath, loadChildren: () => crisisCenterRoutes },
          { path: heroesPath, loadChildren: () => heroesRoutes },
        ],
      }),
    ],
  });
}

Routed feature modules

To set up a routed feature for a feature test, add routes to the routes array option that wrap the routed feature modules.

Pass the route path of the primary feature as the featurePath option.

Feature harness

Use createFeatureHarness to create a feature testing harness.

import { createFeatureHarness } from '@ngworker/spectacular';
import {
  CrisisCenterModule,
  crisisCenterPath,
} from '@tour-of-heroes/crisis-center';
import { heroesPath, heroesRoutes } from '@tour-of-heoes/heroes';

function setup() {
  const harness = createFeatureHarness({
    featurePath: crisisCenterPath,
    routes: [
      { path: crisisCenterPath, loadChildren: () => CrisisCenterModule },
      { path: heroesPath, loadChildren: () => heroesRoutes },
    ],
  });

  return {
    harness,
  };
}

Angular Testing Library

Using Angular Testing Library, pass SpectacularAppComponent as the first argument to render and add provideSpectacularFeatureTesting to the providers array option.

import {
  provideSpectacularFeatureTesting,
  SpectacularAppComponent,
} from '@ngworker/spectacular';
import { render } from '@testing-library/angular';
import {
  CrisisCenterModule,
  crisisCenterRoutes,
} from '@tour-of-heroes/crisis-center';
import { heroesPath, heroesRoutes } from '@tour-of-heoes/heroes';

async function setup() {
  await render(SpectacularAppComponent, {
    providers: [
      provideSpectacularFeatureTesting({
        featurePath: crisisCenterPath,
        routes: [
          { path: crisisCenterPath, loadChildren: () => CrisisCenterModule },
          { path: heroesPath, loadChildren: () => heroesRoutes },
        ],
      }),
    ],
  });
}