How to test an Angular component that uses routing and router-outlet to render

[IanTaite]

Summary

I'd like to write a story that shows a complete screen. My layout component contains a header, sidebar and footer component, and a placeholder for main content using Angular's router-outlet directive. To render a particular component inside the router-outlet, I have to configure routes and I guess, either the RouterTestingModule or RouterModule. All my components are standalone. I just can't figure out how to get this configured. I'd like a simple example I can use as a base for my story.

Additional information

Storybook 8.1 / Angular 17

Create a reproduction

No response

[smlimasu]

#28654

Maybe this helps? You can manually provide a route for the route array. You could also use provideLocationMocks in the application config decorator. You can apply this decorator in preview, meta or story level.

[dmy-leanix]

You can set template as <router-outlet></router-outlet>

  render: () => ({
    template: `<router-outlet />`
  })

and then it depends if you already have routing initialised or you need to provide forRoot routing specify routing

• Add RouterModule.forRoot with the story component if you don't have router module in storybook globally
• In APP_INITIALIZER call router.resetConfig() with new router to story component

you may need to change location strategy to HashLocationStrategy in decorators:

 applicationConfig({
    providers: [
      { provide: LocationStrategy, useClass: HashLocationStrategy },
   ]
});

[Marklb]

My comment on the discussion the @smlimasu linked is probably what you want, but I didn't fill it out with a full example. So, I will provide one for what I think you are trying to do. I tried to make everything small and simple, so I could add it to one file and hopefully still be readable.

Here is a Stackblitz: https://stackblitz.com/edit/github-bazgks?file=src%2Fapp%2Fexample.stories.ts&preset=node
For reference, here is the full story and components that the Stackblitz contains:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { provideRouter, RouterModule, withHashLocation } from '@angular/router';
import { applicationConfig, Meta, StoryObj } from '@storybook/angular';

@Component({
  template: `
    <div>
      <a routerLink="/content-1">Content 1</a>
      <a routerLink="/content-2">Content 2</a>
      <a routerLink="/content-3">Content 3</a>
    </div>
    <div>
      <router-outlet></router-outlet>
    </div>
  `,
  standalone: true,
  imports: [CommonModule, RouterModule],
})
class MyPageComponent {}

@Component({
  template: `Content Page 1`,
  standalone: true,
})
class ContentOneComponent {}

@Component({
  template: `Content Page 2`,
  standalone: true,
})
class ContentTwoComponent {}

@Component({
  template: `Content Page 3`,
  standalone: true,
})
class ContentThreeComponent {}

@Component({
  template: `Dashboard`,
  standalone: true,
})
class DashboardComponent {}

const meta: Meta<MyPageComponent> = {
  title: 'MyPageComponent',
  component: MyPageComponent,
  decorators: [
    applicationConfig({
      providers: [
        // The router is most likely going to interfere with your Storybook application/iframe
        // route, but hash routes should be fine, so I also add `withHashLocation`.
        provideRouter(
          [
            { path: '', component: DashboardComponent },
            { path: 'content-1', component: ContentOneComponent },
            { path: 'content-2', component: ContentTwoComponent },
            { path: 'content-3', component: ContentThreeComponent },
          ],
          withHashLocation()
        ),
      ],
    }),
  ],
  parameters: {
    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
    layout: 'fullscreen',
  },
};

export default meta;
type Story = StoryObj<MyPageComponent>;

export const Basic: Story = {};

One issue is that changing stories will not reset the route, since it is using the actual router. I have a sort of complicated solution that I may provide. It is mixed in with some old code that I no longer use, so I need to pull it out and clean it up. It basically adds providers that are used to navigate to a specified route after APP_INITIALIZER is called. Most of my components that I do these stories for don't use Controls, so it works fine. If your component uses Controls or something else that updates args then there is a chance that your story may have to reinitialize the Angular app, depending on how the story is implemented. I could probably fix that problem, but it hasn't become a priority for me, yet.

