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

Question

有谁知道如何使用 StoryBook 和 Angular 与 NGRX Store 或有链接吗？

我已遵循 StoryBook 教程，但仍然无法弄清楚如何将 StoryBook 与 NGRX Store 一起使用。我可以很好地使用 StoryBook 和 Angular Dumb 组件。我需要能够为嵌套组件的故事设置 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

正如 \xc4\x90or\xc4\x91e Petrovi\xc4\x87 评论的那样，您可以使用 ProvideMockStore 来实现这一点。

\n

这是一个例子：

\n

import { provideMockStore } from '@ngrx/store/testing';\n\n\n// your desired data\nconst example_data = {\n  foo: bar,\n};\n\n// the state for the mockStore\nconst initialState = {\n  state_key: example_data\n};\n\n\nexport default {\n  title: 'YourComponent',\n  component: YourComponent,\n  decorators: [\n    moduleMetadata({\n      providers: [\n        provideMockStore({ initialState })\n      ]\n    })\n  ]\n}\n

\n