angular - 如何在 StoryBook 和 Angular 测试中设置 NGRX Store 的状态？

Question

有谁知道如何将 StoryBook 和 Angular 与 NGRX 商店一起使用或有链接吗？

我已经按照 StoryBook 教程进行操作，但仍然无法弄清楚如何将 StoryBook 与 NGRX Store 一起使用。我可以很好地使用 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 })
      ]
    })
  ]
}