mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-31 05:03:21 +08:00
Merge pull request #17359 from storybookjs/chore_docs_updates_interactions_docs
Chore: (Docs) Updates the docs to address #17166
This commit is contained in:
commit
910486779e
@ -30,8 +30,6 @@ Update your Storybook configuration (in `.storybook/main.js`) to include the int
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||

|
||||
|
||||
## 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 |
@ -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.
|
||||
|
||||

|
||||
|
||||
Open your `Interactions` panel and click on an individual step to jump to the exact state of the component when the interaction was triggered.
|
||||
|
||||

|
||||
|
||||
### Permalinks for reproductions
|
||||
|
||||
The `play` function is executed after the story is rendered. If there’s an error, it’ll be shown in the interaction addon panel to help with debugging.
|
||||
|
Loading…
x
Reference in New Issue
Block a user