I have seen solutions that use RouterTestingModule or mock the router, which are valid choices, but I haven't seen one that didn't have some limitations that didn't work for me. If someone has a thorough implementation for that then I would maybe consider that. I may take a look and update this, if I find one I like.

[dmy-leanix]

One issue is that changing stories will not reset the route, since it is using the actual router.

To reset the route it's possible to write storybook event handlers, those will clean routes, using STORY_PREPARED event by checking if old story id is different from new story id

[Marklb]

@dmy-leanix That is correct, but a story's id uniquely identifies a story, not a story instance. I haven't got around to looking for how instances are uniquely identified, but I think am correct. In most situation, that would work fine and I think that is how I did something like this a, while ago, for something else. One example if the docs page. If you have two stories, the default docs page is going to render the first story in two places and both instances of the story will call the decorator with the same story id.

[IanTaiteLNR]

Here is what I had to do. I had to use two helper components and a helper service to test the actual component of interest. Storybook sees the outer helper component and passes arguments to its input properties. The outer component writes the arguments received to a helper service. Router-outlet renders the inner helper component which reads arguments out of the helper service and sets them on props of the real component being tested. The inner helper component renders the real test subject. When the args changed they are passed along this chain. In my dirty implementation of this, I have two arguments being passed down to the test subject. In my work Storybook, many many args have to be passed as the test subject can be rendered many different ways. I should have probably used a single Signal for a bag of all properties as each argument is defined multiple times.

I can't think of another way to do this. As a hack at work, the Layout component that contains a router-outlet now contains an ng-content directive as well, so that in Storybook I don't have to configure the router. I don't think this is the end of it though, because I've already seen inner components complaining that "../" is an invalid path, or would bust out of the router tree.

import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
import { fn } from '@storybook/test';
import { LayoutComponent } from './layout.component';
import { Component, inject, Injectable, Input, OnInit, signal } from '@angular/core';
import { provideRouter, withHashLocation } from '@angular/router';
import { GridComponent } from '../grid/grid.component';

@Injectable()
export class SbHelperService {
  public title = signal<string>('');
  public childTitle = signal<string>('');
}

@Component({
  selector: 'app-layout-helper',
  standalone: true,
  template: `
    <app-layout></app-layout>
  `,
  providers: [SbHelperService],
  imports: [LayoutComponent]
})
export class SbLayoutHelperComponent implements OnInit {
  private sbHelperService = inject(SbHelperService);

  @Input({required: true}) title!: string;
  @Input({required: true}) childTitle!: string;

  public ngOnInit() {
    this.sbHelperService.title.set(this.title);
    this.sbHelperService.childTitle.set(this.childTitle);
  }
}

@Component({
  selector: 'app-grid-helper',
  standalone: true,
  template: `
    <app-grid
      [title]="sbHelperService.title()"
      [childTitle]="sbHelperService.childTitle()"
    />
  `,
  imports: [GridComponent]
})
export class SbGridHelperComponent {
  public sbHelperService = inject(SbHelperService);
}

const meta: Meta<SbLayoutHelperComponent> = {
  title: 'Components/Layout/Grid',
  component: SbLayoutHelperComponent,
  tags: ['autodocs'],
  decorators: [
    applicationConfig({
      providers: [
        provideRouter([
          { path: '', component: SbGridHelperComponent, pathMatch: 'full' }
        ], withHashLocation()),
      ],
    })
  ],
};

export default meta;
type Story = StoryObj<LayoutComponent>;

export const Default: Story = {
  render: (args) => ({
    props: args,
    template: `
    <app-layout-helper [title]="title" [childTitle]="childTitle" />
    `
  }),
  args: {
    title: 'This is the layout title',
    childTitle: 'This is the child title',
  },
};

[Marklb]

I was thinking about this and I think I understand your solution, but I am trying to understand the problem.

You have SbGridHelperComponent wrapping GridComponent, to set inputs. How are those inputs set in your application? Are you using component input binding?

[Marklb]

