Skip to content

Commit

Permalink
Add/update assets
Browse files Browse the repository at this point in the history
  • Loading branch information
kylegach committed Dec 12, 2024
1 parent c3df3f5 commit e76a66a
Show file tree
Hide file tree
Showing 15 changed files with 8 additions and 14 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/_assets/writing-tests/addon-test-module-expanded.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/_assets/writing-tests/addon-test-overview.mp4
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/_assets/writing-tests/addon-test-vitest-error.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions docs/_snippets/vitest-plugin-run-tests.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
```shell renderer="common" language="js" packageManager="npm"
npm run test
npm run test-storybook
```

```shell renderer="common" language="js" packageManager="pnpm"
pnpm run test
pnpm run test-storybook
```

```shell renderer="common" language="js" packageManager="yarn"
yarn test
yarn test-storybook
```
2 changes: 1 addition & 1 deletion docs/writing-tests/accessibility-testing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ Customize the a11y ruleset at the story level by updating your story to include

The accessibility addon provides seamless integration with the [Test addon](./test-addon.mdx), enabling you to run automated accessibility checks for all your tests in the background while you run component tests. If there are any violations, the test will fail, and you will see the results in the sidebar without any additional setup.

{/* TODO: add asset of the changed UI here */}
![Screenshot of the accessibility test results in the Storybook UI](../_assets/writing-tests/addon-a11y-with-addon-test.png)

### Manual upgrade

Expand Down
5 changes: 1 addition & 4 deletions docs/writing-tests/test-addon.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,6 @@ Other addons, such as [a11y](./accessibility-testing.mdx#test-addon-integration)

To run tests for a specific story or group of stories, press the menu button (three dots) that appears on hover of a sidebar item. You can then select the test type you want to run.

[TK: Screenshot of story sidebar item with open menu]
![Screenshot of story sidebar item with open menu](../_assets/writing-tests/addon-test-sidebar-item-menu.png)

After running your tests, you will now see status indicators on stories and components for their pass, fail, or error state. You can press on the menu button when hovering a story to see the test results for that story. Selecting a result in the menu will navigate you to that story and open the appropriate debugging panel. For example, if a component test fails, you can jump straight to the failure in the Component tests addon panel. That panel provides an interactive debugger for your component test, allowing you to step through each simulated behavior or assertion.
Expand Down Expand Up @@ -339,14 +338,12 @@ The tests run by the addon can be configured in two ways. You can toggle which t

In addition to component tests, the Test addon supports multiple types of tests, depending on which other addons you are using in your project. Some test types, like [visual tests](./visual-testing.mdx), are run independently. Others, like [accessibility](./accessibility-testing.mdx), must be run alongside component tests. For these dependent test types, you can toggle them on or off in the test module by pressing the edit button (pencil icon) and checking or unchecking the test types you want to run.

[TK - Test module edit mode with only coverage]
![Screenshot of test module, expanded, edit mode, coverage is checked](../_assets/writing-tests/addon-test-module-expanded-edit-coverage.png)
![Screenshot of test module, expanded, edit mode, everything is checked](../_assets/writing-tests/addon-test-module-edit.png)

Note that you may not have all of the test types pictured, depending on which addons you have installed.

You can also access edit mode in the sidebar item menu for a story or group of stories:

[TK - Sidebar item menu with edit mode]
![Screenshot of story sidebar item with open menu, edit mode](../_assets/writing-tests/addon-test-sidebar-item-menu-edit.png)

Note that toggling test types in the menu's edit mode affects all tests, not only those for the selected story or group of stories. It is intended as a convenience for quickly toggling test types on or off.
Expand Down
9 changes: 3 additions & 6 deletions docs/writing-tests/test-coverage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,13 @@ Coverage tests examine the instrumented code against a set of industry-accepted

When you run component tests with the [Test addon](./test-addon.mdx), which is powered by [Vitest](https://vitest.dev), it can generate a coverage report. The result is summarized in the testing module, showing the percentage of statements covered by your tested stories.

[TK - Coverage result]
![Screenshot of test module, expanded, showing coverage result](../_assets/writing-tests/addon-test-coverage-result.png)
![Screenshot of test module, expanded, showing coverage result](../_assets/writing-tests/addon-test-module-coverage-summary.png)

### Set up

Coverage is included in the Test addon and, when enabled, will be calculated when running component tests for your project. To enable coverage, press the edit button (pencil icon) in the testing module and toggle coverage on:

![Screenshot of test module, expanded, showing coverage toggle](../_assets/writing-tests/addon-test-coverage-toggle.png)
![Screenshot of test module, expanded, showing coverage toggle](../_assets/writing-tests/addon-test-module-edit-coverage.png)

Before coverage can be calculated, you may be prompted to install a support package corresponding to your [coverage provider](#coverage-provider):

Expand Down Expand Up @@ -95,7 +94,6 @@ npx vitest --coverage

Coverage is also available through Vitest's [IDE integrations](https://vitest.dev/guide/ide.html). You can calculate and display coverage results directly in your editor.

[TK - Screenshot of coverage in VSCode]
![Screenshot of test coverage in VSCode](../_assets/writing-tests/vitest-plugin-vscode-coverage.png)

<Callout variant="info">
Expand Down Expand Up @@ -155,8 +153,7 @@ Both coverage providers support [watermarks](https://vitest.dev/config/#coverage

In the testing module, the coverage summary will show the percentage of statements covered by your tested stories, as well as whether the coverage meets the watermarks. Below the low watermark, the icon will be red, between the low and high watermarks, it will be orange, and above the high watermark, it will be green.

[TK - Coverage result]
![Screenshot of test module, expanded, showing coverage result](../_assets/writing-tests/addon-test-coverage-result.png)
![Screenshot of test module, expanded, showing coverage result](../_assets/writing-tests/addon-test-module-coverage-summary.png)

To configure the watermarks, you can adjust the Vitest config:

Expand Down

0 comments on commit e76a66a

Please sign in to comment.