Question

使用Cypress.io进行测试我想在Nuxt应用程序上触发“存根”登录。

我尝试对登录名和用户详细信息XHR调用进行存根处理，从而触发了nuxt-auth模块。

我使用了一个自定义插件将Nuxt应用程序的上下文公开给赛普拉斯。 似乎成功。

/plugins/cypress.js

const isCypress = typeof window.Cypress !== 'undefined'
export default context => {
  if (isCypress) {
    window.nuxtApp = context
  }
}

在赛普拉斯规格文件中，我将其称为nuxt-auth的$auth.loginWith('local', {…})，该文件似乎是将Vuex $state.loggedIn设置为true，并用我的灯具文件的内容来设置用户对象。

我的Cypress登录命令示例

Cypress.Commands.add('login', () => {
  // Use as cy.login()
  cy.server()
  cy.fixture('userLogin').as('userLoginJson')
  cy.fixture('userDetails').as('userDetailsJson')
  cy.route({
    method: 'POST',
    url: '/api/auth/login',
    response: '@userLoginJson'
  }).as('postLogin')
  cy.route({
    method: 'GET',
    url: '/api/user/details',
    response: '@userDetailsJson'
  })
  cy.visit('/')
  cy.window().should('have.property', 'nuxtApp') // is TRUE
  cy.window().then(window => {
    console.log('nuxtApp', window.nuxtApp) // Nuxt context visible in console
    window.nuxtApp.$auth
      .loginWith('local', {
        data: {
          email: 'anything',
          password: 'anything',
          remember_me: true
        }
      })
      .then(response => response)
  })
  cy.visit('/user') // Middleware denies this route. Consistent with being logged out.
})

我希望该应用程序像登录后一样运行，但是中间件继续拒绝访问登录路由，并且组件中的任何v-if="$auth.loggedIn"都将被注销。

/middleware/authenticated.js

export default ({ store, redirect }) => {
  // If the user is not authenticated
  if (!store.state.auth.loggedIn) {
    return redirect('/login')
  }
}

我最好的猜测是Nuxt的服务器端渲染正在逐渐发展……但是可能是任何东西。

谢谢

一些灵感来自：

https://www.cypress.io/blog/2017/11/28/testing-vue-web-application-with-vuex-data-store-and-rest-backend/

Answer 1

我认为我能够做到这一点。我正在从SPA切换到Universal，因此我不得不添加一个额外的检查以查看我是否在客户端中或不在插件中：

const isCypress = process.client && typeof window.Cypress !== 'undefined'

export default context => {
  if (isCypress) {
    window.nuxtApp = context
  }
}

然后我的测试如下：

it('displays a list of objective types', () => {
    cy.visit('/admin/objective_types')
    cy.window()
      .then(window => {
        window.nuxtApp.$auth.loginWith('local', {
          data: {
            user: {
              email: 'admin@pyx.com',
              password: 'password'
            }
          }
        }).then(cy.contains('td.title', 'Department'))
      })

  })

Answer 2

您还可以在测试之前通过添加命令来执行登录操作。

cypress / support / command.js

Cypress.Commands.add("login", user => {
    cy.request("POST", `${apiUrl}/auth/login`, user)
        .its("body.data.access_token")
        .should("exist")
        .then(token =>
            localStorage.setItem("auth._token.local", `Bearer ${token}`)
        );
});

简单的e2e测试：

describe("CART WHEN USER IS AUTHORIZED", () => {
    beforeEach(() => {
        cy.login();

        cy.get("[cart-button]").click();

        cy.get(".event").as("event");
        cy.get("[button-delete]")
            .first()
            .as("delete");
    });
});

在使用Cypress.io进行测试时，如何使用nuxt.js和nuxt-auth

2 个答案: