Skip to content

Commit

Permalink
Merge pull request #324 from chromaui/docs-updates-nov
Browse files Browse the repository at this point in the history
Docs updates November
  • Loading branch information
domyen authored Nov 30, 2023
2 parents 8507347 + 4f66e37 commit d43c41c
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 54 deletions.
9 changes: 9 additions & 0 deletions src/content/collaborate/access.md
Original file line number Diff line number Diff line change
Expand Up @@ -206,3 +206,12 @@ Once you have access and the prerequisite details, follow these instructions to
2. Click the Configure tab.
3. In the Connected Application section, find the "Sync project with a Git repository" area and click "Add on-prem Git Provider" to enter the details for your repository.
</details>

<details>
<summary>Why am I getting an error when trying to access a GitHub SSO project that I see listed in Chromatic’s project list?</summary>

This error can occur when Chromatic isn’t authorized for a GitHub organization that has SSO/SAML also configured. In order to grant access to a project, Chromatic uses that project’s token and your account’s GitHub token. During the login process for Chromatic you authenticate with GitHub and will be presented with a prompt inside of GitHub to authorize Chromatic for use in your organization.

You must click the **Authorize** button. If you don’t click the **Authorize** button, but instead click the **Continue** button, you will not be able to access the project in Chromatic. If the person that set up the project previously logged into Chromatic with their GitHub credential but never authorized Chromatic for their organization, their teammates will also encounter this issue.

</details>
38 changes: 20 additions & 18 deletions src/content/configuration/visual-testing-addon.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
---
layout: "../../layouts/Layout.astro"
title: Visual Tests addon for Storybook (beta)
description: Configure Storybook to test UIs with the visual testing addon
description: Configure Storybook to test UIs with the Visual Tests Addon
sidebar: { order: 16, label: Addon for Storybook (beta) }
---

# Visual Tests addon for Storybook

<div class="aside" style="margin-bottom: 2rem;">

