Testing vuex Aktion, die ein asynchrones enthält

Question

[Dies ist eine Vue App, mit Vuex, erstellt mit vue-cli, mit Mokka, chai, karma, sinon]

Ich versuche Tests für meinen vuex Staat zu schaffen und ich möchte keinen Mock verwenden - eines meiner großen Ziele für diese Tests besteht darin, auch die API zu testen, von der die Daten kommen.

Ich versuche, die Dokumente für Chai-as-Versprochen zu folgen.

Dies ist eine Vereinfachung der vuex Aktion, die ich zu Test bin versucht:

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

Beachten Sie, dass die Anmeldung Aktion hat zwei Versprechen und nichts zurückgibt. Die Login-Aktion hat zwei Dinge: Sie setzt einen Zustand und ändert die Route.

Das Beispiel, das ich gesehen habe, dass die Verwendung von Chai-as-Versprochen erwartet, dass das Versprechen zurückgegeben wird. Das heißt:

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

Aber in meinem Fall login() gibt nichts zurück, und ich bin nicht sicher, was ich zurückkehren würde, wenn es tut.

Dies ist, was ich bisher:

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

Mein Mitarbeiter und ich kam mit der Lösung:

Die vuex Aktion das Versprechen zurückgeben muß, und sie können miteinander verkettet werden:

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"}; 
     }); 
}, 

Dann haben wir nicht brauchen chai-as-versprochen, weil der Test wie folgt aussieht:

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

Ich würde die Einlogg-Antwortmeldung zurück und zwei Tests machen. Ein um sicherzustellen, dass ungültige Anmeldeinformationen eine Fehlermeldung zurück, und ein, um sicherzustellen, dass gültige Anmeldeinformationen erfolgreich