test(e2e): add vrt for blankslate (#4809)

* test(e2e): add vrt for blankslate * test(vrt): update snapshots --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
primer · Aug 1, 2024 · 2ab2b3c · 2ab2b3c
1 parent 482b4d6
commit 2ab2b3c
Show file tree

Hide file tree

Showing 74 changed files with 92 additions and 0 deletions.
diff --git a/...nents/Blankslate.test.ts-snapshots/Blankslate-Default-dark-colorblind-linux.png b/...nents/Blankslate.test.ts-snapshots/Blankslate-Default-dark-colorblind-linux.png
diff --git a/...omponents/Blankslate.test.ts-snapshots/Blankslate-Default-dark-dimmed-linux.png b/...omponents/Blankslate.test.ts-snapshots/Blankslate-Default-dark-dimmed-linux.png
diff --git a/...ts/Blankslate.test.ts-snapshots/Blankslate-Default-dark-high-contrast-linux.png b/...ts/Blankslate.test.ts-snapshots/Blankslate-Default-dark-high-contrast-linux.png
diff --git a/...shots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-linux.png b/...shots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-linux.png
diff --git a/...nents/Blankslate.test.ts-snapshots/Blankslate-Default-dark-tritanopia-linux.png b/...nents/Blankslate.test.ts-snapshots/Blankslate-Default-dark-tritanopia-linux.png
diff --git a/...ents/Blankslate.test.ts-snapshots/Blankslate-Default-light-colorblind-linux.png b/...ents/Blankslate.test.ts-snapshots/Blankslate-Default-light-colorblind-linux.png
diff --git a/...s/Blankslate.test.ts-snapshots/Blankslate-Default-light-high-contrast-linux.png b/...s/Blankslate.test.ts-snapshots/Blankslate-Default-light-high-contrast-linux.png
diff --git a/...hots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-linux.png b/...hots/components/Blankslate.test.ts-snapshots/Blankslate-Default-light-linux.png
diff --git a/...ents/Blankslate.test.ts-snapshots/Blankslate-Default-light-tritanopia-linux.png b/...ents/Blankslate.test.ts-snapshots/Blankslate-Default-light-tritanopia-linux.png
diff --git a/.../Blankslate.test.ts-snapshots/Blankslate-Default-primer-breakpoint-sm-linux.png b/.../Blankslate.test.ts-snapshots/Blankslate-Default-primer-breakpoint-sm-linux.png
diff --git a/.../Blankslate.test.ts-snapshots/Blankslate-Default-primer-breakpoint-xs-linux.png b/.../Blankslate.test.ts-snapshots/Blankslate-Default-primer-breakpoint-xs-linux.png
diff --git a/...onents/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-colorblind-linux.png b/...onents/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-colorblind-linux.png
diff --git a/...components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-dimmed-linux.png b/...components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-dimmed-linux.png
diff --git a/...nts/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-high-contrast-linux.png b/...nts/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-high-contrast-linux.png
diff --git a/...pshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-linux.png b/...pshots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-linux.png
diff --git a/...onents/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-tritanopia-linux.png b/...onents/Blankslate.test.ts-snapshots/Blankslate-Narrow-dark-tritanopia-linux.png
diff --git a/...nents/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-colorblind-linux.png b/...nents/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-colorblind-linux.png
diff --git a/...ts/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-high-contrast-linux.png b/...ts/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-high-contrast-linux.png
diff --git a/...shots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-linux.png b/...shots/components/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-linux.png
diff --git a/...nents/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-tritanopia-linux.png b/...nents/Blankslate.test.ts-snapshots/Blankslate-Narrow-light-tritanopia-linux.png
diff --git a/...s/Blankslate.test.ts-snapshots/Blankslate-Narrow-primer-breakpoint-sm-linux.png b/...s/Blankslate.test.ts-snapshots/Blankslate-Narrow-primer-breakpoint-sm-linux.png
diff --git a/...s/Blankslate.test.ts-snapshots/Blankslate-Narrow-primer-breakpoint-xs-linux.png b/...s/Blankslate.test.ts-snapshots/Blankslate-Narrow-primer-breakpoint-xs-linux.png
diff --git a/...ents/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-colorblind-linux.png b/...ents/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-colorblind-linux.png
diff --git a/...mponents/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-dimmed-linux.png b/...mponents/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-dimmed-linux.png
diff --git a/...s/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-high-contrast-linux.png b/...s/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-high-contrast-linux.png
diff --git a/...hots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-linux.png b/...hots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-linux.png
diff --git a/...ents/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-tritanopia-linux.png b/...ents/Blankslate.test.ts-snapshots/Blankslate-Spacious-dark-tritanopia-linux.png
diff --git a/...nts/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-colorblind-linux.png b/...nts/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-colorblind-linux.png
diff --git a/.../Blankslate.test.ts-snapshots/Blankslate-Spacious-light-high-contrast-linux.png b/.../Blankslate.test.ts-snapshots/Blankslate-Spacious-light-high-contrast-linux.png
diff --git a/...ots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-linux.png b/...ots/components/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-linux.png
diff --git a/...nts/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-tritanopia-linux.png b/...nts/Blankslate.test.ts-snapshots/Blankslate-Spacious-light-tritanopia-linux.png
diff --git a/...Blankslate.test.ts-snapshots/Blankslate-Spacious-primer-breakpoint-sm-linux.png b/...Blankslate.test.ts-snapshots/Blankslate-Spacious-primer-breakpoint-sm-linux.png
diff --git a/...Blankslate.test.ts-snapshots/Blankslate-Spacious-primer-breakpoint-xs-linux.png b/...Blankslate.test.ts-snapshots/Blankslate-Spacious-primer-breakpoint-xs-linux.png
diff --git a/...s/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-colorblind-linux.png b/...s/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-colorblind-linux.png
diff --git a/...nents/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-dimmed-linux.png b/...nents/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-dimmed-linux.png
diff --git a/...lankslate.test.ts-snapshots/Blankslate-With-Border-dark-high-contrast-linux.png b/...lankslate.test.ts-snapshots/Blankslate-With-Border-dark-high-contrast-linux.png
diff --git a/...s/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-linux.png b/...s/components/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-linux.png
diff --git a/...s/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-tritanopia-linux.png b/...s/Blankslate.test.ts-snapshots/Blankslate-With-Border-dark-tritanopia-linux.png
diff --git a/.../Blankslate.test.ts-snapshots/Blankslate-With-Border-light-colorblind-linux.png b/.../Blankslate.test.ts-snapshots/Blankslate-With-Border-light-colorblind-linux.png
diff --git a/...ankslate.test.ts-snapshots/Blankslate-With-Border-light-high-contrast-linux.png b/...ankslate.test.ts-snapshots/Blankslate-With-Border-light-high-contrast-linux.png
diff --git a/.../components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-linux.png b/.../components/Blankslate.test.ts-snapshots/Blankslate-With-Border-light-linux.png
diff --git a/.../Blankslate.test.ts-snapshots/Blankslate-With-Border-light-tritanopia-linux.png b/.../Blankslate.test.ts-snapshots/Blankslate-With-Border-light-tritanopia-linux.png
diff --git a/...nkslate.test.ts-snapshots/Blankslate-With-Border-primer-breakpoint-sm-linux.png b/...nkslate.test.ts-snapshots/Blankslate-With-Border-primer-breakpoint-sm-linux.png
diff --git a/...late.test.ts-snapshots/Blankslate-With-Primary-Action-dark-colorblind-linux.png b/...late.test.ts-snapshots/Blankslate-With-Primary-Action-dark-colorblind-linux.png
diff --git a/...ankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-dimmed-linux.png b/...ankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-dimmed-linux.png
diff --git a/...e.test.ts-snapshots/Blankslate-With-Primary-Action-dark-high-contrast-linux.png b/...e.test.ts-snapshots/Blankslate-With-Primary-Action-dark-high-contrast-linux.png
diff --git a/...ents/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-linux.png b/...ents/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-dark-linux.png
diff --git a/...late.test.ts-snapshots/Blankslate-With-Primary-Action-dark-tritanopia-linux.png b/...late.test.ts-snapshots/Blankslate-With-Primary-Action-dark-tritanopia-linux.png
diff --git a/...ate.test.ts-snapshots/Blankslate-With-Primary-Action-light-colorblind-linux.png b/...ate.test.ts-snapshots/Blankslate-With-Primary-Action-light-colorblind-linux.png
diff --git a/....test.ts-snapshots/Blankslate-With-Primary-Action-light-high-contrast-linux.png b/....test.ts-snapshots/Blankslate-With-Primary-Action-light-high-contrast-linux.png
diff --git a/...nts/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-linux.png b/...nts/Blankslate.test.ts-snapshots/Blankslate-With-Primary-Action-light-linux.png
diff --git a/...ate.test.ts-snapshots/Blankslate-With-Primary-Action-light-tritanopia-linux.png b/...ate.test.ts-snapshots/Blankslate-With-Primary-Action-light-tritanopia-linux.png
diff --git a/...test.ts-snapshots/Blankslate-With-Primary-Action-primer-breakpoint-sm-linux.png b/...test.ts-snapshots/Blankslate-With-Primary-Action-primer-breakpoint-sm-linux.png
diff --git a/...te.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-colorblind-linux.png b/...te.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-colorblind-linux.png
diff --git a/...kslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-dimmed-linux.png b/...kslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-dimmed-linux.png
diff --git a/...test.ts-snapshots/Blankslate-With-Secondary-Action-dark-high-contrast-linux.png b/...test.ts-snapshots/Blankslate-With-Secondary-Action-dark-high-contrast-linux.png
diff --git a/...ts/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-linux.png b/...ts/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-linux.png
diff --git a/...te.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-tritanopia-linux.png b/...te.test.ts-snapshots/Blankslate-With-Secondary-Action-dark-tritanopia-linux.png
diff --git a/...e.test.ts-snapshots/Blankslate-With-Secondary-Action-light-colorblind-linux.png b/...e.test.ts-snapshots/Blankslate-With-Secondary-Action-light-colorblind-linux.png
diff --git a/...est.ts-snapshots/Blankslate-With-Secondary-Action-light-high-contrast-linux.png b/...est.ts-snapshots/Blankslate-With-Secondary-Action-light-high-contrast-linux.png
diff --git a/...s/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-linux.png b/...s/Blankslate.test.ts-snapshots/Blankslate-With-Secondary-Action-light-linux.png
diff --git a/...e.test.ts-snapshots/Blankslate-With-Secondary-Action-light-tritanopia-linux.png b/...e.test.ts-snapshots/Blankslate-With-Secondary-Action-light-tritanopia-linux.png
diff --git a/...st.ts-snapshots/Blankslate-With-Secondary-Action-primer-breakpoint-sm-linux.png b/...st.ts-snapshots/Blankslate-With-Secondary-Action-primer-breakpoint-sm-linux.png
diff --git a/...s/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-colorblind-linux.png b/...s/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-colorblind-linux.png
diff --git a/...nents/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-dimmed-linux.png b/...nents/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-dimmed-linux.png
diff --git a/...lankslate.test.ts-snapshots/Blankslate-With-Visual-dark-high-contrast-linux.png b/...lankslate.test.ts-snapshots/Blankslate-With-Visual-dark-high-contrast-linux.png
diff --git a/...s/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-linux.png b/...s/components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-linux.png
diff --git a/...s/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-tritanopia-linux.png b/...s/Blankslate.test.ts-snapshots/Blankslate-With-Visual-dark-tritanopia-linux.png
diff --git a/.../Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-colorblind-linux.png b/.../Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-colorblind-linux.png
diff --git a/...ankslate.test.ts-snapshots/Blankslate-With-Visual-light-high-contrast-linux.png b/...ankslate.test.ts-snapshots/Blankslate-With-Visual-light-high-contrast-linux.png
diff --git a/.../components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-linux.png b/.../components/Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-linux.png
diff --git a/.../Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-tritanopia-linux.png b/.../Blankslate.test.ts-snapshots/Blankslate-With-Visual-light-tritanopia-linux.png
diff --git a/...nkslate.test.ts-snapshots/Blankslate-With-Visual-primer-breakpoint-sm-linux.png b/...nkslate.test.ts-snapshots/Blankslate-With-Visual-primer-breakpoint-sm-linux.png
diff --git a/e2e/components/Blankslate.test.ts b/e2e/components/Blankslate.test.ts
@@ -0,0 +1,92 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+import {viewports} from '../test-helpers/viewports'
+
+const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof viewports>}> = [
+  {
+    title: 'Default',
+    id: 'drafts-components-blankslate--default',
+    viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
+  },
+  {
+    title: 'Narrow',
+    id: 'drafts-components-blankslate-features--narrow',
+    viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
+  },
+  {
+    title: 'Spacious',
+    id: 'drafts-components-blankslate-features--spacious',
+    viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
+  },
+  {
+    title: 'With Border',
+    id: 'drafts-components-blankslate-features--with-border',
+    viewports: ['primer.breakpoint.sm'],
+  },
+  {
+    title: 'With Primary Action',
+    id: 'drafts-components-blankslate-features--with-primary-action',
+    viewports: ['primer.breakpoint.sm'],
+  },
+  {
+    title: 'With Secondary Action',
+    id: 'drafts-components-blankslate-features--with-secondary-action',
+    viewports: ['primer.breakpoint.sm'],
+  },
+  {
+    title: 'With Visual',
+    id: 'drafts-components-blankslate-features--with-visual',
+    viewports: ['primer.breakpoint.sm'],
+  },
+]
+
+test.describe('Blankslate', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${story.title}.${theme}.png`)
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+
+      if (story.viewports) {
+        for (const name of story.viewports) {
+          test(`${name} @vrt`, async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {},
+            })
+            const width = viewports[name]
+
+            await page.setViewportSize({
+              width,
+              height: 667,
+            })
+            expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${story.title}.${name}.png`)
+          })
+        }
+      }
+    })
+  }
+})