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
• Usage

Install

This project uses npm. Go check them out if you don't have them locally installed.

$ npm install --save @divriots/play-user-event

import 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)
  }
};

Live Demos on Components.studio

• Live demo Counter
• Live demo SearchBox