로그인 명령 구현 및 vuex 스토어 액세스

로그인 명령 구현 및 vuex 스토어 액세스

로그인 프로세스가 있어 서버에 요청을 전송하고 응답을 받은 후 다음을 수행합니다.

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

사이프러스 테스트 시 이 동작을 에뮬레이트하고 싶기 때문에 테스트를 실행할 때마다 실제로 로그인할 필요가 없습니다.

그래서 명령어를 만들었습니다.

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
}

사이프레스 테스트 코드:

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

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

이 명령어를 다른 사용자 지정 명령어로 추가할 수 있지만 vuex 스토어는 존재하지 않으므로 먼저 앱을 방문했는지 확인하십시오.

• 순서 1: 내부main.jsCypress에 스토어를 제공합니다.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

if (window.Cypress) {
  // Add `store` to the window object only when testing with Cypress
  window.store = store
}

• 순서 2: 내부cypress/support/commands.js새 명령 추가:

Cypress.Commands.add('login', function() {
  cy.visit('/login') // Load the app in order `cy.window` to work
  cy.window().then(window => { // .then() to make cypress wait until window is available
    cy.wrap(window.store).as('store') // alias the store (can be accessed like this.store)
    cy.request({
      method: 'POST',
      url: 'https://my-app/api/auth/login',
      body: {
        email: 'user@gmail.com',
        password: 'passowrd'
      }
    }).then(res => {
      // You can access store here
      console.log(this.store)
    })
  })
})

• 순서 4: 내부cypress/integration새로운 테스트를 작성하다

describe('Test', () => {
  beforeEach(function() {
    cy.login() // we run our custom command
  })

  it('passes', function() { // pass function to keep 'this' context
    cy.visit('/')
    // we have access to this.store in our test
    cy.wrap(this.store.state.user).should('be.an', 'object')
  })
})

언급URL : https://stackoverflow.com/questions/51122303/implement-login-command-and-access-vuex-store