Skip to content

Commit

Permalink
fix(dev): Restore ability to update UI snapshots locally (#25138)
Browse files Browse the repository at this point in the history
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
  • Loading branch information
Twixes and github-actions[bot] authored Sep 23, 2024
1 parent 3d7992d commit e1c0eb6
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 7 deletions.
21 changes: 16 additions & 5 deletions .storybook/test-runner.ts
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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<void> {
await page.waitForLoadState("domcontentloaded");
await page.waitForLoadState("load");
if (process.env.CI) {
await page.waitForLoadState("networkidle");
}
await page.evaluate(() => document.fonts.ready);
}
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit e1c0eb6

Please sign in to comment.