Cypress 使用 Pinia Vue3 的操作

Question

我从这个视频中学习了一些柏树： https://wwww.youtube.com/watch?v== 03kg2rdjytc 我对他在29:33说的说：“程序登录” 但是他正在使用vue2和vuex。

我的项目是由Vite创建的，国家管理是Pinia。 那么如何使用PINIA操作进行程序登录？

例如，在用户中登录的“欢迎登录”应查看仪表板：

describe('Welcome', () => {
  it('logged in user should visit dashboard', () => {
    // login
    cy.visit('/')
    cy.url().should('contain', '/dashboard')
  })
})

和我的UserStore：

export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    username: ref(useLocalStorage('username', null)),
  }),
  getters: {
    isLoggedIn: (state) => state.username !== null,
  },
  actions: {
    login(username, password) {
      return useAuthLoginService(username, password)
        .then((response) => {
          this.username = response.username
        })
        .catch((error) => {
          return Promise.reject(new Error(error))
        })
    },
  },
})

如何在Cypress测试中调用登录操作？ 目前，作为一个解决方法，我在localstorage上写了这样的方法：

localStorage.setItem('username', 'user')

它可以正常工作，因为UserStore从LocalStorage捕获了此物品，并且像登录一样通过，但是我不喜欢这个解决方案，似乎脆弱了，我' D喜欢使用用于登录用户的操作。

我尝试过的另一件事是在窗口内添加应用程序变量，但对我不起作用...不明白为什么...

main.js

视频显示该代码：

const vue = new Vue({...})
if(window.Cypress){
  window.app = app
}

在我的情况下。是：

const app = createApp(App)
if(window.Cypress){
  window.app = app
}

但是在柏树测试中，window.app它是未定义的...我不知道我将如何使用此问题访问USERSTORE ...就像Vuex一样。

Answer 1

以Pinia演示应用程序为例：

该商店在App.Vue中初始化。添加对新创建的商店的引用，以供柏树用于

export default defineComponent({
  components: { Layout, PiniaLogo },

  setup() {
    const user = useUserStore()
    const cart = useCartStore()
 
    if (window.Cypress) {
      window.store = {user, cart)   // test can see window.store
    }
    ...

测试中，

let store;  

describe('Pinia demo with counters', () => {

  beforeEach(() => {
    cy.viewport(1000, 1000)
    cy.visit(`http://localhost:${PORT}`)
      .then(win => store = win.store)       // get app's store object 
  })

  it('works', () => {
    cy.wait(500) // wait for the JS to load
      .then(() => store.cart.addItem('Cypress test item'))  // invoke action
      .then(() => {
        const item1 = store.cart.items[0]                   // invoke getter
        cy.wrap(item1)
          .should('have.property', 'name', 'Cypress test item')  // passes
      })

登录操作是异步的，因此请返回允许允许柏树等待的承诺。

// user.js

async login(user, password) {
  const userData = await apiLogin(user, password)

  this.$patch({
    name: user,
    ...userData,
  })
  return userData        // this returns a promise which can awaited
},

// main.spec.js

describe('Pinia demo with counters', () => {
  beforeEach(() => {
    cy.viewport(1000, 1000)
    cy.visit(`http://localhost:${PORT}`).then(win => {
      store = win.store

      // default name in store before login
      cy.wrap(store.user.name).should('eq', 'Eduardo')

      // logging in
      store.user.login('ed', 'ed').then(() => {        // wait for API call
        cy.wrap(store.user.name).should('eq', 'ed')
      })
    })
  })

---

或者，等待名称在页面上更改

// main.spec.js

cy.visit(`http://localhost:${PORT}`).then(win => {
  store = win.store

  // default name in store
  cy.wrap(store.user.name).should('eq', 'Eduardo')

  // logging on
  store.user.login('ed', 'ed')  
  cy.contains('Hello ed')              // waits for name on page to change
    .then(() => {          
      cy.wrap(store.user.name).should('eq', 'ed')
    })
})