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

Question

Does anyone know how or have links for using StoryBook & Angular with NGRX Store ?

I have followed the StoryBook tutorial but still cannot figure out how to use StoryBook with NGRX Store. I can use StoryBook with Angular Dumb Components fine. I need to be able to set the NGRX Store State for the stories of my Nested components.

eg. In my SmartComponent I have:

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

In the Story I have:

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

As Đorđe Petrović commented, you can use provideMockStore to achieve this.

Here's an example:

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