Skip to content
This repository has been archived by the owner on Jan 23, 2024. It is now read-only.

[Bug]: userEvent.keyboard not working in play functions #55

Open
JealousGx opened this issue Sep 25, 2023 · 1 comment
Open

[Bug]: userEvent.keyboard not working in play functions #55

JealousGx opened this issue Sep 25, 2023 · 1 comment

Comments

@JealousGx
Copy link

JealousGx commented Sep 25, 2023

Describe the bug
I am facing an issue with the keyboard or type methods of userEvent.

TagsField.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);

  // wait for scripts to load
  await new Promise((resolve) => setTimeout(resolve, 1500));

  const event = canvas.getByLabelText("Included brands", { selector: "input" });
  await userEvent.type(event, " ");

  await new Promise((resolve) => setTimeout(resolve, 1500));
  await userEvent.keyboard("{backspace}{backspace}");
  await userEvent.keyboard("{backspace}");
};

I have this piece of code that plays the story. And I have also modified the functionalities for backspace to something else. Basically, a span is created upon pressing enter and when backspace is pressed, the whole span is removed and this functionality is achieved through javascript and I am also injecting that javascript code into the story as well. It's working fine with locally run webpack with human interaction, but when it's tested on storybook with testing-library, it doesn't seem to be doing its functionality. In fact, {backspace} doesn't remove any character at all.

FYI: I am using Storybook v7.4.3 and @storybook/testing-library v^0.2.1

This functionality was working fine with storybook v6.5.x but after migrating to v7.4.2, it stopped working.

To Reproduce
Steps to reproduce the behavior:

  1. Write any story that uses the above code.
  2. Run the storybook.
  3. Go to the story & see the error.

Expected behavior
Expected @storybook/testing-library to work fine even after updating the storybook version to 7.4.3

Screenshots
If applicable, add screenshots to help explain your problem.

System
Please paste the results of npx storybook@latest info here.
Environment Info:

  OS: macOS 13.5.2
  CPU: (8) arm64 Apple M1
Binaries:
  Node: 18.16.0 - /usr/local/bin/node
  Yarn: 1.22.19 - ~/.npm-global/bin/yarn
  npm: 9.6.5 - ~/.npm-global/bin/npm
Browsers:
  Chrome: 116.0.5845.187
  Edge: 117.0.2045.40
  Safari: 16.6
npmPackages:
  @storybook/addon-actions: ^7.4.3 => 7.4.3 
  @storybook/addon-designs: ^7.0.5 => 7.0.5 
  @storybook/addon-essentials: ^7.4.3 => 7.4.3 
  @storybook/addon-interactions: ^7.4.3 => 7.4.3 
  @storybook/addon-links: ^7.4.3 => 7.4.3 
  @storybook/addon-themes: ^7.4.3 => 7.4.3 
  @storybook/html: ^7.4.3 => 7.4.3 
  @storybook/html-webpack5: ^7.4.3 => 7.4.3 
  @storybook/jest: ^0.2.2 => 0.2.2 
  @storybook/testing-library: ^0.2.1 => 0.2.1

Additional context
Add any other context about the problem here.

@JealousGx JealousGx changed the title [Bug]: [Bug]: Altering the keyboard functionalities through js not working Sep 25, 2023
@JealousGx JealousGx changed the title [Bug]: Altering the keyboard functionalities through js not working [Bug]: Keyboard events not working Sep 25, 2023
@JealousGx JealousGx changed the title [Bug]: Keyboard events not working [Bug]: Keyboard events not working in play functions Sep 25, 2023
@JealousGx JealousGx changed the title [Bug]: Keyboard events not working in play functions [Bug]: userEvent.keyboard not working in play functions Sep 25, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants
@JealousGx and others