Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: Adds visual test addon page #241

Merged
merged 4 commits into from
Aug 25, 2023
Merged

Conversation

jonniebigodes
Copy link
Contributor

With this pull request, the initial page for the visual testing addon is added to the documentation.

What was done:

  • Created the page following the Chromatic 3.0 IA available here and currently available features at this stage that are not subject to additional design work or implementation.

@jonniebigodes jonniebigodes added the Visual test addon Documentation changes related to the addon label Aug 22, 2023
@jonniebigodes jonniebigodes self-assigned this Aug 22, 2023
visual-testing-addon.md Outdated Show resolved Hide resolved
visual-testing-addon.md Outdated Show resolved Hide resolved
visual-testing-addon.md Outdated Show resolved Hide resolved
visual-testing-addon.md Outdated Show resolved Hide resolved
visual-testing-addon.md Outdated Show resolved Hide resolved
visual-testing-addon.md Outdated Show resolved Hide resolved
visual-testing-addon.md Outdated Show resolved Hide resolved
visual-testing-addon.md Outdated Show resolved Hide resolved
visual-testing-addon.md Outdated Show resolved Hide resolved
visual-testing-addon.md Outdated Show resolved Hide resolved
visual-testing-addon.md Show resolved Hide resolved
visual-testing-addon.md Show resolved Hide resolved
visual-testing-addon.md Outdated Show resolved Hide resolved
visual-testing-addon.md Outdated Show resolved Hide resolved
visual-testing-addon.md Outdated Show resolved Hide resolved

<p></p>

Chromatic's Visual Testing addon helps you detect UI bugs during development. It enables you to run visual tests on your stories and compare changes with the latest baselines across multiple browsers and viewport sizes. Pinpoint visual changes in UI appearance and behavior and automate visual testing without leaving Storybook.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Chromatic's Visual Testing addon helps you detect UI bugs during development. It enables you to run visual tests on your stories and compare changes with the latest baselines across multiple browsers and viewport sizes. Pinpoint visual changes in UI appearance and behavior and automate visual testing without leaving Storybook.
Chromatic's Visual Testing addon helps you detect UI bugs during development. It enables you to run visual tests on your stories and compare changes with the latest baselines across multiple browsers and viewport sizes. Pinpoint changes in UI appearance and behavior and automate visual testing without leaving Storybook.

"visual" was redundant when describing "changes in UI appearance", and it also read funny with "visual testing" later in the sentence.

Otherwise, this intro is 🔥!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with Kyle here, this is a great intro!


## How to run visual tests

Get started visual testing by introducing a change in one of your components; for example, change a background color or font size, save the file, and commit your local changes. Click the "Run tests" button in the toolbar to begin the process. This will:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Get started visual testing by introducing a change in one of your components; for example, change a background color or font size, save the file, and commit your local changes. Click the "Run tests" button in the toolbar to begin the process. This will:
Get started visual testing by introducing a change in one of your components; for example, change a background color or font size. Then save the file, and commit your local changes. Click the "Run tests" button in the toolbar to begin the process. This will:

Error [ERR_REQUIRE_ESM]: require() of ES Module /my-project/node_modules/string-width/index.js is not supported.
```

This is a [known issue](https://github.com/storybookjs/storybook/issues/22431) when using an older version of the Yarn package manager (e.g., version 1.x). To solve this issue, you can upgrade to the latest stable version. However, if you cannot upgrade, adjust your `package.json` file and provide a resolution field to enable the Yarn package manager to install the correct dependencies. In doing so, you may be required to delete your `node_modules` directory and `yarn.lock` file before installing the dependencies again.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jonniebigodes — Sorry, I should've provided more specific guidance. I think it's best if we link to this comment on this issue, which details the workaround and why it may be necessary.

Suggested change
This is a [known issue](https://github.com/storybookjs/storybook/issues/22431) when using an older version of the Yarn package manager (e.g., version 1.x). To solve this issue, you can upgrade to the latest stable version. However, if you cannot upgrade, adjust your `package.json` file and provide a resolution field to enable the Yarn package manager to install the correct dependencies. In doing so, you may be required to delete your `node_modules` directory and `yarn.lock` file before installing the dependencies again.
This is a [known issue](https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092) when using an older version of the Yarn package manager (e.g., version 1.x). To solve this issue, you can upgrade to the latest stable version. However, if you cannot upgrade, adjust your `package.json` file and provide a resolution field to enable the Yarn package manager to install the correct dependencies. In doing so, you may be required to delete your `node_modules` directory and `yarn.lock` file before installing the dependencies again.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kylegach no need to be sorry whatsoever. I'm the one at fault. I had the link to Tom's comment saved, but copied over only issue 🤦

Copy link
Contributor

@kylegach kylegach left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is solid work! Nicely done.

Copy link
Contributor

@elseloop elseloop left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These revisions look good to me! It's an excellent document.

@jonniebigodes jonniebigodes merged commit 693460c into main Aug 25, 2023
4 of 5 checks passed
@jonniebigodes jonniebigodes deleted the docs_add_visual_test_docs_page branch August 25, 2023 20:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Visual test addon Documentation changes related to the addon
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants