From e1c0eb642cce7b5a58b56e4ccbc3a91534db6a40 Mon Sep 17 00:00:00 2001
From: Michael Matloka <dev@twixes.com>
Date: Mon, 23 Sep 2024 17:25:07 +0200
Subject: [PATCH] fix(dev): Restore ability to update UI snapshots locally
 (#25138)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
---
 .storybook/test-runner.ts | 21 ++++++++++++++++-----
 package.json              |  4 ++--
 2 files changed, 18 insertions(+), 7 deletions(-)

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<void> {
+    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",