2017-11-23 20 views
0

를 사용하는 경우 돌연변이를 테스트하는 방법, 내 돌연변이 시험은 확인했다 : 는 vuex 모듈을 사용하기 전에 vuex 모듈

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) 
    }) 
    }) 
    ... 

}) 

지금 내 상태와 돌연변이가 각 vuex/모듈 안에있는 내 vuex 폴더를 리팩토링 /../ 하는 index.js 파일

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

vuex/모듈/로그인 /하는 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 
} 

테스트/단위/스펙/vuex/모듈/로그인/색인 : 14,가는 가지가 vuex가/

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) 
    } 
}) 

계정이 새로운 구조를 이용하려면 store.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) 
    }) 
    }) 

}) 

spec.js 그리고 돌연변이에 오류가 발생합니다 :

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

나는 store._mutations.IS_AUTHENTICATED0를 사용

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

이 작동하는 것 같다 직접 모듈이 정의되는 store.js를 가져 오기 {돌연변이} 문, 수입을 변경하고 store._mutations을 사용하려 , 왜 배열인지 모르시겠습니까? ..)하지만 테스트가

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 

를 통과하지 못한 내가 체크하는 index.js의 돌연변이에 전달 된 인수는 파일로 뭔가,이 기능과 상태, 페이로드 인수에 문제가 있습니다

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 
    } 
} 

그리고. 전달 된 arg 값이 표시되지 않습니다. 상태 인수가 내 테스트에서 유일한 전달 된 값인 것 같습니다.

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

이 코드의 잘못된 점은 무엇입니까? 어떻게하면 vuex 모듈을 사용하여이 경우에 변이를 테스트 할 수 있을까요?

내 테스트 저장소를 사용, 매우 간단합니다 ... 피드백

답변

0

에 대한

덕분에 나는 vuex 모듈을 사용하여 돌연변이를 테스트하는 방법을 발견하지만 가장 좋은 방법 모르겠어요. 나는 돌연변이 핸들러를 직접 호출 할 수 없습니다로 커밋, 나는 단지 vuex/저장을

SRC/테스트/단위/사양/모듈/로그인 /하는 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) 
    }) 
    }) 
    ... 
})