mirrors/posthog
0
0
Fork 0
mirror of https://github.com/PostHog/posthog.git synced 2024-11-21 13:39:22 +01:00
Code Issues Releases Activity

fix(dev): Restore ability to update UI snapshots locally (#25138)

Browse Source 
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Michael Matloka 2024-09-23 17:25:07 +02:00 committed by GitHub
parent 3d7992d97f
commit e1c0eb642c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
.storybook/test-runner.ts
View File

@ -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<void> {
await page.waitForLoadState("domcontentloaded");
await page.waitForLoadState("load");
if (process.env.CI) {
await page.waitForLoadState("networkidle");
}
await page.evaluate(() => document.fonts.ready);
}

4
package.json
View File

@ -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",