In my last solution, I mentioned a provider that I use to set an initial url. While updating it, I added some improvements then decided to just publish it as a package. https://github.com/Marklb/storybook-angular-initial-url
Updated Stackblitz: https://stackblitz.com/edit/github-bazgks-55nmcv

The package adds a provider that is just a simple Angular provider and adds a decorator to set the url in the story args.

Here is the story file from the above Stackblitz:

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { provideRouter, RouterModule } from '@angular/router';
import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
import { provideLocationMocks } from '@angular/common/testing';

import {
  provideStoryInitialUrl,
  initialUrlFromArgs,
} from '@marklb/storybook-angular-initial-url';

@Component({
  template: `
    <div>
      <a routerLink="/content-1">Content 1</a>
      <a routerLink="/content-2">Content 2</a>
      <a routerLink="/content-3">Content 3</a>
      <a routerLink="../other">Content 3</a>
    </div>
    <div>
      <router-outlet></router-outlet>
    </div>
  `,
  standalone: true,
  imports: [CommonModule, RouterModule],
})
class MyPageComponent {}

@Component({
  template: `Content Page 1`,
  standalone: true,
})
class ContentOneComponent {}

@Component({
  template: `Content Page 2`,
  standalone: true,
})
class ContentTwoComponent {}

@Component({
  template: `Content Page 3`,
  standalone: true,
})
class ContentThreeComponent {}

@Component({
  template: `Dashboard`,
  standalone: true,
})
class DashboardComponent {}

interface ExtraArgs {
  initialUrl?: string
}

type StoryComponent = MyPageComponent & ExtraArgs

const meta: Meta<StoryComponent> = {
  title: 'MyPageComponent',
  component: MyPageComponent,
  tags: ['autodocs'],
  decorators: [
    applicationConfig({
      providers: [
        provideLocationMocks(),
        provideRouter([
          { path: '', component: DashboardComponent },
          { path: 'content-1', component: ContentOneComponent },
          { path: 'content-2', component: ContentTwoComponent },
          { path: 'content-3', component: ContentThreeComponent },
        ]),
        // provideStoryInitialUrl('content-1'),
      ],
    }),
  ],
  parameters: {
    layout: 'fullscreen',
  },
};

export default meta;
type Story = StoryObj<StoryComponent>;

export const Basic: Story = {};

export const WithInitialUrl: Story = {
  decorators: [
    applicationConfig({
      providers: [provideStoryInitialUrl('content-2')],
    }),
  ],
};

export const WithInitialUrlArg: Story = {
  argTypes: {
    initialUrl: {
      control: {
        type: 'select',
      },
      options: ['/content-1', '/content-2', '/content-3'],
    },
  },
  args: {
    initialUrl: '/content-3',
  },
  decorators: [initialUrlFromArgs()],
};

export const ArgChangeRerender: Story = {
  argTypes: {
    ...WithInitialUrlArg.argTypes,
  },
  args: {
    ...WithInitialUrlArg.args,
  },
  decorators: [initialUrlFromArgs({ rerender: true })],
};

Also, I switched from using hash routes to just providing provideLocationMocks(), which seems to work fine for hash and non-hash routes.

[IanTaite]

Hmm. I think for our tests, the Page component that the router would render inside Layout is being skipped for expediency and we're setting grid inputs in the test that probably would be done by a Page in the real app using data obtained from the router and other services. When I wrote that code, I wasn't sure how to pass args to the grid or if it was even possible. You can't just add an argument to the story and expect to use in the template of a story. It won't compile. There seems to be two ways to solve this. One is add inputs to the helper component. The other is to extend the story interface. I've seen one example of it. Something like Layout & { extraProp1: string } (Less than, greater than not available on my phone for some reason). I can't remember the exact syntax. The next problem I hit was to do with importing components for use. I kept getting an error saying can't set prop on such a comp; make sure you include it My helper was standalone and despite including the missing comp in the helpers imports, I had to include it in the module metadata. I found resolving this to be insanely stressful, and due to time constraints, I just had to clobber the problem until the import error went away. I haven't been able to test carefully enough to establish what the rules of thumb are so this is all smooth in future.

