Skip to content

Commit

Permalink
Update package name
Browse files Browse the repository at this point in the history
  • Loading branch information
kylegach committed Feb 1, 2024
1 parent fd6b4ab commit 917e5e4
Show file tree
Hide file tree
Showing 7 changed files with 17 additions and 17 deletions.
3 changes: 3 additions & 0 deletions docs/snippets/common/chromatic-storybook-add.npm.js.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```shell
npx storybook@latest add @chromatic-com/storybook
```
3 changes: 3 additions & 0 deletions docs/snippets/common/chromatic-storybook-add.pnpm.js.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```shell
pnpm dlx storybook@latest add @chromatic-com/storybook
```
3 changes: 3 additions & 0 deletions docs/snippets/common/chromatic-storybook-add.yarn.js.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```shell
yarn dlx storybook@latest add @chromatic-com/storybook
```
3 changes: 0 additions & 3 deletions docs/snippets/common/visual-test-addon-install.npm.js.mdx

This file was deleted.

3 changes: 0 additions & 3 deletions docs/snippets/common/visual-test-addon-install.pnpm.js.mdx

This file was deleted.

3 changes: 0 additions & 3 deletions docs/snippets/common/visual-test-addon-install.yarn.js.mdx

This file was deleted.

16 changes: 8 additions & 8 deletions docs/writing-tests/visual-testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,17 @@ Storybook supports cross-browser visual testing natively using [Chromatic](https
/>
</video>

### Install Visual Tests addon
### Install the addon

Install the Visual Tests addon by running the following command:
Add visual tests to your project by installing `@chromatic-com/storybook`, the official addon by Storybook maintainers:

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'common/visual-test-addon-install.npm.js.mdx',
'common/visual-test-addon-install.pnpm.js.mdx',
'common/visual-test-addon-install.yarn.js.mdx'
'common/chromatic-storybook-add.npm.js.mdx',
'common/chromatic-storybook-add.pnpm.js.mdx',
'common/chromatic-storybook-add.yarn.js.mdx'
]}
/>

Expand All @@ -40,17 +40,17 @@ Storybook 7.4 or higher is required. Read the [migration guide](../migration-gui

When you start Storybook, you'll see a new addon panel for Visual Tests where you can run tests and view results.

![Visual Tests Addon enabled](./vta-enable.png)
![Visual Tests addon enabled](./vta-enable.png)

To enable visual testing, sign up for [Chromatic](https://www.chromatic.com/start?startWithSignup=true&ref=storybook_site) and create a project. This will give you access to a fleet of cloud browsers.

![Visual Tests Addon project selection](./vta-select-project.png)
![Visual Tests addon project selection](./vta-select-project.png)

Select a project from your project list to finish setup. If you're setting up the addon for the first time, the configuration files and necessary project identifiers will be added for you automatically.

### Configure

Visual Tests addon includes configuration options covering most use cases by default. You can also fine-tune the addon configuration to match your project's requirements via the [`./chromatic.config.json`](https://www.chromatic.com/docs/cli#configuration) file. Below are the available options and examples of how to use them.
The addon includes configuration options covering most use cases by default. You can also fine-tune the addon configuration to match your project's requirements via the [`./chromatic.config.json`](https://www.chromatic.com/docs/cli#configuration) file. Below are the available options and examples of how to use them.

| Option | Description |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand Down

0 comments on commit 917e5e4

Please sign in to comment.