Add dark snapshots to storybook tests (#4928)

* Add dark storybook snapshots * Update frontend/test/playwright/utils/expect-snapshot.ts
WordPress · Sep 25, 2024 · af8b89f · af8b89f
1 parent 684c0dd
commit af8b89f
Show file tree

Hide file tree

Showing 93 changed files with 4 additions and 8 deletions.
diff --git a/frontend/test/playwright/utils/expect-snapshot.ts b/frontend/test/playwright/utils/expect-snapshot.ts
@@ -77,7 +77,7 @@ export const expectSnapshot: ExpectSnapshot = async (
   page,
   name,
   screenshotAble,
-  { screenshotOptions, snapshotOptions, useColorMode, dir } = {}
+  { screenshotOptions, snapshotOptions, useColorMode = true, dir } = {}
 ) => {
   // Hide the theme switcher before taking the screenshot.
   screenshotOptions = {
@@ -89,9 +89,10 @@ export const expectSnapshot: ExpectSnapshot = async (
     .soft(await screenshotAble.screenshot(screenshotOptions))
     .toMatchSnapshot(getSnapshotName(name, "light"), snapshotOptions)
 
-  if (!(useColorMode === true)) {
+  if (!useColorMode) {
     return
   }
+
   await turnOnDarkMode(page, dir ?? "ltr")
 
   // Wait for the theme to change.

diff --git a/frontend/test/storybook/visual-regression/focus.spec.ts b/frontend/test/storybook/visual-regression/focus.spec.ts
@@ -6,12 +6,7 @@ const goTo = async (page: Page, slug: string) => {
   await page.goto(`/iframe.html?id=meta-focus--${slug}`)
 }
 
-const allSlugs = [
-  "slim-transparent",
-  "slim-filled",
-  "slim-filled-borderless",
-  "bold-filled",
-]
+const allSlugs = ["slim-transparent", "slim-filled", "bold-filled"]
 
 test.describe.configure({ mode: "parallel" })
 

diff --git a/...book/visual-regression/focus.spec.ts-snapshots/focus-bold-filled-dark-linux.png b/...book/visual-regression/focus.spec.ts-snapshots/focus-bold-filled-dark-linux.png
diff --git a/...regression/focus.spec.ts-snapshots/focus-slim-filled-borderless-light-linux.png b/...regression/focus.spec.ts-snapshots/focus-slim-filled-borderless-light-linux.png
diff --git a/...book/visual-regression/focus.spec.ts-snapshots/focus-slim-filled-dark-linux.png b/...book/visual-regression/focus.spec.ts-snapshots/focus-slim-filled-dark-linux.png
diff --git a/...visual-regression/focus.spec.ts-snapshots/focus-slim-transparent-dark-linux.png b/...visual-regression/focus.spec.ts-snapshots/focus-slim-transparent-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/bordered-gray-focused-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/bordered-gray-focused-dark-linux.png
diff --git a/...ression/v-button.spec.ts-snapshots/bordered-gray-focused-hovered-dark-linux.png b/...ression/v-button.spec.ts-snapshots/bordered-gray-focused-hovered-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/bordered-gray-hovered-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/bordered-gray-hovered-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/bordered-gray-resting-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/bordered-gray-resting-dark-linux.png
diff --git a/...ual-regression/v-button.spec.ts-snapshots/bordered-white-focused-dark-linux.png b/...ual-regression/v-button.spec.ts-snapshots/bordered-white-focused-dark-linux.png
diff --git a/...ession/v-button.spec.ts-snapshots/bordered-white-focused-hovered-dark-linux.png b/...ession/v-button.spec.ts-snapshots/bordered-white-focused-hovered-dark-linux.png
diff --git a/...ual-regression/v-button.spec.ts-snapshots/bordered-white-hovered-dark-linux.png b/...ual-regression/v-button.spec.ts-snapshots/bordered-white-hovered-dark-linux.png
diff --git a/...ual-regression/v-button.spec.ts-snapshots/bordered-white-resting-dark-linux.png b/...ual-regression/v-button.spec.ts-snapshots/bordered-white-resting-dark-linux.png
diff --git a/...visual-regression/v-button.spec.ts-snapshots/filled-dark-focused-dark-linux.png b/...visual-regression/v-button.spec.ts-snapshots/filled-dark-focused-dark-linux.png
diff --git a/...egression/v-button.spec.ts-snapshots/filled-dark-focused-hovered-dark-linux.png b/...egression/v-button.spec.ts-snapshots/filled-dark-focused-hovered-dark-linux.png
diff --git a/...visual-regression/v-button.spec.ts-snapshots/filled-dark-hovered-dark-linux.png b/...visual-regression/v-button.spec.ts-snapshots/filled-dark-hovered-dark-linux.png
diff --git a/...visual-regression/v-button.spec.ts-snapshots/filled-dark-resting-dark-linux.png b/...visual-regression/v-button.spec.ts-snapshots/filled-dark-resting-dark-linux.png
diff --git a/...visual-regression/v-button.spec.ts-snapshots/filled-gray-focused-dark-linux.png b/...visual-regression/v-button.spec.ts-snapshots/filled-gray-focused-dark-linux.png
diff --git a/...egression/v-button.spec.ts-snapshots/filled-gray-focused-hovered-dark-linux.png b/...egression/v-button.spec.ts-snapshots/filled-gray-focused-hovered-dark-linux.png
diff --git a/...visual-regression/v-button.spec.ts-snapshots/filled-gray-hovered-dark-linux.png b/...visual-regression/v-button.spec.ts-snapshots/filled-gray-hovered-dark-linux.png
diff --git a/...visual-regression/v-button.spec.ts-snapshots/filled-gray-resting-dark-linux.png b/...visual-regression/v-button.spec.ts-snapshots/filled-gray-resting-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/filled-pink-8-focused-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/filled-pink-8-focused-dark-linux.png
diff --git a/...ression/v-button.spec.ts-snapshots/filled-pink-8-focused-hovered-dark-linux.png b/...ression/v-button.spec.ts-snapshots/filled-pink-8-focused-hovered-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/filled-pink-8-hovered-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/filled-pink-8-hovered-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/filled-pink-8-resting-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/filled-pink-8-resting-dark-linux.png
diff --git a/...isual-regression/v-button.spec.ts-snapshots/filled-white-focused-dark-linux.png b/...isual-regression/v-button.spec.ts-snapshots/filled-white-focused-dark-linux.png
diff --git a/...gression/v-button.spec.ts-snapshots/filled-white-focused-hovered-dark-linux.png b/...gression/v-button.spec.ts-snapshots/filled-white-focused-hovered-dark-linux.png
diff --git a/...isual-regression/v-button.spec.ts-snapshots/filled-white-hovered-dark-linux.png b/...isual-regression/v-button.spec.ts-snapshots/filled-white-hovered-dark-linux.png
diff --git a/...isual-regression/v-button.spec.ts-snapshots/filled-white-resting-dark-linux.png b/...isual-regression/v-button.spec.ts-snapshots/filled-white-resting-dark-linux.png
diff --git a/...isual-regression/v-button.spec.ts-snapshots/plain--avoid-focused-dark-linux.png b/...isual-regression/v-button.spec.ts-snapshots/plain--avoid-focused-dark-linux.png
diff --git a/...gression/v-button.spec.ts-snapshots/plain--avoid-focused-hovered-dark-linux.png b/...gression/v-button.spec.ts-snapshots/plain--avoid-focused-hovered-dark-linux.png
diff --git a/...isual-regression/v-button.spec.ts-snapshots/plain--avoid-hovered-dark-linux.png b/...isual-regression/v-button.spec.ts-snapshots/plain--avoid-hovered-dark-linux.png
diff --git a/...isual-regression/v-button.spec.ts-snapshots/plain--avoid-resting-dark-linux.png b/...isual-regression/v-button.spec.ts-snapshots/plain--avoid-resting-dark-linux.png
diff --git a/...ybook/visual-regression/v-button.spec.ts-snapshots/plain-focused-dark-linux.png b/...ybook/visual-regression/v-button.spec.ts-snapshots/plain-focused-dark-linux.png
diff --git a/...sual-regression/v-button.spec.ts-snapshots/plain-focused-hovered-dark-linux.png b/...sual-regression/v-button.spec.ts-snapshots/plain-focused-hovered-dark-linux.png
diff --git a/...ybook/visual-regression/v-button.spec.ts-snapshots/plain-hovered-dark-linux.png b/...ybook/visual-regression/v-button.spec.ts-snapshots/plain-hovered-dark-linux.png
diff --git a/...ybook/visual-regression/v-button.spec.ts-snapshots/plain-resting-dark-linux.png b/...ybook/visual-regression/v-button.spec.ts-snapshots/plain-resting-dark-linux.png
diff --git a/...l-regression/v-button.spec.ts-snapshots/transparent-dark-focused-dark-linux.png b/...l-regression/v-button.spec.ts-snapshots/transparent-dark-focused-dark-linux.png
diff --git a/...sion/v-button.spec.ts-snapshots/transparent-dark-focused-hovered-dark-linux.png b/...sion/v-button.spec.ts-snapshots/transparent-dark-focused-hovered-dark-linux.png
diff --git a/...l-regression/v-button.spec.ts-snapshots/transparent-dark-hovered-dark-linux.png b/...l-regression/v-button.spec.ts-snapshots/transparent-dark-hovered-dark-linux.png
diff --git a/...l-regression/v-button.spec.ts-snapshots/transparent-dark-resting-dark-linux.png b/...l-regression/v-button.spec.ts-snapshots/transparent-dark-resting-dark-linux.png
diff --git a/...l-regression/v-button.spec.ts-snapshots/transparent-gray-focused-dark-linux.png b/...l-regression/v-button.spec.ts-snapshots/transparent-gray-focused-dark-linux.png
diff --git a/...sion/v-button.spec.ts-snapshots/transparent-gray-focused-hovered-dark-linux.png b/...sion/v-button.spec.ts-snapshots/transparent-gray-focused-hovered-dark-linux.png
diff --git a/...l-regression/v-button.spec.ts-snapshots/transparent-gray-hovered-dark-linux.png b/...l-regression/v-button.spec.ts-snapshots/transparent-gray-hovered-dark-linux.png
diff --git a/...l-regression/v-button.spec.ts-snapshots/transparent-gray-resting-dark-linux.png b/...l-regression/v-button.spec.ts-snapshots/transparent-gray-resting-dark-linux.png
diff --git a/...ual-regression/v-button.spec.ts-snapshots/transparent-tx-focused-dark-linux.png b/...ual-regression/v-button.spec.ts-snapshots/transparent-tx-focused-dark-linux.png
diff --git a/...ession/v-button.spec.ts-snapshots/transparent-tx-focused-hovered-dark-linux.png b/...ession/v-button.spec.ts-snapshots/transparent-tx-focused-hovered-dark-linux.png
diff --git a/...ual-regression/v-button.spec.ts-snapshots/transparent-tx-hovered-dark-linux.png b/...ual-regression/v-button.spec.ts-snapshots/transparent-tx-hovered-dark-linux.png
diff --git a/...ual-regression/v-button.spec.ts-snapshots/transparent-tx-resting-dark-linux.png b/...ual-regression/v-button.spec.ts-snapshots/transparent-tx-resting-dark-linux.png
diff --git a/...storybook/visual-regression/v-checkbox.spec.ts-snapshots/default-dark-linux.png b/...storybook/visual-regression/v-checkbox.spec.ts-snapshots/default-dark-linux.png
diff --git a/...torybook/visual-regression/v-checkbox.spec.ts-snapshots/disabled-dark-linux.png b/...torybook/visual-regression/v-checkbox.spec.ts-snapshots/disabled-dark-linux.png
diff --git a/...storybook/visual-regression/v-checkbox.spec.ts-snapshots/focused-dark-linux.png b/...storybook/visual-regression/v-checkbox.spec.ts-snapshots/focused-dark-linux.png
diff --git a/...t/storybook/visual-regression/v-checkbox.spec.ts-snapshots/hover-dark-linux.png b/...t/storybook/visual-regression/v-checkbox.spec.ts-snapshots/hover-dark-linux.png
diff --git a/...test/storybook/visual-regression/v-checkbox.spec.ts-snapshots/on-dark-linux.png b/...test/storybook/visual-regression/v-checkbox.spec.ts-snapshots/on-dark-linux.png
diff --git a/...ybook/visual-regression/v-checkbox.spec.ts-snapshots/on-disabled-dark-linux.png b/...ybook/visual-regression/v-checkbox.spec.ts-snapshots/on-disabled-dark-linux.png
diff --git a/...rybook/visual-regression/v-checkbox.spec.ts-snapshots/on-focused-dark-linux.png b/...rybook/visual-regression/v-checkbox.spec.ts-snapshots/on-focused-dark-linux.png
diff --git a/...l-regression/v-filter-tab.spec.ts-snapshots/filter-tab-focused-0-dark-linux.png b/...l-regression/v-filter-tab.spec.ts-snapshots/filter-tab-focused-0-dark-linux.png
diff --git a/...l-regression/v-filter-tab.spec.ts-snapshots/filter-tab-focused-1-dark-linux.png b/...l-regression/v-filter-tab.spec.ts-snapshots/filter-tab-focused-1-dark-linux.png
diff --git a/...-regression/v-filter-tab.spec.ts-snapshots/filter-tab-focused-12-dark-linux.png b/...-regression/v-filter-tab.spec.ts-snapshots/filter-tab-focused-12-dark-linux.png
diff --git a/...sion/v-filter-tab.spec.ts-snapshots/filter-tab-focused-hovered-0-dark-linux.png b/...sion/v-filter-tab.spec.ts-snapshots/filter-tab-focused-hovered-0-dark-linux.png
diff --git a/...sion/v-filter-tab.spec.ts-snapshots/filter-tab-focused-hovered-1-dark-linux.png b/...sion/v-filter-tab.spec.ts-snapshots/filter-tab-focused-hovered-1-dark-linux.png
diff --git a/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-focused-hovered-12-dark-linux.png b/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-focused-hovered-12-dark-linux.png
diff --git a/...v-filter-tab.spec.ts-snapshots/filter-tab-hovered-not-selected-0-dark-linux.png b/...v-filter-tab.spec.ts-snapshots/filter-tab-hovered-not-selected-0-dark-linux.png
diff --git a/...v-filter-tab.spec.ts-snapshots/filter-tab-hovered-not-selected-1-dark-linux.png b/...v-filter-tab.spec.ts-snapshots/filter-tab-hovered-not-selected-1-dark-linux.png
diff --git a/...-filter-tab.spec.ts-snapshots/filter-tab-hovered-not-selected-12-dark-linux.png b/...-filter-tab.spec.ts-snapshots/filter-tab-hovered-not-selected-12-dark-linux.png
diff --git a/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-hovered-selected-0-dark-linux.png b/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-hovered-selected-0-dark-linux.png
diff --git a/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-hovered-selected-1-dark-linux.png b/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-hovered-selected-1-dark-linux.png
diff --git a/...on/v-filter-tab.spec.ts-snapshots/filter-tab-hovered-selected-12-dark-linux.png b/...on/v-filter-tab.spec.ts-snapshots/filter-tab-hovered-selected-12-dark-linux.png
diff --git a/...v-filter-tab.spec.ts-snapshots/filter-tab-resting-not-selected-0-dark-linux.png b/...v-filter-tab.spec.ts-snapshots/filter-tab-resting-not-selected-0-dark-linux.png
diff --git a/...v-filter-tab.spec.ts-snapshots/filter-tab-resting-not-selected-1-dark-linux.png b/...v-filter-tab.spec.ts-snapshots/filter-tab-resting-not-selected-1-dark-linux.png
diff --git a/...-filter-tab.spec.ts-snapshots/filter-tab-resting-not-selected-12-dark-linux.png b/...-filter-tab.spec.ts-snapshots/filter-tab-resting-not-selected-12-dark-linux.png
diff --git a/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-resting-selected-0-dark-linux.png b/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-resting-selected-0-dark-linux.png
diff --git a/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-resting-selected-1-dark-linux.png b/...ion/v-filter-tab.spec.ts-snapshots/filter-tab-resting-selected-1-dark-linux.png
diff --git a/...on/v-filter-tab.spec.ts-snapshots/filter-tab-resting-selected-12-dark-linux.png b/...on/v-filter-tab.spec.ts-snapshots/filter-tab-resting-selected-12-dark-linux.png
diff --git a/...l-regression/v-icon-button.spec.ts-snapshots/v-icon-button-sizes-dark-linux.png b/...l-regression/v-icon-button.spec.ts-snapshots/v-icon-button-sizes-dark-linux.png
diff --git a/...l-regression/v-language-select.spec.ts-snapshots/vlanguageselect-dark-linux.png b/...l-regression/v-language-select.spec.ts-snapshots/vlanguageselect-dark-linux.png
diff --git a/...ession/v-search-bar-button.spec.ts-snapshots/back-button-focused-dark-linux.png b/...ession/v-search-bar-button.spec.ts-snapshots/back-button-focused-dark-linux.png
diff --git a/...ession/v-search-bar-button.spec.ts-snapshots/back-button-hovered-dark-linux.png b/...ession/v-search-bar-button.spec.ts-snapshots/back-button-hovered-dark-linux.png
diff --git a/...arch-bar-button.spec.ts-snapshots/clear-and-back-buttons-resting-dark-linux.png b/...arch-bar-button.spec.ts-snapshots/clear-and-back-buttons-resting-dark-linux.png
diff --git a/...ssion/v-search-bar-button.spec.ts-snapshots/clear-button-focused-dark-linux.png b/...ssion/v-search-bar-button.spec.ts-snapshots/clear-button-focused-dark-linux.png
diff --git a/...ssion/v-search-bar-button.spec.ts-snapshots/clear-button-hovered-dark-linux.png b/...ssion/v-search-bar-button.spec.ts-snapshots/clear-button-hovered-dark-linux.png
diff --git a/...ts-snapshots/v-search-type-button-button-with-text-label-at-rest-dark-linux.png b/...ts-snapshots/v-search-type-button-button-with-text-label-at-rest-dark-linux.png
diff --git a/...ts-snapshots/v-search-type-button-button-with-text-label-hovered-dark-linux.png b/...ts-snapshots/v-search-type-button-button-with-text-label-hovered-dark-linux.png
diff --git a/...hots/v-search-type-button-button-with-text-label-pressed-at-rest-dark-linux.png b/...hots/v-search-type-button-button-with-text-label-pressed-at-rest-dark-linux.png
diff --git a/...hots/v-search-type-button-button-with-text-label-pressed-hovered-dark-linux.png b/...hots/v-search-type-button-button-with-text-label-pressed-hovered-dark-linux.png
diff --git a/...snapshots/v-search-type-button-button-without-text-label-at-rest-dark-linux.png b/...snapshots/v-search-type-button-button-without-text-label-at-rest-dark-linux.png
diff --git a/...snapshots/v-search-type-button-button-without-text-label-hovered-dark-linux.png b/...snapshots/v-search-type-button-button-without-text-label-hovered-dark-linux.png
diff --git a/...s/v-search-type-button-button-without-text-label-pressed-at-rest-dark-linux.png b/...s/v-search-type-button-button-without-text-label-pressed-at-rest-dark-linux.png
diff --git a/...s/v-search-type-button-button-without-text-label-pressed-hovered-dark-linux.png b/...s/v-search-type-button-button-without-text-label-pressed-hovered-dark-linux.png
diff --git a/...regression/v-select-field.spec.ts-snapshots/vselectfield-default-dark-linux.png b/...regression/v-select-field.spec.ts-snapshots/vselectfield-default-dark-linux.png
diff --git a/...gression/v-select-field.spec.ts-snapshots/vselectfield-with-icon-dark-linux.png b/...gression/v-select-field.spec.ts-snapshots/vselectfield-with-icon-dark-linux.png
diff --git a/...ion/v-select-field.spec.ts-snapshots/vselectfield-without-border-dark-linux.png b/...ion/v-select-field.spec.ts-snapshots/vselectfield-without-border-dark-linux.png