vue.js - 执行登录命令并访问vuex store

Question

我有一个登录过程，在向服务器发送请求并获得响应后，我这样做:

 this.$auth.setToken(response.data.token);
 this.$store.dispatch("setLoggedUser", {
     username: this.form.username
 });

现在我想在使用 cypress 进行测试时模拟这种行为，因此我不需要在每次运行测试时都实际登录。

所以我创建了一个命令:

Cypress.Commands.add("login", () => {
  cy
    .request({
      method: "POST",
      url: "http://localhost:8081/api/v1/login",
      body: {},
      headers: {
        Authorization: "Basic " + btoa("administrator:12345678")
      }
    })
    .then(resp => {
      window.localStorage.setItem("aq-username", "administrator");
    });

});

但我不知道如何模拟“setLoggedUser”操作，知道吗？

Answer 1

在您创建 vuex store 的应用代码中，您可以有条件地将其公开给 Cypress:

const store = new Vuex.Store({...})

// Cypress automatically sets window.Cypress by default
if (window.Cypress) {
  window.__store__ = store
}

然后在您的 Cypress 测试代码中:

cy.visit()
// wait for the store to initialize
cy.window().should('have.property', '__store__')

cy.window().then( win => {
  win.__store__.dispatch('myaction')
})

您可以将其添加为另一个自定义命令，但确保您首先访问过您的应用，否则该 vuex 商店将不存在。