🚀[FEATURE]: Mock state

[kembala]

Relevant Package

This feature request is for @ngxs/testing @ngxs/store

Description

A clear and concise description of the problem or missing capability...

Mocking state

Describe the problem you are trying to solve

Please describe the problem. If possible please substantiate it with the use cases you want to address.

We are using Storybook for component driven development (CDD). Ngxs is great to abstract our business logic from the presentation, but there is no capability to properly mock the store values when testing different states of components. Writing a plugin to log and omit action handling does the job on the outputs, but there is no such solution for the inputs.

This would make Ngxs+Storybook a killer tool for CDD.

Describe the solution you'd like

If you have a solution in mind, please describe it.

Ability to mock the NgxsStore to provide example data for testing.

Describe alternatives you've considered

Have you considered any alternative solutions or workarounds?

I tried acquiring and exposing a global injector to get reference to the store and dispatch an UpdateState action or call the store.reset funciton. Tried using the ngxs/testing plugin, which is outdated for Angular 10 and provided only a TestBed which was not used from the Storybook module itself.

I do realize this is a cross issue of ngxs/storybook. Curious, if any of you have a solution already used for achieving such result.

[kembala]

There are a few feature requests for mocking all without proper solution unfortunatelly.

[kembala]

#482

[arturovt]

Hey, I apologize for the long response.

The store.reset is a good alternative for mocking states in unit tests (I use it when testing components that select some data from store). I usually have state mocks that I fill in into store.reset.

Reading through your issue I ain't sure what alternative you're looking for since store.reset already does the necessary stuff. Since the only thing you have to do is to initialize the application and call store.reset.

If you've got routing and feature states in the storybook then a good alternative is to listen to the UpdateState action and do store.reset every time the UpdateState is dispatched:

class StoreUpdater {
  constructor(actions$: Actions, store: Store) {
    actions$
      .pipe(ofActionDispatched(UpdateState))
      .subscribe((ctx: ActionContext<UpdateState>) => {
        const addedStates = ctx.action.addedStates;
        const mockedAddedStates = Object.keys(addedStates).reduce(
          (accumulator, key) => {
            // The `key` is a feature state name, e.g. `router`.
            accumulator[key] = getMockForState(key);
            return accumulator;
          },
          {}
        );
        store.reset({ ...store.snapshot(), ...mockedAddedStates });
      });
  }
}

I'm closing this issue due to the fact that:

• There has not been much support from other community members
• The proposed feature is not clear enough to be implemented

Thanks again

• NGXS Core Team ❤️