diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts index cda11a2e933..5b6a41786ea 100644 --- a/.storybook/test-runner.ts +++ b/.storybook/test-runner.ts @@ -1,5 +1,5 @@ import { toMatchImageSnapshot } from 'jest-image-snapshot' -import { getStoryContext, TestRunnerConfig, TestContext, waitForPageReady } from '@storybook/test-runner' +import { getStoryContext, TestRunnerConfig, TestContext } from '@storybook/test-runner' import type { Locator, Page, LocatorScreenshotOptions } from '@playwright/test' import type { Mocks } from '~/mocks/utils' import { StoryContext } from '@storybook/csf' @@ -154,24 +154,22 @@ async function expectStoryToMatchSnapshot( await Promise.all(waitForSelector.map((selector) => page.waitForSelector(selector))) } - // snapshot light theme + // Snapshot light theme await page.evaluate(() => { document.body.setAttribute('theme', 'light') }) - // Wait for all images to load await waitForPageReady(page) await page.waitForFunction(() => Array.from(document.images).every((i: HTMLImageElement) => !!i.naturalWidth)) await page.waitForTimeout(2000) await check(page, context, browser, 'light', storyContext.parameters?.testOptions?.snapshotTargetSelector) - // snapshot dark theme + // Snapshot dark theme await page.evaluate(() => { document.body.setAttribute('theme', 'dark') }) - // Wait for all images to load await waitForPageReady(page) await page.waitForFunction(() => Array.from(document.images).every((i: HTMLImageElement) => !!i.naturalWidth)) await page.waitForTimeout(100) @@ -259,3 +257,16 @@ async function expectLocatorToMatchStorySnapshot( failureThresholdType: 'percent', }) } + +/** + * Just like the `waitForPageReady` helper offered by Playwright - except we only wait for `networkidle` in CI, + * as it doesn't work with local Storybook (the live reload feature keeps up a long-running request, so we aren't idle). + */ +async function waitForPageReady(page: Page): Promise { + await page.waitForLoadState("domcontentloaded"); + await page.waitForLoadState("load"); + if (process.env.CI) { + await page.waitForLoadState("networkidle"); + } + await page.evaluate(() => document.fonts.ready); +} diff --git a/package.json b/package.json index 9d7d4f1a164..d44d9449291 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,8 @@ "test": "pnpm test:unit && pnpm test:visual", "test:unit": "jest --testPathPattern=frontend/", "jest": "jest", - "test:visual": "rm -rf frontend/__snapshots__/__failures__/ && docker compose -f docker-compose.playwright.yml run --rm -it --build playwright pnpm test:visual:update --url http://host.docker.internal:6006", - "test:visual:update": "NODE_OPTIONS=--max-old-space-size=6144 test-storybook -u --browsers chromium webkit --no-index-json", + "test:visual:update": "rm -rf frontend/__snapshots__/__failures__/ && docker compose -f docker-compose.playwright.yml run --rm -it --build playwright pnpm test:visual:update:docker --url http://host.docker.internal:6006", + "test:visual:update:docker": "NODE_OPTIONS=--max-old-space-size=6144 test-storybook -u --browsers chromium webkit --no-index-json", "test:visual:debug": "PWDEBUG=1 NODE_OPTIONS=--max-old-space-size=6144 test-storybook --browsers chromium webkit --no-index-json", "test:visual:ci:update": "test-storybook -u --no-index-json --maxWorkers=2", "test:visual:ci:verify": "test-storybook --ci --no-index-json --maxWorkers=2",