在 Storybook 中显示 Spartacus 组件的问题答案

【问题标题】：Issue showing Spartacus components in Storybook在 Storybook 中显示 Spartacus 组件的问题
【发布时间】：2020-06-23 06:38:45
【问题描述】：

我们遇到了 Spartacus、Angular 和 Storybook 组合的问题。

对于那些不熟悉的人：Storybook 是一个 UI 开发环境，它能够以孤立的方式展示 UI 组件，并带有一些游乐场功能（更多信息在这里：https://storybook.js.org/docs/basics/introduction/）。我们希望能够在 Storybook 中展示从 Spartacus 库中导入的一些 UI 组件，以便能够与我们的视觉设计师就我们将使用的 UI 元素创建一致的叙述。

Storybook 具有 Angular 支持，对于简单的组件，只需将 Storybook 配置为查看已定义的组件（定制的或来自库的），它就会在 Storybook 环境中显示它。对于更复杂的 Angular 组件，还可以通过模块元数据提供“模拟”上下文，该元数据可以包含诸如导入和声明之类的内容，就像常规 Angular 模块一样（更多信息：https://www.learnstorybook.com/intro-to-storybook/angular/en/composite-component/）。

在 Storybook 中简单地指向 Spartacus 中的组件时，如果没有任何其他数据，则会出现很多关于缺少声明的错误。此屏幕截图中的示例：

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

通过模块元数据导入包含缺失声明的模块，很多这些问题似乎都得到了解决。然而，我们真正的问题在于管道（如屏幕截图中提到的“cxTranslate”管道）。因为 Spartacus 在几乎所有组件模板中都使用像 cx-translate/TranslatePipe 这样的管道，所以必须导入它们才能使组件正常工作。但是，如下文所示，将这些管道添加到 Storybook 的模块元数据声明中并不能（完全）解决问题。

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
});

该组件的 Storybook 页面将不再抱怨管道名称不存在，但会在 Storybook 环境中显示空白组件并导致 DevTools 控制台出错（见下文）。

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

许多导致此错误的一般 Angular 问题我可以在网上找到有关信息，这似乎是导入/声明丢失或使用不当的问题。但是，我无法找到使 Spartacus 组件在 Storybook 中工作的配置。

有人可以帮忙解释一下这个问题吗？

【问题讨论】：

标签： angular storybook spartacus-storefront

【解决方案1】：

我无法确定，因为我没有使用带有 Spartacus 组件的 Storybook 的经验。

也就是说，这个错误看起来很熟悉。对我来说，这看起来像是与 ngrx 商店相关的错误。由于您提供了实际的SearchBoxComponentService，它依赖于 NgRx 商店的外观，我认为这可能是原因。

要解决这个问题，您可以为 SearchBoxComponentService 提供一个模拟，例如：

{ provide: SearchBoxComponentService, useClass: MockSearchBoxComponentService }

模拟只是一个没有逻辑的假人。

或者，您可以尝试创建一个空的 Ngrx 存储 https://github.com/storybookjs/storybook/issues/3217。

希望这会有所帮助！

【讨论】：