# Unit test connectTo - State Management

**URL:** <https://discourse.aurelia.io/t/unit-test-connectto-state-management/3157>\
**Category:** Framework Knowledge\
**Created:** [January 15, 2020, 9:50pm UTC](https://discourse.aurelia.io/t/unit-test-connectto-state-management/3157 "2020-01-15T21:50:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![davicoradini](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davicoradini/32/1676_2.png) [@davicoradini](https://discourse.aurelia.io/u/davicoradini)\
**Post date:** [January 15, 2020, 9:50pm UTC](https://discourse.aurelia.io/t/unit-test-connectto-state-management/3157/1 "2020-01-15T21:50:55Z")

</div>

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:

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

```

and my unit test goes like:

```auto
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

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 16, 2020, 5:37am UTC](https://discourse.aurelia.io/t/unit-test-connectto-state-management/3157/2 "2020-01-16T05:37:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![davicoradini](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davicoradini/32/1676_2.png) [@davicoradini](https://discourse.aurelia.io/u/davicoradini)\
**Post date:** [January 16, 2020, 3:27pm UTC](https://discourse.aurelia.io/t/unit-test-connectto-state-management/3157/3 "2020-01-16T15:27:51Z")

</div>

not a problem for me, worked like a charm!

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/f/f6f03f94c17e178581ed1885c46f1e0b7b826951.png)

the controller:

 ![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/7/75d832e68d8de013b07bd95d3d8da2197503dc6b.png)

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

```auto
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!

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 16, 2020, 3:47pm UTC](https://discourse.aurelia.io/t/unit-test-connectto-state-management/3157/4 "2020-01-16T15:47:26Z")

</div>

You’re welcome and thx for the nice summary

---

<div class="post-metadata">

**Author:** ![khuongduybui](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/khuongduybui/32/44_2.png) [@khuongduybui](https://discourse.aurelia.io/u/khuongduybui)\
**Post date:** [January 16, 2020, 6:54pm UTC](https://discourse.aurelia.io/t/unit-test-connectto-state-management/3157/5 "2020-01-16T18:54:22Z")

</div>

> [@davicoradini](#):
>
> fdescribe

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

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 16, 2020, 7:02pm UTC](https://discourse.aurelia.io/t/unit-test-connectto-state-management/3157/6 "2020-01-16T19:02:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![davicoradini](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davicoradini/32/1676_2.png) [@davicoradini](https://discourse.aurelia.io/u/davicoradini)\
**Post date:** [January 16, 2020, 7:45pm UTC](https://discourse.aurelia.io/t/unit-test-connectto-state-management/3157/7 "2020-01-16T19:45:21Z")

</div>

Hi,

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

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [January 16, 2020, 9:27pm UTC](https://discourse.aurelia.io/t/unit-test-connectto-state-management/3157/8 "2020-01-16T21:27:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![davicoradini](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davicoradini/32/1676_2.png) [@davicoradini](https://discourse.aurelia.io/u/davicoradini)\
**Post date:** [January 16, 2020, 9:52pm UTC](https://discourse.aurelia.io/t/unit-test-connectto-state-management/3157/9 "2020-01-16T21:52:32Z")

</div>

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