🧪 **Experimental** We're actively integrating feedback from [early access users](https://forms.gle/NCDV1BMGuNfjWrPm9). As a result, both APIs and functionality may undergo potential changes.
🧪 **Experimental** Were actively integrating feedback from [early access users](https://forms.gle/NCDV1BMGuNfjWrPm9). As a result, both APIs and functionality may undergo potential changes.

</div>

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 Tests 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.

## Installation

Expand Down Expand Up @@ -46,25 +46,25 @@ const config = {
export default config;
```

Start your Storybook, and you'll see some noticeable changes in the UI: a new toolbar icon and the Visual tests panel where you can inspect the test results.
Start your Storybook, and youll see some noticeable changes in the UI: a new toolbar icon and the Visual tests panel where you can inspect the test results.

![Visual testing addon enabled](../../images/visual-tests-enable.png)
![Visual Tests Addon enabled](../../images/visual-tests-enable.png)

## Authentication

Before using the Visual Testing addon, you must authenticate yourself with Chromatic. Click the "Enable" button in the addon panel and follow the onboarding workflow to set up your account and link your existing Storybook instance with Chromatic. After the authentication process is complete, you'll be redirected back to Storybook, where you'll see a list of available projects to which you have access.
Before using the Visual Tests Addon, you must authenticate yourself with Chromatic. Click the Enable button in the addon panel and follow the onboarding workflow to set up your account and link your existing Storybook instance with Chromatic. After the authentication process is complete, youll be redirected back to Storybook, where youll see a list of available projects to which you have access.

![Visual testing addon authentication](../../images/visual-tests-sign-in.png)
![Visual Tests Addon authentication](../../images/visual-tests-sign-in.png)

<div class="aside">

💡 As part of the authentication process, the addon will ask you for light permissions to access your Chromatic account. The addon will only use this information to authenticate you and to synchronize your visual tests with Chromatic. The addon won't use this information for any other purpose.
💡 As part of the authentication process, the addon will ask you for light permissions to access your Chromatic account. The addon will only use this information to authenticate you and to synchronize your visual tests with Chromatic. The addon wont use this information for any other purpose.

</div>

Select the project on which you want to run your visual tests to complete the onboarding process. The addon will automatically save your selection, adjust the configuration file to include the necessary project identifiers, and retrieve the latest baselines if available.

![Visual testing addon project selection](../../images/visual-tests-project-selection.png)
![Visual Tests Addon project selection](../../images/visual-tests-project-selection.png)

## Configure

Expand All @@ -90,7 +90,7 @@ By default, your project configuration is stored in a configuration file (i.e.,

### Override the default configuration

If you want to customize the addon's default configuration, you can create a file in your project's root directory and adjust the addon's settings in Storybook's configuration file to include it. For example, if you want to run tests based on the current environment:
If you want to customize the addons default configuration, you can create a file in your projects root directory and adjust the addons settings in Storybooks configuration file to include it. For example, if you want to run tests based on the current environment:

```js
// .storybook/main.js
Expand All @@ -116,7 +116,7 @@ export default config;

## 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. Then save the file, and commit your local changes. Click the "Play" button in the sidebar 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 Play button in the sidebar to begin the process. This will:

1. Connect to Chromatic
2. Start a local build, which will:
Expand All @@ -132,15 +132,15 @@ To find out which changes were introduced in the latest build, the addon highlig

![Confirm UI changes in Storybook](../../images/visual-tests-accept-all.png)

If you accept a change but want to revert the acceptance, the addon provides an "Unaccept" button that allows you to do just that. This resets the status to "unreviewed," updates Storybook's sidebar, and syncs the change with Chromatic.
If you accept a change but want to revert the acceptance, the addon provides an Unaccept button that allows you to do just that. This resets the status to unreviewed, updates Storybooks sidebar, and syncs the change with Chromatic.

![Revert UI changes in Storybook](../../images/visual-tests-unaccept.png)

---

#### What's the difference in testing with the addon vs. CI?
#### Whats the difference in testing with the addon vs. CI?

Running tests with the Visual Testing addon shortens the feedback loop by providing a simple workflow to detect UI bugs during development. This means you don't have to wait until your CI environment finishes running, reducing the costs and computational power used to verify what's changed. Once you combine the addon with [TurboSnap](/docs/turbosnap)([see below](#turbosnap-support)), you can further reduce the number of snapshots taken and the time it takes to run the tests.
Running tests with the Visual Tests Addon shortens the feedback loop by providing a simple workflow to detect UI bugs during development. This means you dont have to wait until your CI environment finishes running, reducing the costs and computational power used to verify whats changed. Once you combine the addon with [TurboSnap](/docs/turbosnap)([see below](#turbosnap-support)), you can further reduce the number of snapshots taken and the time it takes to run the tests.

---

Expand Down Expand Up @@ -170,22 +170,24 @@ This is a [known issue](https://github.com/storybookjs/storybook/issues/22431#is
</details>

<details>
<summary>How does the addon impact on snapshot usage?</summary>
<summary>Does the addon affect snapshot usage?</summary>

Running tests with the addon enabled still counts towards your monthly snapshot usage, but they're likely to stay the same despite the number of builds you run. By default, it will follow the same pattern as running tests from CI or CLI (i.e., one snapshot per story, browser). If you have enabled [modes](/docs/modes), the addon will also take them into account. However, for customers who are subscribed to the early access program, the snapshots taken will not be billed until the end of the program. If you still see them listed in your bill or have any questions, contact us <a class="intercom-concierge-bot"><b>via in-app chat</b></a>.
Yes, running tests in the addon counts towards snapshot usage. The addon connects to our cloud to allow you to run tests on-demand in Storybook instead of waiting on CI. But you’re still taking snapshots all the same.

For customers in the early access program, the snapshots are free. Your usage will be credited to your account if there are any overages as a result of using the addon. Snapshots will be billed when the early access program concludes. If you still see them listed in your bill or have any questions, contact us <a class="intercom-concierge-bot"><b>via in-app chat</b></a>.

</details>

<details>
<summary id="turbosnap-support">Does the addon support TurboSnap?</summary>

No. The Visual Testing addon is still in its early access stage. Support for TurboSnap will be added as part of a future release.
No. The Visual Tests Addon is still in its early access stage. Support for TurboSnap will be added as part of a future release.

</details>

<details>
<summary>Can I deny a change with the addon?</summary>

No. Denying changes is only available when running builds from CI or the CLI. If you need to, you can revert changes by clicking the "Unaccept" button in the addon panel and re-running the tests to verify them.
No. Denying changes is only available when running builds from CI or the CLI. If you need to, you can revert changes by clicking the Unaccept button in the addon panel and re-running the tests to verify them.

</details>
Loading

1 comment on commit d43c41c

@github-actions
Copy link

Choose a reason for hiding this comment

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

Please sign in to comment.