Update storybook snapshots

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/test/storybook/playwright.config.ts

@@ -13,12 +13,6 @@ const config: PlaywrightTestConfig = {
     trace: "retain-on-failure",
   },
   timeout: 60 * 1e3, // 1 minute
-  expect: {
-    toMatchSnapshot: {
-      // To avoid flaky tests, we allow a small amount of pixel difference.
-      maxDiffPixelRatio: 0.005,
-    },
-  },
 }
 
 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,13 +1,11 @@
-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",
@@ -23,6 +21,7 @@ test.describe("Focus", () => {
     test(`focus-${slug}`, async ({ page }) => {
       await goTo(page, slug)
       await page.focus('[data-testid="focus-target"]')
+
       await expectSnapshot(`focus-${slug}`, page.locator(".screenshot-area"))
     })
   }

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)
+      )
     })
   }
 })

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

@@ -1,4 +1,6 @@
-import { test, expect } from "@playwright/test"
+import { test } from "@playwright/test"
+
+import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot"
 
 test.describe.configure({ mode: "parallel" })
 
@@ -9,58 +11,40 @@ test.describe("v-checkbox", () => {
     })
 
     test("default", async ({ page }) => {
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({ name: "default.png" })
+      await expectSnapshot("default", page.locator(".screenshot-area"))
     })
 
     test("hover", async ({ page }) => {
       const checkbox = page.locator('input[type="checkbox"]')
       await checkbox.hover()
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({ name: "hover.png" })
+      await expectSnapshot("hover", page.locator(".screenshot-area"))
     })
 
     test("focused", async ({ page }) => {
       const checkbox = page.locator('input[type="checkbox"]')
       await checkbox.focus()
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({
-        name: "focused.png",
-      })
+      await expectSnapshot("focused", page.locator(".screenshot-area"))
     })
 
     test("disabled", async ({ page }) => {
       const checkbox = page.locator('input[type="checkbox"]')
       await checkbox.evaluate((checkbox) => {
         ;(checkbox as HTMLInputElement).disabled = true
       })
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({
-        name: "disabled.png",
-      })
+      await expectSnapshot("disabled", page.locator(".screenshot-area"))
     })
 
     test("on", async ({ page }) => {
       const checkbox = page.locator('input[type="checkbox"]')
       await checkbox.click()
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({ name: "on.png" })
+      await expectSnapshot("on", page.locator(".screenshot-area"))
     })
 
     test("on focused", async ({ page }) => {
       const checkbox = page.locator('input[type="checkbox"]')
       await checkbox.focus()
       await page.keyboard.press("Space")
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({
-        name: "on-focused.png",
-      })
+      await expectSnapshot("on-focused", page.locator(".screenshot-area"))
     })
 
     test("on disabled", async ({ page }) => {
@@ -69,11 +53,7 @@ test.describe("v-checkbox", () => {
       await checkbox.evaluate((checkbox) => {
         ;(checkbox as HTMLInputElement).disabled = true
       })
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({
-        name: "on-disabled.png",
-      })
+      await expectSnapshot("on-disabled", page.locator(".screenshot-area"))
     })
 
     test("on-and-off", async ({ page }) => {
@@ -84,11 +64,7 @@ test.describe("v-checkbox", () => {
       // We still want to check that it works though as that does mimic the user behavior of checking directly on the checkbox.
       // eslint-disable-next-line playwright/no-force-option
       await checkbox.click({ force: true })
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({
-        name: "on-and-off.png",
-      })
+      await expectSnapshot("on-and-off", page.locator(".screenshot-area"))
     })
   })
 })

frontend/test/storybook/visual-regression/v-filter-tab.spec.ts

@@ -2,6 +2,7 @@ import { expect, type Page, test } from "@playwright/test"
 
 import { makeUrlWithArgs } from "~~/test/storybook/utils/args"
 import { waitForResponse } from "~~/test/storybook/utils/response"
