From 3adfec30e9366654b788d3cd5bb28b46354167a8 Mon Sep 17 00:00:00 2001 From: domyen Date: Wed, 22 Nov 2023 16:33:29 -0500 Subject: [PATCH] Add beta features to sidebar --- .../e2e-visual-tests.md | 35 +++++++++---------- .../visual-testing-addon.md | 5 +-- 2 files changed, 20 insertions(+), 20 deletions(-) rename src/content/{notInNavigation => configuration}/e2e-visual-tests.md (95%) rename src/content/{notInNavigation => configuration}/visual-testing-addon.md (98%) diff --git a/src/content/notInNavigation/e2e-visual-tests.md b/src/content/configuration/e2e-visual-tests.md similarity index 95% rename from src/content/notInNavigation/e2e-visual-tests.md rename to src/content/configuration/e2e-visual-tests.md index b303651f..f684bd34 100644 --- a/src/content/notInNavigation/e2e-visual-tests.md +++ b/src/content/configuration/e2e-visual-tests.md @@ -1,7 +1,8 @@ --- layout: "../../layouts/Layout.astro" -title: E2E Visual Tests +title: E2E Visual Tests (beta) description: Chromatic E2E Visual Tests capture snapshots of pages visited during Playwright tests. +sidebar: { order: 17 } --- # E2E Visual Tests @@ -269,6 +270,7 @@ yarn archive-storybook ``` ## Working in Monorepos + Often, when using a monorepo, developers tend to keep their e2e tests in a subdirectory instead of in the root of the project. At the same time, the Storybook and Chromatic configuration details live at the project’s root. In these cases, you will need to update the `archive-storybook` and `build-archive-storybook` scripts in your `package.json` by setting the `-c` flag and `CHROMATIC_ARCHIVE_LOCATION` environment variable. For example: ```json @@ -297,7 +299,7 @@ Setting options globally can be done in your `playwright.config.js` as follows: ```javascript // playwright.config.js -import { defineConfig } from '@playwright/test'; +import { defineConfig } from "@playwright/test"; export default defineConfig({ use: { @@ -315,12 +317,11 @@ Options can also be overridden at the test level: ```javascript // mytest.spec.js -test.describe('some block', () => { - +test.describe("some block", () => { // 👇 your option overrides test.use({ disableAutoCapture: true }); - test('some test', async ({ page }) => { + test("some test", async ({ page }) => { // ... }); }); @@ -331,13 +332,13 @@ If you're using TypeScript, the options can be typed: ```typescript // playwright.config.ts -import { ChromaticConfig } from '@chromaui/test-archiver'; +import { ChromaticConfig } from "@chromaui/test-archiver"; export default defineConfig({ use: { // ... your other options - // 👇 your option overrides + // 👇 your option overrides disableAutoCapture: true, }, // ... your other configuration @@ -349,7 +350,7 @@ export default defineConfig({ These options control how the Chromatic archive fixture behaves. | Option | Type | Description | -|--------------------------|-----------|------------------------------------------------------------------------------------------------------------------------------| +| ------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------- | | `disableAutoCapture` | `boolean` | When `true`, will disable the capture that happens automatically at the end of a test when using the Chromatic test fixture. | | `resourceArchiveTimeout` | `number` | Maximum amount of time that each test will wait for the network to be idle while archiving resources. | @@ -357,25 +358,23 @@ These options control how the Chromatic archive fixture behaves. These options control how Chromatic behaves concerning the stories of your archives. -| Option | Type | Chromatic Docs | -|---------------------------|-----------|----------------------------------------------------------------------------| -| `delay` | `number` | [Delay](/docs/delay/) | -| `diffIncludeAntiAliasing` | `boolean` | [Threshold for changes](/docs/threshold#anti-aliasing) | -| `diffThreshold` | `number` | [Threshold for changes](/docs/threshold#setting-the-threshold) | +| Option | Type | Chromatic Docs | +| ------------------------- | --------- | ----------------------------------------------------------------------- | +| `delay` | `number` | [Delay](/docs/delay/) | +| `diffIncludeAntiAliasing` | `boolean` | [Threshold for changes](/docs/threshold#anti-aliasing) | +| `diffThreshold` | `number` | [Threshold for changes](/docs/threshold#setting-the-threshold) | | `forcedColors` | `string` | [Media Features](/docs/media-features#test-high-contrast-color-schemes) | -| `pauseAnimationAtEnd` | `boolean` | [Animations](/docs/animations#css-animations) | +| `pauseAnimationAtEnd` | `boolean` | [Animations](/docs/animations#css-animations) | | `prefersReducedMotion` | `string` | [Media Features](/docs/media-features#verify-reduced-motion-animations) | - ### Environment variables Some options can be configured through environment variables. -| Environment variable | Description | -|------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| Environment variable | Description | +| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `CHROMATIC_ARCHIVE_LOCATION` | If you have configured your project's [`outputDir`](https://playwright.dev/docs/api/class-testproject#test-project-output-dir) option to be different than the default, you must set the `CHROMATIC_ARCHIVE_LOCATION` environment variable to the same value. This must be done when starting the Storybook and when building it on CI. This ensures that the Archive Storybook can find the [archives](#what-are-archives) generated by the Test Archiver. | - ## Frequently asked questions
diff --git a/src/content/notInNavigation/visual-testing-addon.md b/src/content/configuration/visual-testing-addon.md similarity index 98% rename from src/content/notInNavigation/visual-testing-addon.md rename to src/content/configuration/visual-testing-addon.md index dec4173a..92373866 100644 --- a/src/content/notInNavigation/visual-testing-addon.md +++ b/src/content/configuration/visual-testing-addon.md @@ -1,10 +1,11 @@ --- layout: "../../layouts/Layout.astro" -title: Visual testing addon for Storybook +title: Visual Tests addon for Storybook (beta) description: Configure Storybook to test UIs with the visual testing addon +sidebar: { order: 16, label: Addon for Storybook (beta) } --- -# Visual testing addon for Storybook +# Visual Tests addon for Storybook