Unit test connectTo - State Management

Framework Knowledge
1

Hi everybody,

We’re start using Aurelia’s Store for State Management. It’s pretty straightforward, we have no issues dispatching /listening to State changes whatsoever.

My problem is Unit Testing, we’re using Jasmine/Karma and I can’t get notified after I dispatch something.

My container is something like this:

    @autoinject()
    @connectTo<IWhatIfState>({
        selector: {
            bSelectedScenario: store => store.state.pipe(pluck("selectedScenario"), distinctUntilChanged()),
        },
    })
    export class WhatIfContentHeader {
        ...

and my unit test goes like:

it("Saves the job edition - saveEditSection()", async () => {
        ...
        //this sets a list of Scenarios into the State - it works
        await sut.store.dispatch(fetchViewModelAction.name, 1, 1);
        //this also works, it finds my scenario that was previously set on State (method above)
        await sut.store.dispatch(setSelectedScenarioAction.name, 1);

       //at this point I should be able to use bSelectedScenario, but inside saveEditSection it is undefined
        await sut.saveEditSection();
    });

FYI: my setSelectedScenarioAction method does the job correctly, the reducer returns the state with selectedScenario

It really seems like the @connectTo() is not working (being notified)

Thanks in advance

1 Like
2

Its because of the way how connectTo grabs the instance of the Store https://github.com/aurelia/store/issues/56

2 Likes
3

not a problem for me, worked like a charm!

image
image900×474 27.6 KB

the controller:

image
image981×136 6.25 KB

plain text in case somebody want o copy/paste it:
(don’t forget to sut.bind() so it triggers the State the first time)

import { Container } from "aurelia-framework";
import { Store } from "aurelia-store";
import { WhatIfContentHeader } from "../../../../../src/container/tab-content/header/what-if-content-header";
import { INITIAL_STATE, IWhatIfState } from "../../../../../src/state/what-if-state";

fdescribe("The WhatIfContentHeader component", () => {
    let sut: any;

    beforeEach(async () => {
        const container = new Container().makeGlobal();
        const store = new Store<IWhatIfState>({ INITIAL_STATE, selectedScenario: { id: 123 } });
        container.registerInstance(Store, store);
        await import("../../../../../src/container/tab-content/header/what-if-content-header");
        sut = container.get(WhatIfContentHeader);
        (<any>sut).bind();
    });

    it("Saves the job edition - saveEditSection()", async () => {
        await sut.saveEditSection();
        console.log(sut.bSelectedScenario);
    });
});

thanks @zewa666!

4 Likes
4

You’re welcome and thx for the nice summary

2 Likes
5

Thanks for the code example. What’s fdescribe though?

1 Like
6

most likely a left-over. If you prepend describe/it with f it will force only those to execute. Likewise if you prepend it with x (xit/xdescribe) it will skip these on the execution

2 Likes
7

Hi,

Sorry, I have plenty other tests, “f” makes wallaby/karma run only this suite :wink: I forgot to remove before posting here.

1 Like
8

One more thing with regards to the actual test. There is a helper method callled executeSteps which can be awaited and takes a store plus n steps. Each one is a function which gets the resulting state so you can expect things with it and dispatch the next action. Take a look at the unit tests of the Store plugin itself for an example

2 Likes
9

good point, we’ll take a look, thank you

2 Likes