storyBook play学习
2023-12-28 16:31:22
场景
在官方给出的案例中,
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” 的按钮,并模拟用户点击该按钮。这样就可以测试用户登录的交互行为。
文章来源:https://blog.csdn.net/weixin_63681863/article/details/135269076
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!