From 8aa2b0b1e8d1b386cd0b01fdf6281e1d2859e61b Mon Sep 17 00:00:00 2001
From: "kiloconnect[bot]" <240665456+kiloconnect[bot]@users.noreply.github.com>
Date: Thu, 12 Mar 2026 10:57:08 +0000
Subject: [PATCH] fix: eliminate network dependency in avatar visual regression
test
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
The WithImage avatar story fetched an external GitHub avatar URL, creating
a race condition: if the image hadn't loaded before the screenshot was
taken, the fallback text was captured instead, causing a spurious baseline
diff (809 → 159 bytes).
Two fixes:
- Replace the external URL with an inline data URI so the story never
depends on network availability or latency.
- Add a waitForImages() helper to the visual regression test that waits
for all ![]()
elements inside #storybook-root to finish loading before
taking the screenshot. This guards against future stories that may
reference slow-loading images.
---
.../kilo-ui/src/stories/avatar.stories.tsx | 7 ++++++-
.../kilo-ui/tests/visual-regression.spec.ts | 19 +++++++++++++++++++
.../with-image-chromium-linux.png | 3 ---
3 files changed, 25 insertions(+), 4 deletions(-)
delete mode 100644 packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-avatar/with-image-chromium-linux.png
diff --git a/packages/kilo-ui/src/stories/avatar.stories.tsx b/packages/kilo-ui/src/stories/avatar.stories.tsx
index 6ee6edb411c..9cc53007a4e 100644
--- a/packages/kilo-ui/src/stories/avatar.stories.tsx
+++ b/packages/kilo-ui/src/stories/avatar.stories.tsx
@@ -33,10 +33,15 @@ export const WithCustomColors: Story = {
args: { fallback: "KL", background: "#1a4d8f", foreground: "#ffffff" },
}
+// Inline data URI so the visual regression test never depends on network.
+// 1×1 teal PNG — small enough to embed, large enough to prove ![]()
rendering.
+const AVATAR_DATA_URI =
+ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAADZJREFUWIW2xzERACAQBLA7/pWACxrsgfFhJpmtsrMn0N2S2RNIZk+gu2X2BLpbZk8gmT0B4AWJGwMhBjARKwAAAABJRU5ErkJggg=="
+
export const WithImage: Story = {
args: {
fallback: "OC",
- src: "https://avatars.githubusercontent.com/u/154330673?s=48",
+ src: AVATAR_DATA_URI,
},
}
diff --git a/packages/kilo-ui/tests/visual-regression.spec.ts b/packages/kilo-ui/tests/visual-regression.spec.ts
index 553ce269027..24662af93fe 100644
--- a/packages/kilo-ui/tests/visual-regression.spec.ts
+++ b/packages/kilo-ui/tests/visual-regression.spec.ts
@@ -45,6 +45,24 @@ async function disableAnimations(page: Page) {
})
}
+// Wait for every ![]()
inside the story root to finish loading so screenshots
+// never capture an intermediate state with missing / half-loaded images.
+async function waitForImages(page: Page) {
+ await page.evaluate(() => {
+ const imgs = document.querySelectorAll("#storybook-root img")
+ return Promise.all(
+ Array.from(imgs).map(
+ (img) =>
+ img.complete ||
+ new Promise((resolve) => {
+ img.addEventListener("load", () => resolve(), { once: true })
+ img.addEventListener("error", () => resolve(), { once: true })
+ }),
+ ),
+ )
+ })
+}
+
// Stories to skip from visual regression:
// - Font/Favicon: inject into , no visible content in #storybook-root
// - Typewriter: uses JS setTimeout + Math.random(), inherently non-deterministic
@@ -72,6 +90,7 @@ for (const story of stories) {
await disableAnimations(page)
// Wait for Kobalte/SolidJS to finish hydrating interactive components
await page.waitForSelector("#storybook-root *", { state: "attached" })
+ await waitForImages(page)
// Screenshot just the story content, not the full 1280x720 canvas.
// Use [component, variant] path so snapshots are grouped per component dir.
diff --git a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-avatar/with-image-chromium-linux.png b/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-avatar/with-image-chromium-linux.png
deleted file mode 100644
index 0e23ee9a5f4..00000000000
--- a/packages/kilo-ui/tests/visual-regression.spec.ts-snapshots/components-avatar/with-image-chromium-linux.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:79b80c13a1fa198f1602c85728a48467ac9b47c6430dadd6ff698f9c4d39980e
-size 809