From a689b673cb00b473dab0804595811459b3be42d4 Mon Sep 17 00:00:00 2001 From: domyen Date: Mon, 25 Oct 2021 14:42:41 -0400 Subject: [PATCH] Improve writing test docs formatting --- docs/writing-tests/accessibility-testing.md | 9 ++---- .../importing-stories-in-tests.md | 2 ++ docs/writing-tests/interaction-testing.md | 31 +++++++++---------- docs/writing-tests/snapshot-testing.md | 14 +++------ docs/writing-tests/visual-testing.md | 4 ++- 5 files changed, 26 insertions(+), 34 deletions(-) diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md index 5beb2f4918c..5ade889ad37 100644 --- a/docs/writing-tests/accessibility-testing.md +++ b/docs/writing-tests/accessibility-testing.md @@ -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) -
-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. -
- ---- - #### Learn about other UI tests - [Visual tests](./visual-testing.md) for appearance diff --git a/docs/writing-tests/importing-stories-in-tests.md b/docs/writing-tests/importing-stories-in-tests.md index 11e5a1bd429..1c7355d5820 100644 --- a/docs/writing-tests/importing-stories-in-tests.md +++ b/docs/writing-tests/importing-stories-in-tests.md @@ -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 diff --git a/docs/writing-tests/interaction-testing.md b/docs/writing-tests/interaction-testing.md index 1bfd5faa274..abb4ec3f48b 100644 --- a/docs/writing-tests/interaction-testing.md +++ b/docs/writing-tests/interaction-testing.md @@ -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
`userEvent.clear(await within(canvasElement).getByRole('myinput'));` | -| click | Clicks the element, calling a click() function
`userEvent.click(await within(canvasElement).getByText('mycheckbox'));` | -| dblClick | Clicks the element twice
`userEvent.dblClick(await within(canvasElement).getByText('mycheckbox'));` | -| deselectOptions | Removes the selection from a specific option of a select element
`userEvent.deselectOptions(await within(canvasElement).getByRole('listbox','1'));` | -| hover | Hovers an element
`userEvent.hover(await within(canvasElement).getByTestId('example-test'));` | -| keyboard | Simulates the keyboard events
`userEvent.keyboard(‘foo’);` | -| selectOptions | Selects the specified option, or options of a select element
`userEvent.selectOptions(await within(canvasElement).getByRole('listbox'),['1','2']);` | -| type | Writes text inside inputs, or textareas
`userEvent.type(await within(canvasElement).getByRole('my-input'),'Some text');` | -| unhover | Unhovers out of element
`userEvent.unhover(await within(canvasElement).getByLabelText(/Example/i));` | +| User events | Description | +| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `clear` | Selects the text inside inputs, or textareas and deletes it
`userEvent.clear(await within(canvasElement).getByRole('myinput'));` | +| `click` | Clicks the element, calling a click() function
`userEvent.click(await within(canvasElement).getByText('mycheckbox'));` | +| `dblClick` | Clicks the element twice
`userEvent.dblClick(await within(canvasElement).getByText('mycheckbox'));` | +| `deselectOptions` | Removes the selection from a specific option of a select element
`userEvent.deselectOptions(await within(canvasElement).getByRole('listbox','1'));` | +| `hover` | Hovers an element
`userEvent.hover(await within(canvasElement).getByTestId('example-test'));` | +| `keyboard` | Simulates the keyboard events
`userEvent.keyboard(‘foo’);` | +| `selectOptions` | Selects the specified option, or options of a select element
`userEvent.selectOptions(await within(canvasElement).getByRole('listbox'),['1','2']);` | +| `type` | Writes text inside inputs, or textareas
`userEvent.type(await within(canvasElement).getByRole('my-input'),'Some text');` | +| `unhover` | Unhovers out of element
`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. -
-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. -
- ---- - #### Learn about other UI tests - [Visual tests](./visual-testing.md) for appearance diff --git a/docs/writing-tests/snapshot-testing.md b/docs/writing-tests/snapshot-testing.md index 9e8a6904f0f..5931f088323 100644 --- a/docs/writing-tests/snapshot-testing.md +++ b/docs/writing-tests/snapshot-testing.md @@ -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). -
- -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. - -
- --- +#### 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 diff --git a/docs/writing-tests/visual-testing.md b/docs/writing-tests/visual-testing.md index a9d887c97d2..760b08e2cb6 100644 --- a/docs/writing-tests/visual-testing.md +++ b/docs/writing-tests/visual-testing.md @@ -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.