Make Storybook visual regression tests more strict

frontend/src/components/VContentSwitcher/meta/VSearchTypes.stories.js

@@ -8,6 +8,9 @@ const meta = {
 
   parameters: {
     height: "480px",
+    viewport: {
+      defaultViewport: "sm",
+    },
   },
 
   argTypes: {
@@ -29,7 +32,15 @@ export const Default = {
   render: (args) => ({
     components: { VSearchTypes },
     setup() {
-      return () => h(VSearchTypes, args)
+      return () =>
+        h(
+          "div",
+          {
+            style: args.size === "small" ? "width: max-content;" : "",
+            class: "wrapper p-2",
+          },
+          [h(VSearchTypes, args)]
+        )
     },
   }),
   name: "Default",

frontend/test/storybook/playwright.config.ts

@@ -16,7 +16,7 @@ export default defineConfig({
   expect: {
     toMatchSnapshot: {
       // To avoid flaky tests, we allow a small amount of pixel difference.
-      maxDiffPixelRatio: 0.01,
+      maxDiffPixelRatio: 0.003,
     },
   },
 })

frontend/test/storybook/visual-regression/v-search-types.spec.ts

@@ -17,17 +17,29 @@ test.describe("VSearchTypes", () => {
       await expect(page.getByRole("radio").nth(0)).toBeEnabled()
     })
     test("medium resting", async ({ page }) => {
-      await expectSnapshot(page, "v-search-types-medium-at-rest", page)
+      await expectSnapshot(
+        page,
+        "v-search-types-medium-at-rest",
+        page.locator(".wrapper")
+      )
     })
 
     test("medium images hovered", async ({ page }) => {
       await page.hover(audioButtonLocator)
-      await expectSnapshot(page, "v-search-types-medium-images-hovered", page)
+      await expectSnapshot(
+        page,
+        "v-search-types-medium-images-hovered",
+        page.locator(".wrapper")
+      )
     })
 
     test("medium focused", async ({ page }) => {
       await page.keyboard.press("Tab")
-      await expectSnapshot(page, "v-search-types-medium-focused", page)
+      await expectSnapshot(
+        page,
+        "v-search-types-medium-focused",
+        page.locator(".wrapper")
+      )
     })
   })
 
@@ -39,17 +51,29 @@ test.describe("VSearchTypes", () => {
     })
 
     test("small resting", async ({ page }) => {
-      await expectSnapshot(page, "v-search-types-small-at-rest", page)
+      await expectSnapshot(
+        page,
+        "v-search-types-small-at-rest",
+        page.locator(".wrapper")
+      )
     })
 
     test("small images hovered", async ({ page }) => {
       await page.hover(audioButtonLocator)
-      await expectSnapshot(page, "v-search-types-small-images-hovered", page)
+      await expectSnapshot(
+        page,
+        "v-search-types-small-images-hovered",
+        page.locator(".wrapper")
+      )
     })
 
     test("small focused", async ({ page }) => {
       await page.keyboard.press("Tab")
-      await expectSnapshot(page, "v-search-types-small-focused", page)
+      await expectSnapshot(
+        page,
+        "v-search-types-small-focused",
+        page.locator(".wrapper")
+      )
     })
   })
 })