VRT: Mock avatars to return stable images (#4547)

* just trying something out * should come sooner * test(vrt): update snapshots --------- Co-authored-by: siddharthkp <[email protected]>
primer · May 1, 2024 · 43a193c · 43a193c
1 parent abeef0b
commit 43a193c
Show file tree

Hide file tree

Showing 73 changed files with 6 additions and 0 deletions.
diff --git a/...onList.test.ts-snapshots/ActionList-Block-Description-dark-colorblind-linux.png b/...onList.test.ts-snapshots/ActionList-Block-Description-dark-colorblind-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Block-Description-dark-dimmed-linux.png b/...ActionList.test.ts-snapshots/ActionList-Block-Description-dark-dimmed-linux.png
diff --git a/...ist.test.ts-snapshots/ActionList-Block-Description-dark-high-contrast-linux.png b/...ist.test.ts-snapshots/ActionList-Block-Description-dark-high-contrast-linux.png
diff --git a/...onents/ActionList.test.ts-snapshots/ActionList-Block-Description-dark-linux.png b/...onents/ActionList.test.ts-snapshots/ActionList-Block-Description-dark-linux.png
diff --git a/...onList.test.ts-snapshots/ActionList-Block-Description-dark-tritanopia-linux.png b/...onList.test.ts-snapshots/ActionList-Block-Description-dark-tritanopia-linux.png
diff --git a/...nList.test.ts-snapshots/ActionList-Block-Description-light-colorblind-linux.png b/...nList.test.ts-snapshots/ActionList-Block-Description-light-colorblind-linux.png
diff --git a/...st.test.ts-snapshots/ActionList-Block-Description-light-high-contrast-linux.png b/...st.test.ts-snapshots/ActionList-Block-Description-light-high-contrast-linux.png
diff --git a/...nents/ActionList.test.ts-snapshots/ActionList-Block-Description-light-linux.png b/...nents/ActionList.test.ts-snapshots/ActionList-Block-Description-light-linux.png
diff --git a/...nList.test.ts-snapshots/ActionList-Block-Description-light-tritanopia-linux.png b/...nList.test.ts-snapshots/ActionList-Block-Description-light-tritanopia-linux.png
diff --git a/...-snapshots/ActionList-Group-With-Filled-Title-Old-Api-dark-colorblind-linux.png b/...-snapshots/ActionList-Group-With-Filled-Title-Old-Api-dark-colorblind-linux.png
diff --git a/...t.ts-snapshots/ActionList-Group-With-Filled-Title-Old-Api-dark-dimmed-linux.png b/...t.ts-snapshots/ActionList-Group-With-Filled-Title-Old-Api-dark-dimmed-linux.png
diff --git a/...apshots/ActionList-Group-With-Filled-Title-Old-Api-dark-high-contrast-linux.png b/...apshots/ActionList-Group-With-Filled-Title-Old-Api-dark-high-contrast-linux.png
diff --git a/...ist.test.ts-snapshots/ActionList-Group-With-Filled-Title-Old-Api-dark-linux.png b/...ist.test.ts-snapshots/ActionList-Group-With-Filled-Title-Old-Api-dark-linux.png
diff --git a/...-snapshots/ActionList-Group-With-Filled-Title-Old-Api-dark-tritanopia-linux.png b/...-snapshots/ActionList-Group-With-Filled-Title-Old-Api-dark-tritanopia-linux.png
diff --git a/...snapshots/ActionList-Group-With-Filled-Title-Old-Api-light-colorblind-linux.png b/...snapshots/ActionList-Group-With-Filled-Title-Old-Api-light-colorblind-linux.png
diff --git a/...pshots/ActionList-Group-With-Filled-Title-Old-Api-light-high-contrast-linux.png b/...pshots/ActionList-Group-With-Filled-Title-Old-Api-light-high-contrast-linux.png
diff --git a/...st.test.ts-snapshots/ActionList-Group-With-Filled-Title-Old-Api-light-linux.png b/...st.test.ts-snapshots/ActionList-Group-With-Filled-Title-Old-Api-light-linux.png
diff --git a/...snapshots/ActionList-Group-With-Filled-Title-Old-Api-light-tritanopia-linux.png b/...snapshots/ActionList-Group-With-Filled-Title-Old-Api-light-tritanopia-linux.png
diff --git a/....test.ts-snapshots/ActionList-Group-With-Filled-Title-dark-colorblind-linux.png b/....test.ts-snapshots/ActionList-Group-With-Filled-Title-dark-colorblind-linux.png
diff --git a/...List.test.ts-snapshots/ActionList-Group-With-Filled-Title-dark-dimmed-linux.png b/...List.test.ts-snapshots/ActionList-Group-With-Filled-Title-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/ActionList-Group-With-Filled-Title-dark-high-contrast-linux.png b/...st.ts-snapshots/ActionList-Group-With-Filled-Title-dark-high-contrast-linux.png
diff --git a/.../ActionList.test.ts-snapshots/ActionList-Group-With-Filled-Title-dark-linux.png b/.../ActionList.test.ts-snapshots/ActionList-Group-With-Filled-Title-dark-linux.png
diff --git a/....test.ts-snapshots/ActionList-Group-With-Filled-Title-dark-tritanopia-linux.png b/....test.ts-snapshots/ActionList-Group-With-Filled-Title-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/ActionList-Group-With-Filled-Title-light-colorblind-linux.png b/...test.ts-snapshots/ActionList-Group-With-Filled-Title-light-colorblind-linux.png
diff --git a/...t.ts-snapshots/ActionList-Group-With-Filled-Title-light-high-contrast-linux.png b/...t.ts-snapshots/ActionList-Group-With-Filled-Title-light-high-contrast-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Group-With-Filled-Title-light-linux.png b/...ActionList.test.ts-snapshots/ActionList-Group-With-Filled-Title-light-linux.png
diff --git a/...test.ts-snapshots/ActionList-Group-With-Filled-Title-light-tritanopia-linux.png b/...test.ts-snapshots/ActionList-Group-With-Filled-Title-light-tritanopia-linux.png
diff --git a/...-snapshots/ActionList-Group-With-Subtle-Title-Old-Api-dark-colorblind-linux.png b/...-snapshots/ActionList-Group-With-Subtle-Title-Old-Api-dark-colorblind-linux.png
diff --git a/...t.ts-snapshots/ActionList-Group-With-Subtle-Title-Old-Api-dark-dimmed-linux.png b/...t.ts-snapshots/ActionList-Group-With-Subtle-Title-Old-Api-dark-dimmed-linux.png
diff --git a/...apshots/ActionList-Group-With-Subtle-Title-Old-Api-dark-high-contrast-linux.png b/...apshots/ActionList-Group-With-Subtle-Title-Old-Api-dark-high-contrast-linux.png
diff --git a/...ist.test.ts-snapshots/ActionList-Group-With-Subtle-Title-Old-Api-dark-linux.png b/...ist.test.ts-snapshots/ActionList-Group-With-Subtle-Title-Old-Api-dark-linux.png
diff --git a/...-snapshots/ActionList-Group-With-Subtle-Title-Old-Api-dark-tritanopia-linux.png b/...-snapshots/ActionList-Group-With-Subtle-Title-Old-Api-dark-tritanopia-linux.png
diff --git a/...snapshots/ActionList-Group-With-Subtle-Title-Old-Api-light-colorblind-linux.png b/...snapshots/ActionList-Group-With-Subtle-Title-Old-Api-light-colorblind-linux.png
diff --git a/...pshots/ActionList-Group-With-Subtle-Title-Old-Api-light-high-contrast-linux.png b/...pshots/ActionList-Group-With-Subtle-Title-Old-Api-light-high-contrast-linux.png
diff --git a/...st.test.ts-snapshots/ActionList-Group-With-Subtle-Title-Old-Api-light-linux.png b/...st.test.ts-snapshots/ActionList-Group-With-Subtle-Title-Old-Api-light-linux.png
diff --git a/...snapshots/ActionList-Group-With-Subtle-Title-Old-Api-light-tritanopia-linux.png b/...snapshots/ActionList-Group-With-Subtle-Title-Old-Api-light-tritanopia-linux.png
diff --git a/....test.ts-snapshots/ActionList-Group-With-Subtle-Title-dark-colorblind-linux.png b/....test.ts-snapshots/ActionList-Group-With-Subtle-Title-dark-colorblind-linux.png
diff --git a/...List.test.ts-snapshots/ActionList-Group-With-Subtle-Title-dark-dimmed-linux.png b/...List.test.ts-snapshots/ActionList-Group-With-Subtle-Title-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/ActionList-Group-With-Subtle-Title-dark-high-contrast-linux.png b/...st.ts-snapshots/ActionList-Group-With-Subtle-Title-dark-high-contrast-linux.png
diff --git a/.../ActionList.test.ts-snapshots/ActionList-Group-With-Subtle-Title-dark-linux.png b/.../ActionList.test.ts-snapshots/ActionList-Group-With-Subtle-Title-dark-linux.png
diff --git a/....test.ts-snapshots/ActionList-Group-With-Subtle-Title-dark-tritanopia-linux.png b/....test.ts-snapshots/ActionList-Group-With-Subtle-Title-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/ActionList-Group-With-Subtle-Title-light-colorblind-linux.png b/...test.ts-snapshots/ActionList-Group-With-Subtle-Title-light-colorblind-linux.png
diff --git a/...t.ts-snapshots/ActionList-Group-With-Subtle-Title-light-high-contrast-linux.png b/...t.ts-snapshots/ActionList-Group-With-Subtle-Title-light-high-contrast-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Group-With-Subtle-Title-light-linux.png b/...ActionList.test.ts-snapshots/ActionList-Group-With-Subtle-Title-light-linux.png
diff --git a/...test.ts-snapshots/ActionList-Group-With-Subtle-Title-light-tritanopia-linux.png b/...test.ts-snapshots/ActionList-Group-With-Subtle-Title-light-tritanopia-linux.png
diff --git a/...nList.test.ts-snapshots/ActionList-Inline-Description-dark-colorblind-linux.png b/...nList.test.ts-snapshots/ActionList-Inline-Description-dark-colorblind-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Inline-Description-dark-dimmed-linux.png b/...ctionList.test.ts-snapshots/ActionList-Inline-Description-dark-dimmed-linux.png
diff --git a/...st.test.ts-snapshots/ActionList-Inline-Description-dark-high-contrast-linux.png b/...st.test.ts-snapshots/ActionList-Inline-Description-dark-high-contrast-linux.png
diff --git a/...nents/ActionList.test.ts-snapshots/ActionList-Inline-Description-dark-linux.png b/...nents/ActionList.test.ts-snapshots/ActionList-Inline-Description-dark-linux.png
diff --git a/...nList.test.ts-snapshots/ActionList-Inline-Description-dark-tritanopia-linux.png b/...nList.test.ts-snapshots/ActionList-Inline-Description-dark-tritanopia-linux.png
diff --git a/...List.test.ts-snapshots/ActionList-Inline-Description-light-colorblind-linux.png b/...List.test.ts-snapshots/ActionList-Inline-Description-light-colorblind-linux.png
diff --git a/...t.test.ts-snapshots/ActionList-Inline-Description-light-high-contrast-linux.png b/...t.test.ts-snapshots/ActionList-Inline-Description-light-high-contrast-linux.png
diff --git a/...ents/ActionList.test.ts-snapshots/ActionList-Inline-Description-light-linux.png b/...ents/ActionList.test.ts-snapshots/ActionList-Inline-Description-light-linux.png
diff --git a/...List.test.ts-snapshots/ActionList-Inline-Description-light-tritanopia-linux.png b/...List.test.ts-snapshots/ActionList-Inline-Description-light-tritanopia-linux.png
diff --git a/.../ActionList.test.ts-snapshots/ActionList-With-Avatars-dark-colorblind-linux.png b/.../ActionList.test.ts-snapshots/ActionList-With-Avatars-dark-colorblind-linux.png
diff --git a/...ents/ActionList.test.ts-snapshots/ActionList-With-Avatars-dark-dimmed-linux.png b/...ents/ActionList.test.ts-snapshots/ActionList-With-Avatars-dark-dimmed-linux.png
diff --git a/...tionList.test.ts-snapshots/ActionList-With-Avatars-dark-high-contrast-linux.png b/...tionList.test.ts-snapshots/ActionList-With-Avatars-dark-high-contrast-linux.png
diff --git a/.../components/ActionList.test.ts-snapshots/ActionList-With-Avatars-dark-linux.png b/.../components/ActionList.test.ts-snapshots/ActionList-With-Avatars-dark-linux.png
diff --git a/.../ActionList.test.ts-snapshots/ActionList-With-Avatars-dark-tritanopia-linux.png b/.../ActionList.test.ts-snapshots/ActionList-With-Avatars-dark-tritanopia-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-With-Avatars-light-colorblind-linux.png b/...ActionList.test.ts-snapshots/ActionList-With-Avatars-light-colorblind-linux.png
diff --git a/...ionList.test.ts-snapshots/ActionList-With-Avatars-light-high-contrast-linux.png b/...ionList.test.ts-snapshots/ActionList-With-Avatars-light-high-contrast-linux.png
diff --git a/...components/ActionList.test.ts-snapshots/ActionList-With-Avatars-light-linux.png b/...components/ActionList.test.ts-snapshots/ActionList-With-Avatars-light-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-With-Avatars-light-tritanopia-linux.png b/...ActionList.test.ts-snapshots/ActionList-With-Avatars-light-tritanopia-linux.png
diff --git a/...ts/components/Header.test.ts-snapshots/Header-Default-dark-colorblind-linux.png b/...ts/components/Header.test.ts-snapshots/Header-Default-dark-colorblind-linux.png
diff --git a/...pshots/components/Header.test.ts-snapshots/Header-Default-dark-dimmed-linux.png b/...pshots/components/Header.test.ts-snapshots/Header-Default-dark-dimmed-linux.png
diff --git a/...components/Header.test.ts-snapshots/Header-Default-dark-high-contrast-linux.png b/...components/Header.test.ts-snapshots/Header-Default-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-linux.png b/...ght/snapshots/components/Header.test.ts-snapshots/Header-Default-dark-linux.png
diff --git a/...ts/components/Header.test.ts-snapshots/Header-Default-dark-tritanopia-linux.png b/...ts/components/Header.test.ts-snapshots/Header-Default-dark-tritanopia-linux.png
diff --git a/...s/components/Header.test.ts-snapshots/Header-Default-light-colorblind-linux.png b/...s/components/Header.test.ts-snapshots/Header-Default-light-colorblind-linux.png
diff --git a/...omponents/Header.test.ts-snapshots/Header-Default-light-high-contrast-linux.png b/...omponents/Header.test.ts-snapshots/Header-Default-light-high-contrast-linux.png
diff --git a/...ht/snapshots/components/Header.test.ts-snapshots/Header-Default-light-linux.png b/...ht/snapshots/components/Header.test.ts-snapshots/Header-Default-light-linux.png
diff --git a/...s/components/Header.test.ts-snapshots/Header-Default-light-tritanopia-linux.png b/...s/components/Header.test.ts-snapshots/Header-Default-light-tritanopia-linux.png
diff --git a/e2e/test-helpers/storybook.ts b/e2e/test-helpers/storybook.ts
@@ -35,8 +35,14 @@ export async function visit(page: Page, options: Options) {
     url.searchParams.set('globals', params)
   }
 
+  /** Mock live avatar urls to make them stable for visual diffing (vrt) */
+  await page.route('https://github.com/*.png', async route => {
+    await route.continue({url: 'https://github.com/primer.png'})
+  })
+
   await page.goto(url.toString())
   await page.waitForSelector('body.sb-show-main:not(.sb-show-preparing-story)')
   await page.waitForSelector('#storybook-root > *')
+
   await waitForImages(page)
 }