GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 05:01:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve writing test docs formatting

Browse Source
This commit is contained in:
domyen 2021-10-25 14:42:41 -04:00
parent 02bad829a7
commit a689b673cb
5 changed files with 26 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/writing-tests/accessibility-testing.md
View File

@ -141,15 +141,12 @@ When you execute your test script, it will run the accessibility audit along wit
![Accessibility testing with Jest Axe Core](./jest-accessibility-testing-optimized.png)
<div class="aside">
What’s the difference between browser-based and linter-based accessibility tests?
---
#### What’s the difference between browser-based and linter-based accessibility tests?
Browser-based accessibility tests, like found in Storybook, evaluates the rendered DOM because that gives you the highest accuracy. Auditing code that hasn't been compiled yet is one step removed from the real thing so you won't catch everything the user might experience.
</div>
---
#### Learn about other UI tests
- [Visual tests](./visual-testing.md) for appearance

2
docs/writing-tests/importing-stories-in-tests.md
View File

@ -157,6 +157,8 @@ With Playwright, you can write a test to check if the inputs are filled and matc
Once you execute Playwright, it opens a new browser window, load Storybook's isolated iframe, asserts if the inputs contain the specified values, and displays the test results in the terminal.
---
#### Learn about other UI tests
- [Visual tests](./visual-testing.md) for appearance

31
docs/writing-tests/interaction-testing.md
View File

@ -43,17 +43,17 @@ Under the hood, Storybook’s interaction addon mirrors Testing Library’s `use
Below is an abridged API for user-event. For more, check out the [official user-event docs](https://testing-library.com/docs/ecosystem-user-event/).
| User events | Description |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| clear | Selects the text inside inputs, or textareas and deletes it <br/> `userEvent.clear(await within(canvasElement).getByRole('myinput'));` |
| click | Clicks the element, calling a click() function <br/> `userEvent.click(await within(canvasElement).getByText('mycheckbox'));` |
| dblClick | Clicks the element twice <br/> `userEvent.dblClick(await within(canvasElement).getByText('mycheckbox'));` |
| deselectOptions | Removes the selection from a specific option of a select element <br/> `userEvent.deselectOptions(await within(canvasElement).getByRole('listbox','1'));` |
| hover | Hovers an element <br/> `userEvent.hover(await within(canvasElement).getByTestId('example-test'));` |
| keyboard | Simulates the keyboard events <br/> `userEvent.keyboard(‘foo’);` |
| selectOptions | Selects the specified option, or options of a select element <br/> `userEvent.selectOptions(await within(canvasElement).getByRole('listbox'),['1','2']);` |
| 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));` |
| User events | Description |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `clear` | Selects the text inside inputs, or textareas and deletes it <br/>`userEvent.clear(await within(canvasElement).getByRole('myinput'));` |
| `click` | Clicks the element, calling a click() function <br/>`userEvent.click(await within(canvasElement).getByText('mycheckbox'));` |
| `dblClick` | Clicks the element twice <br/>`userEvent.dblClick(await within(canvasElement).getByText('mycheckbox'));` |
| `deselectOptions` | Removes the selection from a specific option of a select element <br/>`userEvent.deselectOptions(await within(canvasElement).getByRole('listbox','1'));` |
| `hover` | Hovers an element <br/>`userEvent.hover(await within(canvasElement).getByTestId('example-test'));` |
| `keyboard` | Simulates the keyboard events <br/>`userEvent.keyboard(‘foo’);` |
| `selectOptions` | Selects the specified option, or options of a select element <br/>`userEvent.selectOptions(await within(canvasElement).getByRole('listbox'),['1','2']);` |
| `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));` |
## Running tests
@ -93,15 +93,12 @@ Since Storybook is a webapp, anyone with the URL can reproduce the error with th
Streamline interaction testing further by automatically [publishing Storybook](../workflows/publish-storybook.md) in pull requests. That gives teams a universal reference point to test and debug stories.
<div class="aside">
What’s the difference between interaction tests and visual tests?
---
#### What’s the difference between interaction tests and visual tests?
Interaction tests can be expensive to maintain when applied wholesale to every component. We recommend combining them with other methods like visual testing for comprehensive coverage with less maintenance work.
</div>
---
#### Learn about other UI tests
- [Visual tests](./visual-testing.md) for appearance

14
docs/writing-tests/snapshot-testing.md
View File

@ -102,18 +102,12 @@ These are the frameworks currently supported by Storyshots: `angular`, `html`, `
Storyshots is highly customizable and includes options for various advanced use cases. You can read more in the [addon’s documentation](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#options).
<div class="aside">
What’s the difference between snapshot tests and visual tests?
Visual tests capture images of stories and compare them against image baselines. Snapshot tests take DOM snapshots and compare them against DOM baselines.
Visual tests are better suited for verifying appearance. Snapshot tests are useful for smoke testing and ensuring the DOM doesn’t change.
</div>
---
#### What’s the difference between snapshot tests and visual tests?
Visual tests capture images of stories and compare them against image baselines. Snapshot tests take DOM snapshots and compare them against DOM baselines. Visual tests are better suited for verifying appearance. Snapshot tests are useful for smoke testing and ensuring the DOM doesn’t change.
#### Learn about other UI tests
- [Visual tests](./visual-testing.md) for appearance

4
docs/writing-tests/visual-testing.md
View File

@ -60,7 +60,9 @@ If the changes are intentional, accept them as baselines. Otherwise, deny them t
Learn how to [integrate Chromatic UI Tests](https://www.chromatic.com/docs/) into your CI pipeline.
## What’s the difference between visual tests and snapshot tests?
---
#### What’s the difference between visual tests and snapshot tests?
Snapshot tests compare the rendered markup of every story against known baselines. This means the test compares blobs of HTML and not what the user actually sees. Which in turn, can lead to an increase in false positives as code changes don’t always yield visual changes in the component.