/play-user-event

Demo version of @testing-library/user-event, for use in storybook csf v3 play.

Primary LanguageTypeScript

components.studio

Github Repo NPM Package

Play user event

play-demo

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