Rename all snapshots to "light" (#4914)

* Rename all snapshots to "-light"

* Use expectSnapshot, add screenshot-area and remove colored focus

frontend/src/components/VHeader/meta/VHeaderInternal.stories.ts

@@ -18,7 +18,7 @@ export const Default: Story = {
     setup() {
       return () =>
         h("div", { id: "teleports" }, [
-          h("div", { class: "fixed inset-0 w-full h-full" }, [
+          h("div", { class: "fixed inset-0 w-full h-full bg-default" }, [
             h(VHeaderInternal, args),
           ]),
         ])

frontend/src/components/VIconButton/meta/VIconButton.stories.ts

@@ -2,13 +2,16 @@ import { h } from "vue"
 
 import { baseButtonSizes, baseButtonVariants } from "~/types/button"
 
+import { WithScreenshotArea } from "~~/.storybook/decorators/with-screenshot-area"
+
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
 import type { Meta, StoryObj } from "@storybook/vue3"
 
 const meta = {
   title: "Components/VIconButton",
   component: VIconButton,
+  decorators: [WithScreenshotArea],
 
   argTypes: {
     size: {

frontend/src/components/VLanguageSelect/meta/VLanguageSelect.stories.ts

@@ -1,12 +1,15 @@
 import { h } from "vue"
 
+import { WithScreenshotArea } from "~~/.storybook/decorators/with-screenshot-area"
+
 import VLanguageSelect from "~/components/VLanguageSelect/VLanguageSelect.vue"
 
 import type { Meta, StoryObj } from "@storybook/vue3"
 
 const meta = {
   title: "Components/VLanguageSelect",
   component: VLanguageSelect,
+  decorators: [WithScreenshotArea],
 } satisfies Meta<typeof VLanguageSelect>
 
 export default meta

frontend/src/components/VSelectField/meta/VSelectField.stories.ts

@@ -1,5 +1,7 @@
 import { h, ref } from "vue"
 
+import { WithScreenshotArea } from "~~/.storybook/decorators/with-screenshot-area"
+
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VSelectField from "~/components/VSelectField/VSelectField.vue"
 
@@ -19,6 +21,7 @@ const baseArgs = {
 const meta = {
   title: "Components/VSelectField",
   component: VSelectField,
+  decorators: [WithScreenshotArea],
 
   argTypes: {
     "onUpdate:modelValue": {

frontend/src/components/meta/Focus.stories.js

@@ -57,18 +57,3 @@ export const BoldFilled = {
     classNames: ["focus-bold-filled"],
   },
 }
-
-export const Colored = {
-  render: GetTemplate("bg-tertiary text-over-dark border border-tx").bind({}),
-  name: "Colored",
-
-  args: {
-    classNames: ["focus-slim-tx bg-complementary"],
-  },
-
-  parameters: {
-    backgrounds: {
-      default: "dark",
-    },
-  },
-}

frontend/test/playwright/utils/breakpoints.ts

@@ -17,7 +17,7 @@ type ExpectSnapshot = <T extends ScreenshotAble>(
 
 type BreakpointBlock = (options: {
   getConfigValues: (name: string) => {
-    name: `${typeof name}-${Breakpoint}.png`
+    name: `${typeof name}-${Breakpoint}-light.png`
   }
   breakpoint: Breakpoint
   expectSnapshot: ExpectSnapshot
@@ -88,7 +88,7 @@ const makeBreakpointDescribe =
       })
 
       const getConfigValues = (name: string) => ({
-        name: `${name}-${breakpoint}.png` as const,
+        name: `${name}-${breakpoint}-light.png` as const,
       })
 
       const expectSnapshot = async <T extends ScreenshotAble>(
@@ -99,10 +99,8 @@ const makeBreakpointDescribe =
       ) => {
         const { name: snapshotName } = getConfigValues(name)
         return expect(await screenshotAble.screenshot(options)).toMatchSnapshot(
-          {
-            name: snapshotName,
-            ...snapshotOptions,
-          }
+          snapshotName,
+          snapshotOptions
         )
       }
 

frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts

@@ -32,7 +32,7 @@ for (const dir of languageDirections) {
       // To make the tests consistent, set the played area to the same position
       await page.mouse.click(170, 650)
 
-      await expectSnapshot(`global-audio-player-on-search-${dir}.png`, page)
+      await expectSnapshot(`global-audio-player-on-search-${dir}`, page)
     })
   })
 }

frontend/test/playwright/visual-regression/components/header.spec.ts

@@ -18,7 +18,7 @@ test.describe.configure({ mode: "parallel" })
 const headerSelector = ".main-header"
 
 for (const dir of languageDirections) {
-  test.describe(`header-${dir}`, () => {
+  test.describe(dir, () => {
     breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => {
       test.beforeEach(async ({ page }) => {
         await preparePageForTests(page, breakpoint, { dismissFilter: false })

frontend/test/playwright/visual-regression/pages/errors.spec.ts

@@ -33,7 +33,7 @@ breakpoints.describeXl(({ breakpoint, expectSnapshot }) => {
       await page.goto(`/image/${imageId}`)
       // eslint-disable-next-line playwright/no-networkidle
       await page.waitForLoadState("networkidle")
-      await expectSnapshot("generic-error", page, { fullPage: true })
+      await expectSnapshot("generic-error-ltr", page, { fullPage: true })
     })
   }
 
@@ -57,7 +57,7 @@ breakpoints.describeXl(({ breakpoint, expectSnapshot }) => {
       // eslint-disable-next-line playwright/no-networkidle
       await page.waitForLoadState("networkidle")
 
-      await expectSnapshot("generic-error", page, { fullPage: true })
+      await expectSnapshot("generic-error-ltr", page, { fullPage: true })
     })
   }
 })
@@ -76,7 +76,7 @@ for (const searchType of supportedSearchTypes) {
       await preparePageForTests(page, breakpoint)
       await goToSearchTerm(page, `SearchPage500error`, { searchType })
 
-      await expectSnapshot("generic-error", page, {
+      await expectSnapshot("generic-error-ltr", page, {
         fullPage: true,
       })
     })
@@ -100,7 +100,7 @@ for (const searchType of supportedSearchTypes) {
             searchType,
           })
 
-          await expectSnapshot("generic-error", page, { fullPage: true })
+          await expectSnapshot(`generic-error-${dir}`, page, { fullPage: true })
         })
       }
 

frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts

@@ -42,7 +42,7 @@ for (const mediaType of supportedMediaTypes) {
         // This will include the "Back to results" link.
         await openFirstResult(page, mediaType, dir)
         await expectSnapshot(
-          `${mediaType}-${dir}-from-search-results-with-additional-search-views`,
+          `${mediaType}-from-search-results-with-additional-search-views-${dir}`,
           page,
           { fullPage: true },
           { maxDiffPixelRatio: 0.01 }
@@ -65,7 +65,7 @@ for (const dir of languageDirections) {
       // Wait for the language select to hydrate.
       await sleep(500)
       await expectSnapshot(
-        `${dir}-full-page-report`,
+        `full-page-report-${dir}`,
         page,
         { fullPage: true },
         { maxDiffPixelRatio: undefined, maxDiffPixels: 2 }

frontend/test/playwright/visual-regression/pages/pages.spec.ts

@@ -79,7 +79,9 @@ test.describe("layout color is set correctly", () => {
       await page.waitForURL(/ar\/search/)
       await expect(getH1(page, "Cat")).toBeVisible()
 
-      expect(await page.screenshot()).toMatchSnapshot("search-page-rtl-lg.png")
+      expect(await page.screenshot()).toMatchSnapshot(
+        "search-page-rtl-lg-light.png"
+      )
     })
 
     test("change language on homepage and go to content page", async ({
@@ -97,7 +99,7 @@ test.describe("layout color is set correctly", () => {
       await page.mouse.move(100, 100)
 
       expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
-        "about-ltr-lg.png",
+        "about-ltr-lg-light.png",
         { maxDiffPixelRatio: 0.01 }
       )
     })

frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts

@@ -19,6 +19,6 @@ breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => {
   })
 
   test("page with all banners", async ({ page }) => {
-    await expectSnapshot(`page-with-all-banners`, page)
+    await expectSnapshot("page-with-all-banners", page)
   })
 })

frontend/test/storybook/playwright.config.ts

@@ -1,8 +1,6 @@
-import type { PlaywrightTestConfig } from "@playwright/test"
+import { defineConfig } from "@playwright/test"
 
-const config: PlaywrightTestConfig = {
-  snapshotPathTemplate:
-    "visual-regression/{testFileName}-snapshots/{arg}-linux.png",
+export default defineConfig({
   forbidOnly: !!process.env.CI,
   webServer: {
     command: "pnpm prod:storybook",
@@ -21,6 +19,4 @@ const config: PlaywrightTestConfig = {
       maxDiffPixelRatio: 0.01,
     },
   },
-}
-
-export default config
+})

frontend/test/storybook/utils/expect-snapshot.ts

@@ -0,0 +1,24 @@
+import {
+  Expect,
+  expect,
+  Locator,
+  LocatorScreenshotOptions,
+  Page,
+  PageScreenshotOptions,
+} from "@playwright/test"
+
+export type ExpectSnapshotOptions = {
+  screenshotOptions: LocatorScreenshotOptions | PageScreenshotOptions
+  snapshotOptions: Parameters<ReturnType<Expect>["toMatchSnapshot"]>[0]
+}
+
+export const expectSnapshot = async (
+  name: string,
+  locator: Locator | Page,
+  options?: ExpectSnapshotOptions
+) => {
+  const snapshotName = `${name}-light.png`
+  return expect(
+    await locator.screenshot(options?.screenshotOptions)
+  ).toMatchSnapshot(snapshotName, options?.snapshotOptions)
+}

frontend/test/storybook/visual-regression/focus.spec.ts

@@ -1,19 +1,16 @@
-import { test, expect, Page, Locator } from "@playwright/test"
+import { test, Page } from "@playwright/test"
+
+import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot"
 
 const goTo = async (page: Page, slug: string) => {
   await page.goto(`/iframe.html?id=meta-focus--${slug}`)
 }
 
-const expectSnapshot = async (name: string, elem: Locator) => {
-  expect(await elem.screenshot()).toMatchSnapshot({ name: `${name}.png` })
-}
-
 const allSlugs = [
   "slim-transparent",
   "slim-filled",
   "slim-filled-borderless",
   "bold-filled",
-  "colored",
 ]
 
 test.describe.configure({ mode: "parallel" })

frontend/test/storybook/visual-regression/v-button.spec.ts

@@ -1,7 +1,9 @@
-import { expect, test } from "@playwright/test"
+import { test } from "@playwright/test"
 
 import { makeGotoWithArgs } from "~~/test/storybook/utils/args"
 
+import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot"
+
 import { buttonVariants } from "~/types/button"
 
 const buttonLocator = "text=Code is Poetry"
@@ -17,34 +19,29 @@ test.describe("VButton", () => {
   for (const variant of nonPressedVariants) {
     test(`${variant} resting`, async ({ page }) => {
       await gotoWithArgs(page, { variant })
-      expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
-        name: `${variant}-resting.png`,
-      })
+      await expectSnapshot(`${variant}-resting`, page.locator(wrapperLocator))
     })
 
     test(`${variant} hovered`, async ({ page }) => {
       await gotoWithArgs(page, { variant })
       await page.hover(buttonLocator)
-      expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
-        name: `${variant}-hovered.png`,
-      })
+      await expectSnapshot(`${variant}-hovered`, page.locator(wrapperLocator))
     })
 
     test(`${variant} focused`, async ({ page }) => {
       await gotoWithArgs(page, { variant })
       await page.focus(buttonLocator)
-      expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
-        name: `${variant}-focused.png`,
-      })
+      await expectSnapshot(`${variant}-focused`, page.locator(wrapperLocator))
     })
 
     test(`${variant} focused hovered`, async ({ page }) => {
       await gotoWithArgs(page, { variant })
       await page.focus(buttonLocator)
       await page.hover(buttonLocator)
-      expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
-        name: `${variant}-focused-hovered.png`,
-      })
+      await expectSnapshot(
+        `${variant}-focused-hovered`,
+        page.locator(wrapperLocator)
+      )
     })
   }
 })