vendredi 2 mars 2018

Vuex actions testing with Sinon

Stucked and cannot figure this out.... What I am trying to do is simply make sure that my Vue component calls store actions when mounted. Here is a simple test which mocks getUsers() action in the Vuex store.

import {shallow, createLocalVue} from '@vue/test-utils';
import UserManager from '../modules/UserManager/components/index.vue';
import Vuex from 'vuex';
import Vuetify from 'vuetify';
import sinon from 'sinon';
import {expect} from 'chai';

const localVue = createLocalVue();

localVue.use(Vuex);
localVue.use(Vuetify);

describe('UserManager', () => {

    let store, actions;

    actions = {
        getUsers: sinon.stub()
    };

    beforeEach(() => {
        store = new Vuex.Store({
            actions
        });
    });

    it('calls getUsers action', () => {
        const wrapper = shallow(UserManager, {store, localVue});
        console.log("DEBUG: Testing that action was called");
        expect(actions.getUsers.calledOnce).to.equal(true);
    });
});

getUsers action simply commits a simple mutation:

getUsers: ({state, getters, commit, dispatch}) => {

    console.log("DEBUG: getUsers action called");

    return new Promise((resolve, reject) => {

        commit('setUsersLoading', true);

        resolve();
    });
},

When running the test we get:

1) UserManager
DEBUG: getUsers action called
DEBUG: Testing that action was called
  calls getUsers action:

  AssertionError: expected false to equal true
  + expected - actual

  -false
  +true

Why is this failing?

Bonus question: When I add async action into the getUsers action such as axios request how does one make sure than action getUsers() has been completed i.e. how do you check that promise returned from the action has been resolved before you start asserting anything?

Aucun commentaire:

Enregistrer un commentaire