…

On Mon, Aug 5, 2024, 7:22 AM Mark Berry ***@***.***> wrote: In my last solution, I mentioned a provider that I use to set an initial url. While updating it, I added some improvements then decided to just publish it as a package. https://github.com/Marklb/storybook-angular-initial-url Updated Stackblitz: https://stackblitz.com/edit/github-bazgks-55nmcv The package adds a provider that is just a simple Angular provider and adds a decorator to set the url in the story args. Here is the story file from the above Stackblitz: import { CommonModule } from ***@***.***/common';import { Component } from ***@***.***/core';import { provideRouter, RouterModule } from ***@***.***/router';import { applicationConfig, Meta, StoryObj } from ***@***.***/angular';import { provideLocationMocks } from ***@***.***/common/testing'; import { provideStoryInitialUrl, initialUrlFromArgs,} from ***@***.***/storybook-angular-initial-url'; @component({ template: ` <div> <a routerLink="/content-1">Content 1</a> <a routerLink="/content-2">Content 2</a> <a routerLink="/content-3">Content 3</a> <a routerLink="../other">Content 3</a> </div> <div> <router-outlet></router-outlet> </div> `, standalone: true, imports: [CommonModule, RouterModule],})class MyPageComponent {} @component({ template: `Content Page 1`, standalone: true,})class ContentOneComponent {} @component({ template: `Content Page 2`, standalone: true,})class ContentTwoComponent {} @component({ template: `Content Page 3`, standalone: true,})class ContentThreeComponent {} @component({ template: `Dashboard`, standalone: true,})class DashboardComponent {} const meta: Meta<MyPageComponent> = { title: 'MyPageComponent', component: MyPageComponent, tags: ['autodocs'], decorators: [ applicationConfig({ providers: [ provideLocationMocks(), provideRouter([ { path: '', component: DashboardComponent }, { path: 'content-1', component: ContentOneComponent }, { path: 'content-2', component: ContentTwoComponent }, { path: 'content-3', component: ContentThreeComponent }, ]), // provideStoryInitialUrl('content-1'), ], }), ], parameters: { layout: 'fullscreen', },}; export default meta;type Story = StoryObj<MyPageComponent>; export const Basic: Story = {}; export const WithInitialUrl: Story = { decorators: [ applicationConfig({ providers: [provideStoryInitialUrl('content-2')], }), ],}; export const WithInitialUrlArg: Story = { argTypes: { initialUrl: { control: { type: 'select', }, options: ['/content-1', '/content-2', '/content-3'], }, }, args: { initialUrl: '/content-3', }, decorators: [initialUrlFromArgs()],}; export const ArgChangeRerender: Story = { argTypes: { ...WithInitialUrlArg.argTypes, }, args: { ...WithInitialUrlArg.args, }, decorators: [initialUrlFromArgs({ rerender: true })],}; Also, I switched from using hash routes to just providing provideLocationMocks(), which seems to work fine for hash and non-hash routes. — Reply to this email directly, view it on GitHub <#28724 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAMYL7ZQS6TRYBRRA22ZJA3ZP4K4DAVCNFSM6AAAAABLRWSVYOVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMRTHE2TMMI> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[Marklb]

If you want to use args in the route data, routeParams or queryParams then I could probably make an example of that. I am thinking about if that would be something that would make sense to add to my package.

You can't just add an argument to the story and expect to use in the
template of a story. It won't compile. There seems to be two ways to solve
this. One is add inputs to the helper component. The other is to extend the
story interface. I've seen one example of it. Something like

Layout & { extraProp1: string }

This is sort of correct. By default, the story render function is like render: args => ({ props: args, ... }). If you don't provide a template, Storybook will add input/output bindings for input/output properties in props. If you return a template, in a story's render function, then anything in props is in the template's context. So, in most cases, you can add args and expect to use them in the template.

