实现登录命令并访问vuex存储 [英] Implement login command and access vuex store

问题描述

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

I have a login process where after sending a request to the server and getting a response, I do this:

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

现在，我想在使用赛普拉斯测试时模仿这种行为，所以我不需要每次运行测试时实际上都登录。

Now I'd like to emulate this behavior when testing with cypress, so i don't need to actually login each time I run a test.

所以我创建了一个命令：

So I've created a command:

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操作，知道吗？

But I don't know how to emulate the "setLoggedUser" actions, any idea?

推荐答案

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

In your app code where you create the vuex store, you can conditionally expose it to Cypress:

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

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

然后在赛普拉斯测试代码中：

then in your Cypress test code:

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

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

您可以将其添加为另一个自定义命令，但确保您先访问了您的应用因为那个vuex商店将不存在

You can add that as another custom command, but ensure you have visited your app first since that vuex store won't exist otherwise.

这篇关于实现登录命令并访问vuex存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！