Play user event
This a a play wrapper for @testing-library/user-event, for use in DOM context only.
The interactions are played slowly, with a fake cursor displayed & moving around, for use in component demo purposes (storybook play function introduced in csf v3)
Table of Contents
Install
This project uses npm. Go check them out if you don't have them locally installed.
$ npm install --save @divriots/play-user-eventimport userEvent from "@divriots/play-user-event";Usage
import MyCounter from "../src/index.vue";
import userEvent from '@divriots/play-user-event';
import {screen} from '@testing-library/dom';
export default {
component: MyCounter,
parameters: {
layout: "centered",
},
};
export const story1 = {
play: async () => {
const inc = screen.getByText('+')
const dec = screen.getByText('-')
await userEvent.click(inc)
await userEvent.click(dec)
await userEvent.click(inc)
await userEvent.click(dec)
await userEvent.click(inc)
await userEvent.click(dec)
await userEvent.click(inc)
await userEvent.click(dec)
}
};