storyBook play学习

场景

在官方给出的案例中，
Page.stories.js

import {
    within, userEvent } from '@storybook/testing-library'
import MyPage from './Page.vue'

export default {
   
  title: 'Example/Page',
  component: MyPage,
  parameters: {
   
    // More on how to position stories at: https://storybook.js.org/docs/vue/configure/story-layout
    layout: 'fullscreen'
  }
}

export const LoggedOut = {
   }

// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
export const LoggedIn = {
   
  render: () => ({
   
    components: {
   
      MyPage
    },
    template: '<my-page />'
  }),
  play: async ({
     canvasElement }) => {
   
    const canvas = within(canvasElement)
    const loginButton = await canvas.getByRole('button', {
   
      name: /Log in/i
    })
    await userEvent.click(loginButton)
  }
}

这段代码是一个测试脚本，用于模拟用户登录行为并点击登录按钮。

• const canvas = within(canvasElement)：within 是一个测试工具函数，它可以让你在给定的 canvasElement 内部进行 DOM 查询操作。在这段代码中，它将传递给它的 canvasElement 封装成一个可用于操作的对象 canvas。

• const loginButton = await canvas.getByRole('button', { name: /Log in/i })：getByRole 是一个用于根据元素角色获取元素的函数。在这里，它将查找一个角色为 'button' 且名称匹配正则表达式 /Log in/i 的按钮元素，并将结果赋值给变量 loginButton。/Log in/i 表示不区分大小写匹配字符串 'Log in'。

• await userEvent.click(loginButton)：userEvent.click 是一个模拟用户点击事件的函数。在这里，它会模拟用户点击 loginButton 元素，执行点击操作。

这段代码的作用是在一个渲染的页面中找到名称为 “Log in” 的按钮，并模拟用户点击该按钮。这样就可以测试用户登录的交互行为。