Vue.js 实现登录命令并访问 vuex 存储

发布于07月05日

我有一个登录过程，在向服务器发送请求并获得响应后，我会执行以下操作:

 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"的动作，知道吗？

推荐答案

在创建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存储将不存在.