storybookjs/storybook

[Bug]: Interactions panel fails when stepping through "waitForElementToBeRemoved" as the element's been removed

Open

#21,520 opened on Mar 9, 2023

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
addon: interactionsbughelp wantedsev:S3

Description

Describe the bug

This is tricky.

Suppose there's an element in a page, which gets removed in 500ms (e.g. loading spinner). When writing a play function that asserts for that element to be removed, like so:

play: async ({ canvasElement, step }) => {
    const canvas = within(canvasElement);
    await waitForElementToBeRemoved(await canvas.findByText('loading...'))
    await userEvent.click(getByRole('button')) // button is only visible after spinner is gone!
},

If you click to start on the step debugger, by the time you think of clicking on the next step, the spinner is already gone. This means that stepping through the steps will fail.

I'm not sure what's a solution to this scenario, or even if there is a good solution!

To Reproduce

No response

System

No response

Additional context

No response

Contributor guide

Tech stack
typescriptreactjest
Domain
frontendtesting
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
4
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Understanding of Storybook's interactions panelFamiliarity with async testing utilities like waitForElementToBeRemoved
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
25
Research direction
Investigate the interactions addon's step debugger to understand how it handles async operations like waitForElementToBeRemoved. The bug occurs because the step advances before the async assertion completes. Look into the source code in the `addons/interactions` directory, specifically the step runner and play function execution flow. Consider adding a mechanism to wait for all pending promises from test utilities before proceeding to the next step.