2017-11-23 6 views
0

Vor der Verwendung von vuex Modulen waren meine Mutationstests OK:Wie Mutationen zu testen, wenn vuex Module

import mutations from '@/vuex/mutations.js' 
import vueAuthInstance from '@/services/auth.js' 
import { IS_AUTHENTICATED, CURRENT_USER_ID } from '@/vuex/mutation_types.js' 

describe('mutations.js',() => { 
    var state 
    beforeEach(() => { 
    state = { 
     isAuthenticated: vueAuthInstance.isAuthenticated(), 
     currentUserId: '' 
    } 
    }) 

    describe('IS_AUTHENTICATED',() => { 
    it('should set authentication status',() => { 
     state.isAuthenticated = false 
     mutations[IS_AUTHENTICATED](state, {isAuthenticated: true}) 
     expect(state.isAuthenticated).to.eql(true) 
    }) 
    }) 
    ... 

}) 

Jetzt habe ich meine vuex Ordner Refactoring, mein Zustand und Mutationen innerhalb jeder vuex/Module sind /../ index.js Datei

 src 
     |_ vuex 
     | L_ modules 
     |   L_ login 
     |    |_ index.js 
     |    |_ actions.js 
     |    |_ getters.js 
     |    |_ mutation_types.js 
     |_ App.vue 
     |_ main.js 

vuex/modules/login/index.js

import Vue from 'vue' 
import Vuex from 'vuex' 
import actions from './actions' 
import getters from './getters' 
import * as types from './mutation_types' 
import vueAuthInstance from '@/services/auth.js' 
Vue.use(Vuex) 

const state = { 
    isAuthenticated: vueAuthInstance.isAuthenticated(), 
    currentUserId: '' 
} 

const mutations = { 
    [types.IS_AUTHENTICATED] (state, payload) { 
    state.isAuthenticated = payload.isAuthenticated 
    }, 
    ... 
} 

export default { 
    state, 
    mutations, 
    actions, 
    getters 
} 

Withe ein vuex/store.js

import Vue from 'vue' 
import Vuex from 'vuex' 
import login from '@/vuex/modules/login' 
// import other modules 

Vue.use(Vuex) 

export default new Vuex.Store({ 
    modules: { 
    login, 
    ... (other modules) 
    } 
}) 

diese neue Struktur in Rechnung zu tragen, schrieb ich das Gerät zu testen, wie folgend:

test/unit/specs/vuex/modules/login/index. spec.js

import { mutations } from '@/vuex/modules/login/index.js' 
import vueAuthInstance from '@/services/auth.js' 
import types from '@/vuex/modules/login/mutation_types.js' 

describe('mutations.js',() => { 
    var state 
    beforeEach(() => { 
    state = { 
     isAuthenticated: vueAuthInstance.isAuthenticated(), 
     currentUserId: '' 
    } 
    }) 

    describe('IS_AUTHENTICATED',() => { 
    it('should set authentication status',() => { 
     state.isAuthenticated = false 
     mutations[types.IS_AUTHENTICATED](state, {isAuthenticated: true}) 
     expect(state.isAuthenticated).to.eql(true) 
    }) 
    }) 

}) 

Und ich erhalte eine Fehlermeldung, auf der Mutation:

✗ should set authentication status 
    TypeError: Cannot read property 'IS_AUTHENTICATED' of undefined 

Ich habe versucht, die Einfuhr {Mutationen} Anweisung und Import direkt die store.js zu ändern, in der die Module definiert sind, und store._mutations verwenden,

LOG: 'MUTATIONS: ', Object{IS_AUTHENTICATED: [function wrappedMutationHandler(payload) { ... }], ...} 

store._mutations.IS_AUTHENTICATED0 verwenden, scheint zu funktionieren (Ich weiß nicht warum ein Array? ..), aber etwas ist mit dieser Funktion falsch und Staat, Nutzlast args, da der Test nicht

import store from '@/vuex/store' 
import vueAuthInstance from '@/services/auth.js' 

describe('mutations.js',() => { 
    var state 
    beforeEach(() => { 
    state = { 
     isAuthenticated: vueAuthInstance.isAuthenticated(), 
     currentUserId: '' 
    } 
    }) 

    describe('IS_AUTHENTICATED',() => { 
    it('should set authentication status',() => { 
     state.isAuthenticated = false 
     console.log('MUTATIONS: ', store._mutations.IS_AUTHENTICATED()) 
     store._mutations.IS_AUTHENTICATED[0](state, {isAuthenticated: true}) 
     expect(state.isAuthenticated).to.eql(true) 
    }) 
    }) 
    ... 
}) 


1) should set authentication status 
    mutations.js IS_AUTHENTICATED 
    AssertionError: expected false to deeply equal true 

ich die übergebenen args-Datei auf die Mutation in dem index.js geprüft hindurchgeht

const mutations = { 
    [types.IS_AUTHENTICATED] (state, payload) { 
    console.log('MUTATION state: ', state) 
    console.log('MUTATION payload: ', payload) 
    state.isAuthenticated = payload.isAuthenticated 
    }, 
    [types.CURRENT_USER_ID] (state, payload) { 
    state.currentUserId = payload.currentUserId 
    } 
} 

Und. Ich habe nicht die übergebenen Werte arg sehen, scheint es, dass der Staat args der einzige übergebenen Wert von meinem Test:

LOG: 'MUTATION state: ', Object{isAuthenticated: false, currentUserId: ''} 
LOG: 'MUTATION payload: ', Object{isAuthenticated: false, currentUserId: ''} 

Was ist mit diesem Code falsch? Wie gehe ich vor, um die Mutationen in diesem Fall mit vuex-Modulen zu testen?

Dank für Feedback

Antwort

0

fand ich einen Weg, um die Mutation mit vuex Module zu testen, aber ich weiß nicht, ob es der beste Weg ist ...

mein Test ist ganz einfach, zu speichern verwenden. verpflichten, da ich nicht direkt die Mutation Handler aufrufen können, und ich importieren nur die vuex/store

src/test/unit/specs/modules/login/index.js

import store from '@/vuex/store' 

describe('mutations.js',() => { 
    describe('IS_AUTHENTICATED',() => { 
    it('should set authentication status',() => { 
     store.commit('IS_AUTHENTICATED', {isAuthenticated: true}) 
     expect(store.state.login.isAuthenticated).to.eql(true) 
    }) 
    }) 
    ... 
})