diff --git a/.prettierignore b/.prettierignore index 485df15..3bfb550 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1,4 @@ .DS_Store - -node_modules build/* +node_modules +pnpm-lock.yaml diff --git a/README.md b/README.md index 30b3489..3e25311 100644 --- a/README.md +++ b/README.md @@ -6,29 +6,36 @@ This repo is the home of happo.io documentation, served at docs.happo.io ## 3.58.0 -- Document new `flake` webhook event type with example payloads and field reference +- Document new `flake` webhook event type with example payloads and field + reference - Update happo dependency from 6.10.8 to 6.11.0 - Update React and React DOM to 19.2.6 ## 3.57.3 -- Add Local development guide documenting how to run Happo locally using the --only flag +- Add Local development guide documenting how to run Happo locally using the + --only flag ## 3.57.2 -- Improve SSO documentation with signing requirements and attribute mapping details -- Clarify SHA-256 signing requirement and assertion vs response signature distinction +- Improve SSO documentation with signing requirements and attribute mapping + details +- Clarify SHA-256 signing requirement and assertion vs response signature + distinction - Document full attribute mapping support for email, name, picture, and roles - Add guidance on certificate handling, rotation, and domain uniqueness -- Provide quickstart callouts for major IdPs including Okta, Google Workspace, and Entra ID +- Provide quickstart callouts for major IdPs including Okta, Google Workspace, + and Entra ID ## 3.57.1 -- Add troubleshooting guidance for guest and cross-tenant sign-in issues (AADSTS650059) with signInAudience manifest fix +- Add troubleshooting guidance for guest and cross-tenant sign-in issues + (AADSTS650059) with signInAudience manifest fix ## 3.57.0 -- Document --skip flag usage on Custom, Playwright, and Cypress integration pages +- Document --skip flag usage on Custom, Playwright, and Cypress integration + pages ## 3.56.0 @@ -37,7 +44,8 @@ This repo is the home of happo.io documentation, served at docs.happo.io ## 3.55.2 -- Add documentation for partial runs feature using --only and --skip CLI options to reduce quota usage and speed up CI [by @trotzig in #285] +- Add documentation for partial runs feature using --only and --skip CLI options + to reduce quota usage and speed up CI [by @trotzig in #285] - Update happo dependency to 6.10.2 - Update prettier to 3.8.3 - Update release-with-ease to 2.2.0 @@ -45,11 +53,13 @@ This repo is the home of happo.io documentation, served at docs.happo.io ## 3.55.1 - Document --skip and --only CLI arguments for filtering test execution -- Replace deprecated --skippedExamples reference with current argument documentation +- Replace deprecated --skippedExamples reference with current argument + documentation ## 3.55.0 -- Fix broken links in documentation that were inadvertently broken during conversion from .md to .mdx files +- Fix broken links in documentation that were inadvertently broken during + conversion from .md to .mdx files - Update prettier to 3.8.2 - Update react and react-dom to 19.2.5 @@ -61,7 +71,8 @@ This repo is the home of happo.io documentation, served at docs.happo.io ## 3.53.0 -- Document autoApplyPseudoStateAttributes integration option for enhanced pseudo-state handling +- Document autoApplyPseudoStateAttributes integration option for enhanced + pseudo-state handling - Update happo dependency to 6.8.0 with latest improvements - Update release-with-ease dependency to 2.0.2 @@ -74,20 +85,27 @@ This repo is the home of happo.io documentation, served at docs.happo.io ## 3.51.0 - Reframe native apps as a first-class use case in documentation -- Apply installation partial to full-page, CLI, and getting-started docs for improved consistency +- Apply installation partial to full-page, CLI, and getting-started docs for + improved consistency ## 3.50.0 -- Document all five deepCompare configuration options (compareThreshold, diffAlgorithm, ignoreThreshold, ignoreWhitespace, applyBlur) with reference tables -- Support auto-chunking via estimatedSnapsCount for custom integrations, removing need for manual chunks configuration +- Document all five deepCompare configuration options (compareThreshold, + diffAlgorithm, ignoreThreshold, ignoreWhitespace, applyBlur) with reference + tables +- Support auto-chunking via estimatedSnapsCount for custom integrations, + removing need for manual chunks configuration - Document --skippedExamples option for filtering snapshot examples -- Reduce documentation duplication by extracting shared MDX partials for installation, API keys, and troubleshooting -- Improve accessibility with increased color contrast for links in code blocks and throughout documentation +- Reduce documentation duplication by extracting shared MDX partials for + installation, API keys, and troubleshooting +- Improve accessibility with increased color contrast for links in code blocks + and throughout documentation - Add package manager tabs (npm, pnpm, yarn) to installation instructions ## 3.49.1 -- Add documentation for merge ref checkouts to improve discoverability of this workflow +- Add documentation for merge ref checkouts to improve discoverability of this + workflow ## 3.49.0 @@ -167,7 +185,7 @@ This repo is the home of happo.io documentation, served at docs.happo.io ## 3.40.0 -- Graduate next docs to current +- Graduate next docs to current - Update CLI documentation to reflect new flags ## 3.39.0 diff --git a/buildHappoCustom.mjs b/buildHappoCustom.mjs index 4f585ba..fa5858e 100644 --- a/buildHappoCustom.mjs +++ b/buildHappoCustom.mjs @@ -118,7 +118,11 @@ happoCustom.registerExample({ console.log(`Generated bundle.js with ${examples.length} examples`); console.log(`Custom package created in: ${buildDir}`); - return { rootDir: buildDir, entryPoint: 'bundle.js', estimatedSnapsCount: examples.length * 2 }; + return { + rootDir: buildDir, + entryPoint: 'bundle.js', + estimatedSnapsCount: examples.length * 2, + }; } // Run the function if this file is executed directly diff --git a/docs/_partials/email-notifications.mdx b/docs/_partials/email-notifications.mdx index da92b3d..8048a6e 100644 --- a/docs/_partials/email-notifications.mdx +++ b/docs/_partials/email-notifications.mdx @@ -1,7 +1,7 @@ ### Email notifications -If you set the `--notify` CLI argument as part of your {props.framework} run, an email -will be sent out when the Happo comparison report is ready. +If you set the `--notify` CLI argument as part of your {props.framework} run, an +email will be sent out when the Happo comparison report is ready. Usage instructions for `--notify` are available in [the Continuous Integration docs](continuous-integration.md#email-notifications). diff --git a/docs/_partials/styles-missing.mdx b/docs/_partials/styles-missing.mdx index 022a680..bc9f3fb 100644 --- a/docs/_partials/styles-missing.mdx +++ b/docs/_partials/styles-missing.mdx @@ -8,5 +8,5 @@ happened: something like `#start-page .header { color: red }` and screenshoot `.header`, the red color will be missing. This is because Happo only sees the `.header` element, never the surrounding page. -- There could be a bug in how `{props.module}` collects styles and assets. - Reach out to support@happo.io and we'll triage. +- There could be a bug in how `{props.module}` collects styles and assets. Reach + out to support@happo.io and we'll triage. diff --git a/docs/accessibility.md b/docs/accessibility.md index 573293f..eb52a6e 100644 --- a/docs/accessibility.md +++ b/docs/accessibility.md @@ -71,9 +71,9 @@ We support multiple WCAG conformance levels: ### Configuring axe options Happo workers read an optional `window.happoAxeOptions` object before running -accessibility checks. When present, the options you specify are merged in on -top of the Happo defaults, which lets you tweak the axe-core run without -replacing the defaults wholesale. See the +accessibility checks. When present, the options you specify are merged in on top +of the Happo defaults, which lets you tweak the axe-core run without replacing +the defaults wholesale. See the [axe-core API reference](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter) for the full list of supported options. @@ -96,8 +96,8 @@ Where you define `window.happoAxeOptions` depends on your testing framework. #### Storybook -Set the options in `.storybook/preview.js` so they are defined before any -story is rendered: +Set the options in `.storybook/preview.js` so they are defined before any story +is rendered: ```js title=".storybook/preview.js" import 'happo/storybook/register'; @@ -144,7 +144,7 @@ options are set on every page load, before any app code runs: ```js title="cypress/support/e2e.js" import 'happo/cypress'; -Cypress.on('window:before:load', (win) => { +Cypress.on('window:before:load', win => { win.happoAxeOptions = { rules: { 'color-contrast': { enabled: false }, diff --git a/docs/cli.mdx b/docs/cli.mdx index af231ba..21e8dc7 100644 --- a/docs/cli.mdx +++ b/docs/cli.mdx @@ -15,8 +15,8 @@ needs. ## Authentication -The `happo` CLI requires authentication to communicate with the happo.io service. -You can authenticate in two ways: +The `happo` CLI requires authentication to communicate with the happo.io +service. You can authenticate in two ways: 1. **API Key and Secret** (recommended for CI and production): Provide `apiKey` and `apiSecret` in your configuration file or as environment variables. See @@ -86,7 +86,6 @@ npm run happo finalize npm run happo finalize --nonce [NONCE] ``` - ### Flake command List [reported flakes](reporting-flake.md) for a project. By default, results @@ -256,23 +255,22 @@ npm run happo --skip '[{"component":"Card"},{"component":"Button","variant":"pri npm run happo --skip '[{"storyFile":"./src/stories/Card.stories.js"}]' ``` -See [Partial runs](storybook#partial-runs) in the Storybook guide for how to -use `--skip` to reduce quota usage. +See [Partial runs](storybook#partial-runs) in the Storybook guide for how to use +`--skip` to reduce quota usage. ### `--only ` JSON array of components or story files to exclusively render, skipping all -others. Uses the same entry format as [`--skip`](#--skip-json). The -`storyFile` entry form is Storybook-only; the `component` form works for all -integrations. +others. Uses the same entry format as [`--skip`](#--skip-json). The `storyFile` +entry form is Storybook-only; the `component` form works for all integrations. ```sh npm run happo --only '[{"component":"Card"},{"storyFile":"./src/stories/Button.stories.js"}]' ``` -See [Partial runs](storybook#partial-runs) in the Storybook guide for how to -use `--only` to reduce quota usage, or [Local development](local-development) -for using it from a developer's machine. +See [Partial runs](storybook#partial-runs) in the Storybook guide for how to use +`--only` to reduce quota usage, or [Local development](local-development) for +using it from a developer's machine. ### `--githubToken ` @@ -290,8 +288,8 @@ These options apply only to the `happo flake` command. ### `--allProjects` -List flakes across all projects. By default, only flakes for the current -project (from your config) are shown. +List flakes across all projects. By default, only flakes for the current project +(from your config) are shown. ```sh npm run happo flake --allProjects diff --git a/docs/configuration.md b/docs/configuration.md index 19a1440..f2f5b18 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -371,9 +371,9 @@ When `true` (default behavior), media queries that use ### Target `allowPointerEvents` -Since v6.8.0, pointer events are allowed by default. Happo no longer injects -CSS to disable pointer events, so mouse interactions in tests work without any -extra configuration. +Since v6.8.0, pointer events are allowed by default. Happo no longer injects CSS +to disable pointer events, so mouse interactions in tests work without any extra +configuration. If you notice unexpected diffs caused by hover effects, you can set `allowPointerEvents: false` to restore the previous behavior: @@ -392,9 +392,8 @@ export default defineConfig({ }); ``` -:::note -Before v6.8.0, the default was `allowPointerEvents: false`, which caused Happo -to inject this CSS: +:::note Before v6.8.0, the default was `allowPointerEvents: false`, which caused +Happo to inject this CSS: ```css * { @@ -403,8 +402,7 @@ to inject this CSS: ``` This prevented spurious hover effects but also caused Storybook interaction -tests that relied on pointer events to be silently skipped. -::: +tests that relied on pointer events to be silently skipped. ::: If you're interested in testing hover, focus, and active states with Happo, you may also want to use the @@ -475,13 +473,13 @@ export default defineConfig({ }); ``` -| Option | Type | Default | Description | -|---|---|---|---| -| `compareThreshold` | `number` | — | How different two pixels are allowed to be (0–1). Required when using deepCompare. | -| `diffAlgorithm` | `'color-delta'` \| `'ssim'` | `'color-delta'` | Algorithm used for pixel comparison. `'ssim'` is experimental. | -| `ignoreThreshold` | `number` | `0` | Fraction of pixels allowed to exceed `compareThreshold` before the screenshot is considered a diff (e.g. `0.01` = 1% of pixels). | -| `ignoreWhitespace` | `boolean` | `false` | When `true`, whitespace-only differences are ignored. | -| `applyBlur` | `boolean` | `false` | When `true`, a blur is applied before comparing to smooth out subtle edge differences. | +| Option | Type | Default | Description | +| ------------------ | --------------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `compareThreshold` | `number` | — | How different two pixels are allowed to be (0–1). Required when using deepCompare. | +| `diffAlgorithm` | `'color-delta'` \| `'ssim'` | `'color-delta'` | Algorithm used for pixel comparison. `'ssim'` is experimental. | +| `ignoreThreshold` | `number` | `0` | Fraction of pixels allowed to exceed `compareThreshold` before the screenshot is considered a diff (e.g. `0.01` = 1% of pixels). | +| `ignoreWhitespace` | `boolean` | `false` | When `true`, whitespace-only differences are ignored. | +| `applyBlur` | `boolean` | `false` | When `true`, a blur is applied before comparing to smooth out subtle edge differences. | ## `integration` @@ -650,7 +648,8 @@ When set to `true`, Happo automatically collects and represents `:focus`, capture interactive states without manually adding `data-happo-*` attributes to your markup. -This option requires the [`applyPseudoClasses` target option](#target-applypseudoclasses). +This option requires the +[`applyPseudoClasses` target option](#target-applypseudoclasses). ```js title="happo.config.ts" import { defineConfig } from 'happo'; diff --git a/docs/getting-started.mdx b/docs/getting-started.mdx index 2b9b6aa..d49f05f 100644 --- a/docs/getting-started.mdx +++ b/docs/getting-started.mdx @@ -22,8 +22,8 @@ consists of a set of components and variants of those components. There are many ways to do this, and it all depends on your existing tech stack, your application, experience with other test frameworks, and more. -- A [Storybook](storybook.mdx) application can serve as the test suite driver for - Happo. +- A [Storybook](storybook.mdx) application can serve as the test suite driver + for Happo. - By integrating Happo with [Cypress](cypress.mdx) or [Playwright](playwright.mdx), you can turn your end-to-end tests into a Happo test suite. diff --git a/docs/local-development.md b/docs/local-development.md index 1e62b16..9e3abf9 100644 --- a/docs/local-development.md +++ b/docs/local-development.md @@ -4,9 +4,9 @@ title: Local development --- When you're iterating on a component, it's often useful to run Happo from your -machine before opening a PR. Combined with the -[`--only`](cli#--only-json) flag, you can scope the run down to just the -components you care about and get a link to the report in the browser. +machine before opening a PR. Combined with the [`--only`](cli#--only-json) flag, +you can scope the run down to just the components you care about and get a link +to the report in the browser. This works for both the [Storybook integration](storybook.mdx) and [custom integrations](custom.mdx). @@ -20,32 +20,31 @@ When Happo finishes uploading, it logs two URLs: [HAPPO] Async comparison URL: https://happo.io/a/8/jobs/2233741 ``` -The second one — the **async comparison URL** — is the one to open. It takes -you to a job page that shows the diff against the baseline as the screenshots -come in. +The second one — the **async comparison URL** — is the one to open. It takes you +to a job page that shows the diff against the baseline as the screenshots come +in. -The report you land on will contain **all** components and snapshots from -your project — the ones included via `--only` are freshly rendered, and the -rest are carried over from the baseline report so the comparison is complete. -You're only charged quota for the snapshots that were actually generated. +The report you land on will contain **all** components and snapshots from your +project — the ones included via `--only` are freshly rendered, and the rest are +carried over from the baseline report so the comparison is complete. You're only +charged quota for the snapshots that were actually generated. ## Running with `--only` The `--only` flag accepts a JSON array of components or story files to render -exclusively. See the [CLI reference](cli#--only-json) for the full entry -format. +exclusively. See the [CLI reference](cli#--only-json) for the full entry format. ```sh npm run happo --only '[{"component":"Card"}]' ``` -Typing the JSON by hand gets old quickly, so a small wrapper script is -usually nicer to work with. Two patterns we've found useful are below. +Typing the JSON by hand gets old quickly, so a small wrapper script is usually +nicer to work with. Two patterns we've found useful are below. ## Pattern 1: pass the file as an argument -The simplest setup is a script that takes a single file path on the command -line and forwards it to Happo as `--only`. The script needs to: +The simplest setup is a script that takes a single file path on the command line +and forwards it to Happo as `--only`. The script needs to: 1. Read the file (or component) name from `process.argv`. 2. Build the `--only` JSON payload — for example @@ -60,34 +59,35 @@ Run it like this: node scripts/happo-only.mjs src/stories/Button.stories.js ``` -When the run finishes, click the **Async comparison URL** in the output to -see the report. +When the run finishes, click the **Async comparison URL** in the output to see +the report. ## Pattern 2: detect changed files automatically To run Happo against every story or component affected by your in-flight changes, you can combine `git diff` with a dependency-graph tool such as [`jest-haste-map`](https://github.com/jestjs/jest/tree/main/packages/jest-haste-map) -or [`dependency-cruiser`](https://github.com/sverweij/dependency-cruiser). -The idea: collect the files you've changed since the base branch, then walk -the import graph to find the story/example files that (transitively) depend -on any of them. +or [`dependency-cruiser`](https://github.com/sverweij/dependency-cruiser). The +idea: collect the files you've changed since the base branch, then walk the +import graph to find the story/example files that (transitively) depend on any +of them. The script needs to: 1. Collect changed files — `git diff --name-only origin/main...HEAD` for committed work plus `git diff --name-only` for uncommitted edits. 2. Build a dependency graph for the project. `jest-haste-map` and - `dependency-cruiser` are both good options; any tool that can answer - "given file X, what does it import?" works. -3. Find the story or example files that depend on a changed file. For - Storybook, filter to `*.stories.{js,ts,jsx,tsx}`; for custom - integrations, filter to whatever pattern your examples live under. -4. Map each match to an `--only` entry — `{ storyFile: './path/to/foo.stories.js' }` - for Storybook, `{ component: 'Foo' }` for custom integrations. -5. Spawn `happo --only ` with inherited stdio. Always log the JSON - you computed — if a run looks wrong, that log is the fastest way to see - what was included. + `dependency-cruiser` are both good options; any tool that can answer "given + file X, what does it import?" works. +3. Find the story or example files that depend on a changed file. For Storybook, + filter to `*.stories.{js,ts,jsx,tsx}`; for custom integrations, filter to + whatever pattern your examples live under. +4. Map each match to an `--only` entry — + `{ storyFile: './path/to/foo.stories.js' }` for Storybook, + `{ component: 'Foo' }` for custom integrations. +5. Spawn `happo --only ` with inherited stdio. Always log the JSON you + computed — if a run looks wrong, that log is the fastest way to see what was + included. Run it from the project root with no arguments: @@ -95,15 +95,15 @@ Run it from the project root with no arguments: node scripts/happo-changed.mjs ``` -Happo runs a partial build — only the components your change touches are -freshly rendered, and the report still includes everything else carried over -from the baseline so the comparison is complete. The CLI prints the -**Async comparison URL** when the run is done. +Happo runs a partial build — only the components your change touches are freshly +rendered, and the report still includes everything else carried over from the +baseline so the comparison is complete. The CLI prints the **Async comparison +URL** when the run is done. ## Tips -- Log the `--only` value your script computes. It's the quickest way to - diagnose a run that included more or fewer components than you expected. -- If your script can't find any affected stories, exit early instead of - running a full Happo build — `--only` with an empty array is not the same - as "nothing changed." +- Log the `--only` value your script computes. It's the quickest way to diagnose + a run that included more or fewer components than you expected. +- If your script can't find any affected stories, exit early instead of running + a full Happo build — `--only` with an empty array is not the same as "nothing + changed." diff --git a/docs/single-sign-on.md b/docs/single-sign-on.md index 0c8c7e6..1fd67b9 100644 --- a/docs/single-sign-on.md +++ b/docs/single-sign-on.md @@ -103,8 +103,8 @@ Happo reads the following attributes from the incoming SAML assertion: - **email** (required) -- The user's email address. Used to identify the Happo user, and sign-in will fail if it's missing. The attribute can be named - `email` or `emailaddress` -- Happo accepts both. The provider-specific - setups below use `emailaddress`. + `email` or `emailaddress` -- Happo accepts both. The provider-specific setups + below use `emailaddress`. - **name** (optional) -- The user's display name, shown in the Happo UI alongside their avatar. - **picture** (optional) -- A URL pointing to the user's avatar image. @@ -126,9 +126,9 @@ users. These users have access to and can review reports, and they have basic access to some other account specific pages (like the dashboard). If the `roles` attribute contains `Happo Admin`, the user is made an -administrator of the Happo account. If it contains `Happo Reviewer`, the user -is granted the Reviewer role -- this is required when the account is configured -to only allow reviewing by users with the Reviewer role. +administrator of the Happo account. If it contains `Happo Reviewer`, the user is +granted the Reviewer role -- this is required when the account is configured to +only allow reviewing by users with the Reviewer role. ## Google Workspace (GSuite) @@ -280,8 +280,8 @@ use [Auth0 specific instructions](#auth0-by-okta). > **Important toggles for Okta** > -> - In **Configure SAML → Show Advanced Settings**, set **Signature -> Algorithm** to `RSA-SHA256` and **Digest Algorithm** to `SHA256`. +> - In **Configure SAML → Show Advanced Settings**, set **Signature Algorithm** +> to `RSA-SHA256` and **Digest Algorithm** to `SHA256`. > - Set **Assertion Signature** to **Signed**. **Response Signature** can stay > on the Okta default; Happo only requires the assertion to be signed. > - The **Single sign-on URL** must be diff --git a/docs/storybook.mdx b/docs/storybook.mdx index e40b853..5437325 100644 --- a/docs/storybook.mdx +++ b/docs/storybook.mdx @@ -99,7 +99,8 @@ npm run happo Happo supports running only a subset of your stories using the [`--only`](cli#--only-json) and [`--skip`](cli#--skip-json) CLI options (available since v6.10.0). This is useful for reducing quota usage and speeding -up your test suite — similar to how `--onlyStoryFiles` works with other providers. +up your test suite — similar to how `--onlyStoryFiles` works with other +providers. ### Using `--only` for inclusion @@ -142,9 +143,9 @@ When you run Happo with `--only` or `--skip`, Happo will: ### CI setup -To use partial runs in CI, set up triggers to run Happo on pushes to PRs as -well as pushes to the main/default branch. Happo will perform partial runs for -PRs and full baseline runs for the main branch. +To use partial runs in CI, set up triggers to run Happo on pushes to PRs as well +as pushes to the main/default branch. Happo will perform partial runs for PRs +and full baseline runs for the main branch. ### Edge cases @@ -159,8 +160,8 @@ PRs and full baseline runs for the main branch. ### Reading partial run reports -In Happo comparison reports, the sidebar shows the effects of a partial run. -You will see something like: +In Happo comparison reports, the sidebar shows the effects of a partial run. You +will see something like: > 6,809 snapshots — 2,233 quota used — 113 components diff --git a/docs/webhooks.md b/docs/webhooks.md index 457202c..9b35eb8 100644 --- a/docs/webhooks.md +++ b/docs/webhooks.md @@ -22,8 +22,8 @@ account to use this feature. Enter a URL where your server is listening and a secret to use when signing requests. -Use the checkboxes to select which event types the webhook should receive. -At least one event type must be enabled. +Use the checkboxes to select which event types the webhook should receive. At +least one event type must be enabled. ## Event types @@ -168,14 +168,14 @@ It is also sent when the report is undone. **Field reference** -| Field | Type | Notes | -|---|---|---| -| `action` | `"reported"` \| `"undone"` | Whether a flake was just reported or had its report withdrawn. | -| `link` | string | Best page link to view the diff: comparison page when available, otherwise the snapshot-vs-snapshot page. | -| `reportedAt` | ISO 8601 string | Server-side event timestamp; useful for de-duping retries. | -| `project.id` / `project.name` | number / string | The project the flake belongs to. | -| `comparison` | object \| `null` | Most flake reporting happens in the context of a comparison, but it is not guaranteed. Contains `id`, `beforeSha`, `afterSha` when present. | -| `snapshot1` / `snapshot2` | object | The two snapshots being compared. `width`/`height` may be `null` for accessibility snapshots. | +| Field | Type | Notes | +| ----------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| `action` | `"reported"` \| `"undone"` | Whether a flake was just reported or had its report withdrawn. | +| `link` | string | Best page link to view the diff: comparison page when available, otherwise the snapshot-vs-snapshot page. | +| `reportedAt` | ISO 8601 string | Server-side event timestamp; useful for de-duping retries. | +| `project.id` / `project.name` | number / string | The project the flake belongs to. | +| `comparison` | object \| `null` | Most flake reporting happens in the context of a comparison, but it is not guaranteed. Contains `id`, `beforeSha`, `afterSha` when present. | +| `snapshot1` / `snapshot2` | object | The two snapshots being compared. `width`/`height` may be `null` for accessibility snapshots. | ## Verifying signatures diff --git a/runHappo.mjs b/runHappo.mjs index eb45fa4..a438900 100644 --- a/runHappo.mjs +++ b/runHappo.mjs @@ -53,9 +53,7 @@ async function enumerateSourceComponents() { 'versioned_docs/version-*/**/*.{md,mdx}', )) { if (/(?:^|\/)_partials\//.test(file)) continue; - const match = file.match( - /^versioned_docs\/version-([^/]+)\/(.+)\.mdx?$/, - ); + const match = file.match(/^versioned_docs\/version-([^/]+)\/(.+)\.mdx?$/); if (match) components.push(`docs/${match[1]}/${match[2]}`); } @@ -81,9 +79,7 @@ async function computeSkipList() { for (const file of changed) { const component = fileToComponent(file); if (component === 'unknown') { - console.log( - `Non-doc change detected (${file}); running all components.`, - ); + console.log(`Non-doc change detected (${file}); running all components.`); return null; } touched.add(component); diff --git a/versioned_docs/version-legacy/configuration.md b/versioned_docs/version-legacy/configuration.md index e2e17a5..7d5075e 100644 --- a/versioned_docs/version-legacy/configuration.md +++ b/versioned_docs/version-legacy/configuration.md @@ -321,11 +321,10 @@ module.exports = { }; ``` -:::note -As of v6.8.0, `allowPointerEvents` defaults to `true` and this CSS is no longer -injected. See the [current documentation](../../docs/configuration.md#target-allowpointerevents) -for updated guidance. -::: +:::note As of v6.8.0, `allowPointerEvents` defaults to `true` and this CSS is no +longer injected. See the +[current documentation](../../docs/configuration.md#target-allowpointerevents) +for updated guidance. ::: If you're interested in testing hover, focus, and active states with Happo, you may also want to use the diff --git a/versioned_docs/version-legacy/debugging.md b/versioned_docs/version-legacy/debugging.md index 5325278..2a2938e 100644 --- a/versioned_docs/version-legacy/debugging.md +++ b/versioned_docs/version-legacy/debugging.md @@ -23,8 +23,8 @@ and there are a few buttons here that can be useful. Depending on the type of integration you are using, you'll see one or more of these buttons: - A "View recorded HTML" button (for [Happo Examples](examples.mdx) and - [Cypress setups](cypress.mdx)) that allow you to see the rendered HTML directly - in the browser, along with the CSS used. + [Cypress setups](cypress.mdx)) that allow you to see the rendered HTML + directly in the browser, along with the CSS used. - A "Download assets" button, where you can grab the images, fonts, etc, that were used when taking the screenshot. - A "Download static package" button that let's you fetch the statically built diff --git a/versioned_docs/version-legacy/getting-started.md b/versioned_docs/version-legacy/getting-started.md index 0b8a611..37839c9 100644 --- a/versioned_docs/version-legacy/getting-started.md +++ b/versioned_docs/version-legacy/getting-started.md @@ -16,8 +16,8 @@ consists of a set of components and variants of those components. There are many ways to do this, and it all depends on your existing tech stack, your application, experience with other test frameworks, and more. -- A [Storybook](storybook.mdx) application can serve as the test suite driver for - Happo. +- A [Storybook](storybook.mdx) application can serve as the test suite driver + for Happo. - By using the [Static bundle integration](static.md), you can bring your own javascript bundle and have full control over the build phase and execution. - By integrating Happo with [Cypress](cypress.mdx) or diff --git a/versioned_sidebars/version-legacy-sidebars.json b/versioned_sidebars/version-legacy-sidebars.json index 4f27422..e7241e3 100644 --- a/versioned_sidebars/version-legacy-sidebars.json +++ b/versioned_sidebars/version-legacy-sidebars.json @@ -8,13 +8,8 @@ "cli", "browsers" ], - "Configuration": [ - "configuration", - "plugins" - ], - "Accessibility": [ - "accessibility" - ], + "Configuration": ["configuration", "plugins"], + "Accessibility": ["accessibility"], "Integrations": [ "examples", "static", diff --git a/versions.json b/versions.json index 2c0f623..db7972b 100644 --- a/versions.json +++ b/versions.json @@ -1,3 +1 @@ -[ - "legacy" -] +["legacy"]