Merge pull request #17359 from storybookjs/chore_docs_updates_interactions_docs

Chore: (Docs) Updates the docs to address #17166
This commit is contained in:
jonniebigodes 2022-01-28 00:12:59 +00:00 committed by GitHub
commit 910486779e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 1 additions and 13 deletions

View File

@ -30,8 +30,6 @@ Update your Storybook configuration (in `.storybook/main.js`) to include the int
<!-- prettier-ignore-end -->
![Storybook's addon-interaction controls](./storybook-addon-interaction-controls.gif)
## Writing stories with the play function
Storybook's `play` functions are small code snippets that run once the story finishes rendering. Aided by the `addon-interactions`, it allows you to build component interactions and test scenarios that were impossible without user intervention. For example, if you were working on a registration form and wanted to validate it, you could write the following story with the `play` function:
@ -212,4 +210,4 @@ By default, each interaction you write inside your `play` function will be execu
<!-- prettier-ignore-end -->
Applying these changes to your stories can provide a performance boost and improved error handling with [`addon-interactions`](/addons/@storybook/addon-interactions/).
Applying these changes to your stories can provide a performance boost and improved error handling with [`addon-interactions`](/addons/@storybook/addon-interactions/).

Binary file not shown.

Before

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 358 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

View File

@ -65,16 +65,6 @@ Below is an abridged API for user-event. For more, check out the [official user-
| `type` | Writes text inside inputs, or textareas <br/>`userEvent.type(await within(canvasElement).getByRole('my-input'),'Some text');` |
| `unhover` | Unhovers out of element <br/>`userEvent.unhover(await within(canvasElement).getByLabelText(/Example/i));` |
### Debugging
The [`@storybook/addon-interactions`](/addons/@storybook/addon-interactions/) addon includes a set of UI controls to allow you control over the test execution flow. At any time, you can pause, resume, rewind, and step through each interaction. Also, providing you with an easy-to-use debugger for errors.
![Storybook addon interactions preview](./addon-interactions-preview.png)
Open your `Interactions` panel and click on an individual step to jump to the exact state of the component when the interaction was triggered.
![Storybook addon interactions click steps](./addon-interactions-individual-states.gif)
### Permalinks for reproductions
The `play` function is executed after the story is rendered. If theres an error, itll be shown in the interaction addon panel to help with debugging.