The reason it doesn't compile, when an arg is not a property of the component, is because you are using the recommended strict typescript rules. So, it is just types issues. My Stackblitz typescript config must not have the strict type checking, because I forgot that I didn't modify the types for it, but I just went back and updated the types in my previous snippet and Stackblitz.

Example:

@Component({ ... })
class MyComponent {
  @Input() foo?: string
  @Input() bar?: string
}

const meta: Meta<MyComponent> = {
  component: MyComponent,
  args: {
    foo: 'value1',
    bar: 'value2',
    other: 'value3', // Type error
  },
};

export default meta;
type Story = StoryObj<MyComponent>;

export const Basic: Story = {};

In that example, the code is technically valid, but the typescript types are not. To fix the typescript types, I can add an intersection type that has the properties that don't exist on the component.

@Component({ ... })
class MyComponent {
  @Input() foo?: string
  @Input() bar?: string
}

// I will use this for an properties not in `MyComponent`.
interface ExtraArgs {
  other?: string
}

// Intersection type, so `args` recognized the types of both.
type MyStoryArgs = MyComponent & ExtraArgs

const meta: Meta<MyStoryArgs> = {
  component: MyComponent,
  args: {
    foo: 'value1',
    bar: 'value2',
    other: 'value3', // Type error
  },
};

export default meta;
type Story = StoryObj<MyStoryArgs>;

export const Basic: Story = {};

The next problem I hit was to do with importing components for use.

This is something that I would have to see to answer, but I can try to explain sort of how the story template works.

I will use the following as an example:

@Component({
  selector: 'a-comp',
  template: '',
})
class AComponent {
  @Input() inp1?: string
}

@Component({
  selector: 'b-comp',
  template: '',
})
class BComponent { }

@Component({
  selector: 'c-comp',
  template: '',
  standalone: true,
})
class CComponent { }

const meta: Meta<AComponent> = {
  component: AComponent,
  decorators: [
    moduleMetadata({
      declarations: [BComponent],
      imports: [CComponent],
    }),
  ],
};

export default meta;
type Story = StoryObj<AComponent>;

export const Example: Story = {
  args: {
    inp1: 'a',
  },
  render: args => ({
    props: args,
    template: `
    	<a-comp [inp1]="inp1"></a-comp>
    	<b-comp></b-comp>
    	<c-comp></c-comp>
  	`,
  }),
};

In that snippet AComponent does not have to be added to the module metadata, because it is set to the story's component property and Storybook will handle adding it for you. BComponent is not standalone, so I need to declare it in the moduleMetadata declarations. CComponent is standalone, so I need to import it in the moduleMetadata imports.

The following is an overly simplified example of how Storybook creates the root Angular component:

// The result object representing the `Example` story would be something like this.
const story = {
  component: AComponent,
  moduleMetadata: {
    declarations: [BComponent],
    imports: [CComponent],
  },
  props: { inp1: 'a' },
  template: `
    <a-comp [inp1]="inp1"></a-comp>
    <b-comp></b-comp>
    <c-comp></c-comp>
  `,
}

// First, Storybook is going to create an NgModule, so it works with or without standalone.
const declarations: [
  // AComponent is not standalone, so it will get put in declarations.
  story.component,
  ...story.moduleMetadata.declarations,
],
const imports: [
  ...story.moduleMetadata.imports,
]
@NgModule({
  declarations: [ ...declarations ],
  imports: [ ...imports ],
  exports: [ ...declarations, ...imports ],
})
class StoryModule {}

// This would the component that the Angular app bootstraps.
@Component({
  // This component's template will be the one you provide or, if you don't provide one, it will be one Storybook generates for the `story.component`.
  template: story.template,
  // All declarations and imports will be available in this component's template, because the module exports both.
  imports: [ StoryModule ],
  standalone: true,
})
class StoryRootComponent {
  // The component has logic that add all `story.props` as instance properties, so they are available in the template context.
}

There is more to it, but I tried to give an idea of how I think about a story as an Angular component.

[IanTaiteLNR]

Thanks Mark, this is all excellent stuff.