Vuex: Update examples with module namespace and add unit tests

[alvarengathomas]

First of all, thanks for the hard work on VueJS and Vuex, in the end of january 2017 our company will release a project that uses this frameworks and we are very satisfied with the simplicity and code cleanness of Vue.

We started building the application based on the shopping cart example in October 2016 and we had a hard time trying to separate modules in "namespaces" and to unit test the application, we follow the documentation and use vue-cli for scaffolding, but the unit tests wasn't working, we had to put a lot of effort and research to finally get things to work properly.

Therefore, my suggestion is to update the examples with this new namespace feature and add unit tests to the examples apps. I believe this will help many other developers to start using VueJS and Vuex.

If you guys consider this to be a important update I would love to do it, I just need a green light from the team!

[ktsn]

Hi, thanks for using Vue and Vuex in your project.
I think it is great idea to add the example of namespace feature and unit test. It would be appreciated if you work for it. 🙂

[learntoswim]

+1. I'd love to see some advanced testing with vuex actions (including mocking promises).

[alvarengathomas]

Thanks for the response guys, I will work on that!

[learntoswim]

@alvarengathomas Any progress to share?

[alvarengathomas]

Sorry guys, I'm really busy but I'm doing the unit tests in baby steps.

[alvarengathomas]

Finally I made the update in shopping cart example to work with module namespace (PR #890)
I will make the unit tests soon!

[Eder87rh]

@alvarengathomas do you have the namespace module test? or do you know where can i find an example of namespace module action?

[lukaszkups]

I'm also curious how to Unit Test with namespaced module actions

[adbci]

Hi everyone,
any news on this topic please ?
@alvarengathomas

[lukaszkups]

@adrienbucci what would you like to know? I've already written couple unit tests for my methods (while using namespaces)

[adbci]

Thanks @mrmnmly for your message.
I managed to get the namespaces option working, but I can't get my action testing working with this setup.

```
expect(jest.fn()).toHaveBeenCalledWith(expected)

Expected mock function to have been called with:
{"password": "123456", "username": "john"}
as argument 2, but it was called with
{}.
```

Same test is working without the store module setup.

Any idea maybe ?

Thanks

[adbci]

`
describe('Actions', () => {
const wrapperFactory = dataValues => shallow(loginUtilisateur, {
data: {...dataValues},
store,
localVue,
});

state = {
    isLoggedIn: false,
};

actions = {
    login: jest.fn(),
};

beforeEach(() => {
    // initialisation des mocks pour vuex
    store = new Vuex.Store({
        modules: {
            auth: {
                namespaced: true,
                state,
                actions,
            },
        },
    });
});

it('should render correctly', () => {
    const wrapper = wrapperFactory();
    expect(wrapper.html()).toMatchSnapshot();
});

it('should call login action on click on login button', () => {
    const data = {
        user: {
            username: 'utilisateur',
            password: '123456',
        },
    };

    const wrapper = wrapperFactory(data);
    const loginButton = wrapper.find('#login');
    loginButton.trigger('click');
    expect(actions.login).toHaveBeenCalledWith(expect.any(Object), data.user, undefined);
});

});`

[kiaking]

Currently, cart example already uses the module. Will closing this one 🤝