如何在 StoryBook 和 Angular 测试中设置 NGRX 存储的状态？

Question

有人知道如何使用 StoryBook 和 Angular 以及 NGRX 商店吗？

我已经按照 StoryBook 教程进行操作，但仍然无法弄清楚如何将 StoryBook 与 NGRX 商店一起使用。我可以将 StoryBook 与 Angular Dumb Components 一起使用。我需要能够为我的嵌套组件的故事设置 NGRX 存储状态。

例如。在我的 SmartComponent 我有：

this.accountDebtor$ = this.coreStore.select( coreSelector.selectAccountDebtorState );

在故事中我有：

export const LoadedAccountPanel = (args) => ({
 component: AccountComponent,
 props: args,
});
LoadedAccountPanel.args = {
 panelData: {},
 accountDebtor$: <-- How do I set the State so this gets set using the store ???,
};

Answer 1

正如 Đorđe Petrović 评论的那样，您可以使用 provideMockStore 来实现这一点。

举个例子：

import { provideMockStore } from '@ngrx/store/testing';


// your desired data
const example_data = {
  foo: bar,
};

// the state for the mockStore
const initialState = {
  state_key: example_data
};


export default {
  title: 'YourComponent',
  component: YourComponent,
  decorators: [
    moduleMetadata({
      providers: [
        provideMockStore({ initialState })
      ]
    })
  ]
}

如何在 StoryBook 和 Angular 测试中设置 NGRX 存储的状态？

How do I Set the State of NGRX Store in StoryBook & Angular tests?

angular

ngrx

ngrx-store

storybook