Test l'action Vuex qui appelle api externe

Question

Dans mon projet, je Vue.js l'action Vuex suivante:

import { HTTP } from '@/services/http' 

export const actions = { 
    loginUser ({ commit }, params) { 
    HTTP.post(
     'v1/login', 
     { email: params.email, password: params.password } 
    ).then(response => { 
     localStorage.setItem('access_token', response.data.token) 
     commit('SET_USER', response.data) 
    }).catch(error => { 
     commit('SET_LOGIN_ERROR', error.response.data.error) 
    }) 
    } 
} 

J'utilise Mocha + Karma pour les tests unitaires. Comment puis-je tester cette action?

Answer 1

Il est important de simuler/bloquer les dépendances. Votre premier défi est de se moquer du service HTTP car, tel qu'il est écrit, vos tests ne passeront pas à moins que vous n'ayez une connexion Internet au serveur principal. Regardez dans dependency injection pour résoudre ce problème.

Pour tester les actions, j'ai emprunté l'idée de Vuex's suggestion. Créez un bout de la fonction commit qui accepte le type et la charge utile de chaque mutation appelée par l'action, puis comparez-la à ce qui est attendu. Si la liste des mutations attendues correspond à la liste des mutations, les appels de la pièce commit lorsque l'action est exécutée, l'action passe le test.

Ceci est un exemple trivial que je ne voudrais pas utiliser dans la production, mais il permet d'illustrer l'idée:

let count = 0 
let errors = [] 
let mutations = [ 
    { type: 'SET_USER', payload: 'whatever response.data is expected to be' } 
] 

function commit(type, payload) { 
    const mutation = mutations[count] 

    try { 
    expect(mutation.type).to.equal(type) 
    if (payload) { expect(mutation.payload).to.deep.equal(payload) } 
    } catch (error) { 
    errors.push(error) 
    } 

    count++ 
} 

actions.loginUser({ commit }, { email: 'fake@email.com', password: '12345' })