Vue.js w vuex: verspottet Aktion nicht ausgeführt

Question

Ich versuche, die folgende App.vue Komponente zu testen, wenn ein Klick-Ereignis auf dem Logout-vue-Router Link ausgelöst wird ...

App.vue

Um das Abmelden zu testen, habe ich den isAuthenticated-Status auf true gesetzt, sodass der Link zum Abmelden des Routers angezeigt wird und ich das Click-Ereignis auslösen kann.

Ich erwarte, dass die Aktion Abmeldung aufgerufen wurde .. aber es ist nicht ... warum?

App.spec.js

import Vue from 'vue' 
    import Vuex from 'vuex' 
    import VueRouter from 'vue-router' 

    import App from '@/App' 

    import router from '@/router/index' 

    import { mount } from 'avoriaz' 
    import sinon from 'sinon' 

    Vue.use(Vuex) 
    Vue.use(VueRouter) 

    describe('App.vue',() => { 
     let actions 
     let getters 
     let store 

     beforeEach(() => { 
     getters = { 
      isAuthenticated: (state) => { 
      return state.isAuthenticated 
      } 
     } 
     actions = { 
      logout: sinon.stub().returns(Promise.resolve(true)) 
     } 
     store = new Vuex.Store({ 
      getters, 
      actions, 
      state: { 
      isAuthenticated: true, 
      currentUserId: '' 
      } 
     }) 
     router 
     }) 

     it('calls logout method',() => { 
     const wrapper = mount(App, { router, store }) 
     console.log('navigation: ', wrapper.find('ul.navigation')[0].element) 
     const logoutLink = wrapper.find('#logout a')[0] 
     logoutLink.trigger('click') 
     expect(actions.logout.calledOnce).to.equal(true) 
     }) 
    }) 

vuex/actions.js

import { IS_AUTHENTICATED, CURRENT_USER_ID } from './mutation_types' 
import getters from './getters' 

export default { 

    logout: ({commit}) => { 
    commit(IS_AUTHENTICATED, { isAuthenticated: false }) 
    commit(CURRENT_USER_ID, { currentUserId: '' }) 
    return true 
    } 
} 

vuex/mutations.js

import * as types from './mutation_types' 
import getters from './getters' 

export default { 
    [types.IS_AUTHENTICATED] (state, payload) { 
    state.isAuthenticated = payload.isAuthenticated 
    }, 
    [types.CURRENT_USER_ID] (state, payload) { 
    state.currentUserId = payload.currentUserId 
    } 
} 

vuex/getters.js

export default { 
    isAuthenticated: (state) => { 
    return state.isAuthenticated 
    } 
} 

Answer 1

Schließlich fand ich einen Weg, um es zu testen:

import Vue from 'vue' 
    import Vuex from 'vuex' 
    import VueRouter from 'vue-router' 

    import App from '@/App' 

    import router from '@/router/index' 

    import { mount } from 'avoriaz' 
    import sinon from 'sinon' 

    Vue.use(Vuex) 
    Vue.use(VueRouter) 

    describe('App.vue',() => { 
     let actions 
     let getters 
     let store 
     let sandbox 
     let routerPush 

     beforeEach(() => { 
     sandbox = sinon.sandbox.create() 
     getters = { 
      isAuthenticated: (state) => { 
      return state.isAuthenticated 
      } 
     } 
     actions = { 
      logout: sandbox.stub().returns(Promise.resolve(true)) 
     } 
     store = new Vuex.Store({ 
      getters, 
      state: { 
      isAuthenticated: true, 
      currentUserId: '' 
      }, 
      actions 
     }) 
     router 
     }) 
     afterEach(() => { 
     sandbox.restore() 
     }) 

     it('calls logout method', (done) => { 
     const wrapper = mount(App, { store, router }) 
     routerPush = sandbox.spy(wrapper.vm.$router, 'push') 
     const logoutLink = wrapper.find('#logout a')[0] 
     logoutLink.trigger('click') 
     wrapper.vm.$nextTick(() => { 
      expect(actions.logout.calledOnce).to.equal(true) 
      actions.logout().then(() => { 
      expect(routerPush).to.have.been.calledWith('/home') 
      }) 
      done() 
     }) 
     }) 
    })