Issue showing Spartacus components in Storybook

Question

We're running into an issue with the combination of Spartacus, Angular and Storybook.

For those unfamiliar: Storybook is a UI development environment that is able to show off UI components in an isolated manner with some playground functionality (more info here: https://storybook.js.org/docs/basics/introduction/). We want to be able to show off some UI components imported from the Spartacus library in Storybook, to be able to create a consistent narrative with our Visual Designer about the UI elements we will be working with.

Storybook has Angular support, and for simple components it's enough to configure Storybook to look at a defined component (either custom-made or from a library), and it will show it in the Storybook environment. For more complex Angular components, it's also possible to give a 'mock' context through module metadata which can contain things like imports and declarations, much like a regular Angular module (more info here: https://www.learnstorybook.com/intro-to-storybook/angular/en/composite-component/).

When simply pointing to a component from Spartacus in Storybook, without any additional data a lot of errors will appear about missing declarations. Example in this screenshot:

Storybook errors showing missing declarations of 'cxTranslate' and 'cx-icon'

By importing modules containing the missing declarations through the module metadata a lot of these issues seem to be resolved. However our real issue comes in with pipes (like the 'cxTranslate' pipe mentioned in the screenshot). Because Spartacus uses pipes like the cx-translate/TranslatePipe in pretty much all component templates, they are necessary to import for the components to work properly. However, adding these pipes to the module metadata declarations for Storybook as shown in the file below does not (fully) resolve the issue.

searchbox.stories.ts:


import { IconModule, HighlightPipe, MediaModule, SearchBoxComponentService } from '@spartacus/storefront';
import { RouterModule } from '@angular/router';
import { UrlPipe, TranslatePipe } from '@spartacus/core';
import { CustomSearchboxComponent } from 'src/app/general/custom-searchbox/custom-searchbox.component';

export default {
  title: 'Searchbox',
  decorators: [
    moduleMetadata({
      imports: [IconModule, RouterModule, MediaModule],
      declarations: [TranslatePipe, HighlightPipe, UrlPipe],
      providers: [SearchBoxComponentService]
    }),
  ]
};

export const Default = () => ({
  component: CustomSearchboxComponent
});

The Storybook page for this component will no longer complain about the pipe name not existing, but it will show a blank component in the Storybook environment and result in an error in the DevTools console (see below).

DevTools console showing ERROR NullInjectorError: StaticInjectorError(DynamicModule)[store]

Many of the general Angular problems resulting in this error I could find info about online seemed to be an issue of imports/declarations missing or being used improperly. However, I have not been able to find a configuration to make a Spartacus component work in Storybook.

Could anybody help shed some light on this issue?

L Tiger L Tiger · Accepted Answer · 2020-03-18T20:29:19

I can't be sure for certain because I have no experience using Storybook with a Spartacus component.

That said, this error looks familiar. To me it looks like an error related to the ngrx store. Since you provide the actual SearchBoxComponentService which has a dependency on a facade for the NgRx store I think it is possibly the cause.

To solve this you could provide a mock for for the SearchBoxComponentService like:

{ provide: SearchBoxComponentService, useClass: MockSearchBoxComponentService }

the mock is just a dummy with no logic.

Alternatively you could try creating an empty Ngrx store https://github.com/storybookjs/storybook/issues/3217.

Hope this helps!

Issue showing Spartacus components in Storybook

1 Answers