+import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot"
 
 const urlWithArgs = makeUrlWithArgs(
   "components-vheader-vheadermobile-vfiltertab--default"
@@ -52,8 +53,9 @@ test.describe("VFilterTab", () => {
       await goAndWaitForSvg(page, { appliedFilterCount, isSelected: true })
       await focusFiltersTab(page)
 
-      expect(await page.locator(wrapper).screenshot()).toMatchSnapshot(
-        `filter-tab-focused-${appliedFilterCount}.png`
+      await expectSnapshot(
+        `filter-tab-focused-${appliedFilterCount}`,
+        page.locator(wrapper)
       )
     })
 
@@ -64,8 +66,9 @@ test.describe("VFilterTab", () => {
       await focusFiltersTab(page)
       await hoverFiltersTab(page)
 
-      expect(await page.locator(wrapper).screenshot()).toMatchSnapshot(
-        `filter-tab-focused-hovered-${appliedFilterCount}.png`
+      await expectSnapshot(
+        `filter-tab-focused-hovered-${appliedFilterCount}`,
+        page.locator(wrapper)
       )
     })
 
@@ -76,8 +79,9 @@ test.describe("VFilterTab", () => {
       }) => {
         await goAndWaitForSvg(page, { appliedFilterCount, isSelected })
 
-        expect(await page.locator(wrapper).screenshot()).toMatchSnapshot(
-          `filter-tab-resting-${selected}-${appliedFilterCount}.png`
+        await expectSnapshot(
+          `filter-tab-resting-${selected}-${appliedFilterCount}`,
+          page.locator(wrapper)
         )
       })
 
@@ -87,8 +91,9 @@ test.describe("VFilterTab", () => {
         await goAndWaitForSvg(page, { appliedFilterCount, isSelected })
         await hoverFiltersTab(page)
 
-        expect(await page.locator(wrapper).screenshot()).toMatchSnapshot(
-          `filter-tab-hovered-${selected}-${appliedFilterCount}.png`
+        await expectSnapshot(
+          `filter-tab-hovered-${selected}-${appliedFilterCount}`,
+          page.locator(wrapper)
         )
       })
     }

frontend/test/storybook/visual-regression/v-header-internal.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test"
+import { test } from "@playwright/test"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 import {
@@ -29,7 +29,7 @@ test.describe("VHeaderInternal", () => {
         })
       })
 
-      breakpoints.describeXs(({ breakpoint }) => {
+      breakpoints.describeXs(({ expectSnapshot }) => {
         test(`mobile header closed`, async ({ page }) => {
           await page.goto(pageUrl(dir))
 
@@ -41,8 +41,9 @@ test.describe("VHeaderInternal", () => {
 
           await page.mouse.move(0, 150)
 
-          await expect(page.locator(headerSelector)).toHaveScreenshot(
-            `mobile-header-internal-closed-${dir}-${breakpoint}.png`
+          await expectSnapshot(
+            `mobile-header-internal-closed-${dir}`,
+            page.locator(headerSelector)
           )
         })
       })

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

@@ -1,12 +1,16 @@
 import { expect, test } from "@playwright/test"
 
+import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot"
+
 test.describe("VIconButton", () => {
   const url = "/iframe.html?id=components-viconbutton--sizes"
 
   test("icon button sizes", async ({ page }) => {
     await page.goto(url)
-    expect(await page.screenshot()).toMatchSnapshot({
-      name: "v-icon-button-sizes.png",
-    })
+
+    // Wait for buttons to be hydrated
+    await expect(page.getByRole("button")).toHaveCount(3)
+    await expect(page.getByRole("button").nth(0)).toBeEnabled()
+    await expectSnapshot("v-icon-button-sizes", page)
   })
 })

frontend/test/storybook/visual-regression/v-language-select.spec.ts

@@ -1,14 +1,13 @@
-import { Page, test, expect } from "@playwright/test"
+import { expect, test } from "@playwright/test"
 
 import { makeGotoWithArgs } from "~~/test/storybook/utils/args"
-
-const expectSnapshot = async (name: string, page: Page) => {
-  expect(await page.screenshot()).toMatchSnapshot({ name: `${name}.png` })
-}
+import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot"
 
 test.describe("VLanguageSelect", () => {
   test("default", async ({ page }) => {
     await makeGotoWithArgs("components-vlanguageselect--default")(page)
-    await expectSnapshot("vlanguageselect-default", page)
+    // Make sure the component is rendered and hydrated
+    await expect(page.getByRole("combobox")).toHaveValue("en")
+    await expectSnapshot("vlanguageselect", page.locator(".screenshot-area"))
   })
 })