Test l'action vuex qui contient un async

Question

[Ceci est une application Vue, en utilisant Vuex, créé avec vue-cli, en utilisant mocha, chaï, karma, sinon]

Je suis en train de créer des tests pour mon état de vuex et je ne veux pas utiliser un simulacre - un de mes grands objectifs pour ces tests est également de tester l'API à partir de laquelle les données proviennent. J'essaie de suivre les docs pour chai-comme-promis.

Ceci est une simplification de l'action vuex Je suis en train de tester:

const actions = { 
    login: (context, payload) => { 
    context.commit('setFlashMessage', ""); 
    axios.get("https://first-api-call") 
     .then((response) => { 
     axios.post("https://second-api-call") 
      .then((response) => { 
      router.push({ name: "Home"}); 
      context.commit('setFlashMessage', "Logged in successfully"); 
      context.commit('setLogin', response.data); 
     }); 
    }, 

Notez que l'action de connexion a deux promesses et ne retourne rien. L'action de connexion fait deux choses: elle définit un état et modifie l'itinéraire.

L'exemple que j'ai vu en utilisant chai-as-promise s'attend à ce que la promesse soit renvoyée. C'est:

var result = systemUnderTest(); 
return expect(result).to.eventually.equal(blah); 

Mais dans mon cas, login() ne retourne rien, et je ne suis pas sûr de ce que je retournerais si elle l'a fait.

C'est ce que j'ai jusqu'à présent:

import store from '@/src/store/store' 
describe('login',() => { 
    it('bad input',() => { 
    store.login({ username: "abcd", password: ""}); 
    // What is the test I should use? 
    } 
} 

Answer 1

Mon collègue et je suis venu avec la solution:

L'action vuex doit retourner la promesse, et ils peuvent être enchaînées:

login: (context, payload) => { 
    context.commit('setFlashMessage', ""); 
    return axios.get("https://first-api-call") 
     .then((response) => { 
      return axios.post("https://second-api-call") 
     }) 
     .then((response) => { 
      // etc... 
      router.push({ name: "Home"}); 
      context.commit('setFlashMessage', "Logged in successfully"); 
      context.commit('setLogin', response.data); 
      return {status: "success"}; 
     }); 
}, 

Alors on n'a pas besoin, comme chai promis parce que le test ressemble à ceci:

it('bad password',() => { 
    const result = store.dispatch("login", { username: userName, password: password + "bad" }); 
    return result.then((response) => { 
     expect(response).to.deep.equal({ status: "failed"}); 
     store.getters.getFlashMessage.should.equal("Error logging in"); 
    }); 
}); 

Answer 2

Je renvoie le message de réponse de connexion et de faire deux tests. L'un pour vous assurer que les informations d'identification non valides renvoient un message d'échec et un pour vous assurer que les informations d'identification valides se connecter avec succès