#Angular #Fix #Ngrx

Go to fix

I use @ngrx/store at my day-to-day development. This post is not to share the benefits of using a state-management library. Instead, to share a fix for a possible unit tests mess up we might make along the way of using such libraries.

MockStore

In unit tests, we usually set our initial state as follows:

1
2
3
4
5
6
7
8
9
10
11
12
const initialState: AppState = {
    title: 'AshKeys',
    name: 'Sojiro De Tenken',
};

TestBed.configureTestingModule({
    imports: [TestModule],
    declarations: [AshKeysComponent],
    providers: [provideMockStore({ initialState })],
})
    .overrideTemplate(AshKeysComponent, '')
    .compileComponents();

This is good as long as we are fine writing units with the initial state values.

Updating the state in an iteration

There comes a scenario where we might have to update the said state for an iteration as follows:

1
2
3
mockStore.setState({
    title: 'ashokma.com',
});

As you might have guessed it already, this overrides the initialState and in turn we loose a property called name. >_O

Fix: state is undefined

Imagine name property as a state for some cases and there is a selector referring that particular state. In those cases, due to the above overriding, we encounter State is undefined error.

What I forgot to do is the following:

1
2
3
4
mockStore.setState({
    ...initialState,
    title: 'ashokma.com',
});

In this way, we keep whatever we had in the initialState undisturbed and update the ones we bother. \O/

#Angular #Fix #Ngrx