场景
在官方给出的案例中,
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-layoutlayout: '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” 的按钮,并模拟用户点击该按钮。这样就可以测试用户登录的交互行为。