Merged in chore/fix-tests (pull request #3430)

Chore/fix tests

* chore: Upgrade nextjs@16.1.1

* chore: upgrade next@16.1.1

* upgrade underlying types

* merge

* Fix broken tests

* bump @swc/plugin-formatjs to latest version

* bump sentry

* transpile "import-in-the-middle" & "require-in-the-middle"

* revert next@16.1.1 upgrade

* revert transpilation addition

* .

packages/design-system/lib/components/Alert/Alert.stories.tsx

@@ -40,7 +40,8 @@ export const Default: Story = {
     ariaRole: "alert",
   },
   play: async ({ canvas }) => {
-    canvas.findByRole("alert")
+    const alert = await canvas.findByRole("alert")
+    expect(alert).toBeVisible()
   },
 }
 

packages/design-system/lib/components/Button/Button.stories.tsx

@@ -560,8 +560,8 @@ export const TextWithIcon: Story = {
     await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
 
-    expect(canvas.getByText("Text with icon")).toBeDefined()
-    expect(canvas.getByTestId("MaterialIcon")).toBeDefined()
+    expect(await canvas.findByText("Text with icon")).toBeDefined()
+    expect(await canvas.findByTestId("MaterialIcon")).toBeDefined()
   },
 }
 
@@ -575,7 +575,7 @@ export const TextWithIconInverted: Story = {
     await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
 
-    expect(canvas.getByText("Text with icon")).toBeDefined()
-    expect(canvas.getByTestId("MaterialIcon")).toBeDefined()
+    expect(await canvas.findByText("Text with icon")).toBeDefined()
+    expect(await canvas.findByTestId("MaterialIcon")).toBeDefined()
   },
 }

packages/design-system/lib/components/ButtonLink/ButtonLink.stories.tsx

@@ -46,9 +46,8 @@ export const Default: Story = {
     href: "#",
     children: "Button link",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -59,9 +58,8 @@ export const PrimaryLarge: Story = {
     variant: "Primary",
     size: "lg",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -71,9 +69,8 @@ export const PrimaryMedium: Story = {
     ...PrimaryLarge.args,
     size: "md",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -83,9 +80,8 @@ export const PrimarySmall: Story = {
     ...PrimaryLarge.args,
     size: "sm",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -97,9 +93,8 @@ export const PrimaryOnDarkBackground: Story = {
     variant: "Primary",
     size: "lg",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -113,9 +108,8 @@ export const PrimaryInvertedLarge: Story = {
     size: "lg",
   },
 
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -126,9 +120,8 @@ export const PrimaryInvertedMedium: Story = {
     ...PrimaryInvertedLarge.args,
     size: "md",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -139,9 +132,8 @@ export const PrimaryInvertedSmall: Story = {
     ...PrimaryInvertedLarge.args,
     size: "sm",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -152,9 +144,8 @@ export const SecondaryLarge: Story = {
     variant: "Secondary",
     size: "lg",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -164,9 +155,8 @@ export const SecondaryMedium: Story = {
     ...SecondaryLarge.args,
     size: "md",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -176,9 +166,8 @@ export const SecondarySmall: Story = {
     ...SecondaryLarge.args,
     size: "sm",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -191,9 +180,8 @@ export const SecondaryInvertedLarge: Story = {
     color: "Inverted",
     size: "lg",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -204,9 +192,8 @@ export const SecondaryInvertedMedium: Story = {
     ...SecondaryInvertedLarge.args,
     size: "md",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -217,9 +204,8 @@ export const SecondaryInvertedSmall: Story = {
     ...SecondaryInvertedLarge.args,
     size: "sm",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -230,9 +216,8 @@ export const TertiaryLarge: Story = {
     variant: "Tertiary",
     size: "lg",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -242,9 +227,8 @@ export const TertiaryMedium: Story = {
     ...TertiaryLarge.args,
     size: "md",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -254,9 +238,8 @@ export const TertiarySmall: Story = {
     ...TertiaryLarge.args,
     size: "sm",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -267,9 +250,8 @@ export const TextLarge: Story = {
     variant: "Text",
     size: "lg",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -279,9 +261,8 @@ export const TextMedium: Story = {
     ...TextLarge.args,
     size: "md",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -291,9 +272,8 @@ export const TextSmall: Story = {
     ...TextLarge.args,
     size: "sm",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -304,9 +284,8 @@ export const TextNoWrapping: Story = {
     children: "Text button with wrapping false",
     wrapping: false,
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -319,9 +298,8 @@ export const TextInvertedLarge: Story = {
     color: "Inverted",
     size: "lg",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -332,9 +310,8 @@ export const TextInvertedMedium: Story = {
     ...TextInvertedLarge.args,
     size: "md",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -345,9 +322,8 @@ export const TextInvertedSmall: Story = {
     ...TextInvertedLarge.args,
     size: "sm",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -359,9 +335,8 @@ export const TextWithIcon: Story = {
     children: "Text with icon",
     trailingIconName: "chevron_right",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link", { name: /Text with icon/i })
     expect(link).toBeInTheDocument()
   },
 }
@@ -372,9 +347,8 @@ export const TextWithIconInverted: Story = {
     ...TextWithIcon.args,
     color: "Inverted",
   },
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }

packages/design-system/lib/components/IconButton/IconButton.stories.tsx

@@ -116,7 +116,7 @@ export const Default: Story = {
     iconName: "search",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -268,7 +268,7 @@ export const Filled: Story = {
     variant: "Filled",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -279,7 +279,7 @@ export const FilledDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -290,7 +290,7 @@ export const FilledOnDarkBackground: Story = {
     ...Filled.args,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -302,7 +302,7 @@ export const FilledWithEmphasis: Story = {
     emphasis: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -313,7 +313,7 @@ export const FilledWithEmphasisDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -325,7 +325,7 @@ export const Outlined: Story = {
     variant: "Outlined",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -336,7 +336,7 @@ export const OutlinedDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -348,7 +348,7 @@ export const Elevated: Story = {
     variant: "Elevated",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -359,7 +359,7 @@ export const ElevatedDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -372,7 +372,7 @@ export const Faded: Story = {
     variant: "Faded",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -384,7 +384,7 @@ export const FadedDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -397,7 +397,7 @@ export const Muted: Story = {
     variant: "Muted",
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -409,7 +409,7 @@ export const MutedDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }
@@ -420,7 +420,7 @@ export const MutedWithEmphasis: Story = {
     emphasis: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(1)
   },
 }
@@ -431,7 +431,7 @@ export const MutedWithEmphasisDisabled: Story = {
     isDisabled: true,
   },
   play: async ({ canvas, userEvent, args }) => {
-    await userEvent.click(canvas.getByRole("button"))
+    await userEvent.click(await canvas.findByRole("button"))
     expect(args.onPress).toHaveBeenCalledTimes(0)
   },
 }

packages/design-system/lib/components/Icons/MaterialIcon/index.tsx

@@ -52,7 +52,12 @@ export function MaterialIcon({
   const iconClassName = iconVariants({ color })
 
   return (
-    <span className={`${styles.iconWrapper}`} {...props}>
+    <span
+      data-testid="MaterialIcon"
+      data-icon-name={icon}
+      className={`${styles.iconWrapper}`}
+      {...props}
+    >
       <IconComponent
         width={size}
         height={size}

packages/design-system/lib/components/InfoCard/InfoCard.stories.tsx

@@ -115,7 +115,6 @@ const meta: Meta<typeof InfoCard> = {
             style={{ display: "grid", gap: "1rem" }}
           >
             {Object.keys(infoCardConfig.variants.theme).map((theme) => {
-              console.log(theme)
               const args = {
                 ...context.args,
                 backgroundImage:

packages/design-system/lib/components/Input/Input.test.tsx

@@ -71,35 +71,37 @@ describe("Input", () => {
       expect(screen.queryByLabelText("Clear content")).toBeNull()
     })
 
-    it("does not show clear button when input is empty", () => {
+    it("does not show clear button when input is empty", async () => {
       renderInput({
         label: "Email",
         value: "",
         onChange: vi.fn(),
         showClearContentIcon: true,
       })
+
+      expect(await screen.findByRole("textbox")).toBeTruthy()
       expect(screen.queryByLabelText("Clear content")).toBeNull()
     })
 
-    it("shows clear button when input has value and showClearContentIcon is true", () => {
+    it("shows clear button when input has value and showClearContentIcon is true", async () => {
       renderInput({
         label: "Email",
         value: "test",
         onChange: vi.fn(),
         showClearContentIcon: true,
       })
-      expect(screen.getByLabelText("Clear content")).toBeTruthy()
+      expect(await screen.findByLabelText("Clear content")).toBeTruthy()
     })
   })
 
   describe("icons", () => {
-    it("renders left icon when provided", () => {
+    it("renders left icon when provided", async () => {
       renderInput({
         label: "Search",
         // eslint-disable-next-line formatjs/no-literal-string-in-jsx
         leftIcon: <span data-testid="left-icon">🔍</span>,
       })
-      expect(screen.getByTestId("left-icon")).toBeTruthy()
+      expect(await screen.findByTestId("left-icon")).toBeTruthy()
     })
 
     it("renders right icon when provided", () => {
@@ -111,7 +113,7 @@ describe("Input", () => {
       expect(screen.getByTestId("right-icon")).toBeTruthy()
     })
 
-    it("hides right icon when clear button is shown", () => {
+    it("hides right icon when clear button is shown", async () => {
       renderInput({
         label: "Email",
         value: "test",
@@ -120,8 +122,8 @@ describe("Input", () => {
         // eslint-disable-next-line formatjs/no-literal-string-in-jsx
         rightIcon: <span data-testid="right-icon">👁</span>,
       })
+      expect(await screen.findByLabelText("Clear content")).toBeTruthy()
       expect(screen.queryByTestId("right-icon")).toBeNull()
-      expect(screen.getByLabelText("Clear content")).toBeTruthy()
     })
 
     it("shows right icon when clear button condition not met", () => {

packages/design-system/lib/components/PasswordInput/PasswordInput.test.tsx

@@ -39,39 +39,43 @@ const renderPasswordInput = (
 
 describe("PasswordInput", () => {
   describe("rendering", () => {
-    it("renders with default password label", () => {
+    it("renders with default password label", async () => {
       renderPasswordInput()
-      expect(screen.getByLabelText("Password")).toBeTruthy()
+      expect(await screen.findByLabelText("Password")).toBeTruthy()
     })
 
-    it("renders with custom label", () => {
+    it("renders with custom label", async () => {
       renderPasswordInput({ label: "Enter your password" })
-      expect(screen.getByLabelText("Enter your password")).toBeTruthy()
+      expect(await screen.findByLabelText("Enter your password")).toBeTruthy()
     })
 
-    it("renders with new password label when isNewPassword is true", () => {
+    it("renders with new password label when isNewPassword is true", async () => {
       renderPasswordInput({ isNewPassword: true })
-      expect(screen.getByLabelText("New password")).toBeTruthy()
+      expect(await screen.findByLabelText("New password")).toBeTruthy()
     })
   })
 
   describe("visibility toggle", () => {
-    it("shows visibility toggle button by default", () => {
+    it("shows visibility toggle button by default", async () => {
       renderPasswordInput()
-      expect(screen.getByLabelText("Show password")).toBeTruthy()
+      expect(await screen.findByLabelText("Show password")).toBeTruthy()
     })
 
-    it("hides visibility toggle when visibilityToggleable is false", () => {
+    it("hides visibility toggle when visibilityToggleable is false", async () => {
       renderPasswordInput({ visibilityToggleable: false })
+      expect(await screen.findByLabelText("Password")).toBeTruthy()
       expect(screen.queryByLabelText("Show password")).toBeNull()
       expect(screen.queryByLabelText("Hide password")).toBeNull()
     })
   })
 
   describe("disabled state", () => {
-    it("disables the input when disabled prop is true", () => {
+    it("disables the input when disabled prop is true", async () => {
       renderPasswordInput({ disabled: true })
-      expect(screen.getByLabelText("Password")).toHaveProperty("disabled", true)
+      expect(await screen.findByLabelText("Password")).toHaveProperty(
+        "disabled",
+        true
+      )
     })
   })
 
@@ -80,7 +84,7 @@ describe("PasswordInput", () => {
       const user = userEvent.setup()
       renderPasswordInput()
 
-      const input = screen.getByLabelText("Password")
+      const input = await screen.findByLabelText("Password")
       await user.type(input, "secret123")
 
       expect(input).toHaveProperty("value", "secret123")
@@ -90,7 +94,7 @@ describe("PasswordInput", () => {
       const user = userEvent.setup()
       renderPasswordInput({ name: "confirmPassword" }, { confirmPassword: "" })
 
-      const input = screen.getByLabelText("Password")
+      const input = await screen.findByLabelText("Password")
       await user.type(input, "test")
 
       expect(input).toHaveProperty("value", "test")

packages/design-system/lib/components/TextLink/TextLink.stories.tsx

@@ -39,9 +39,8 @@ export const Default: Story = {
     href: "https://www.scandichotels.com/en",
   },
   render: (args) => <TextLink {...args}>Default link</TextLink>,
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -52,9 +51,8 @@ export const Inverted: Story = {
     theme: "Inverted",
   },
   render: (args) => <TextLink {...args}>Inverted link</TextLink>,
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -65,9 +63,8 @@ export const Disabled: Story = {
     isDisabled: true,
   },
   render: (args) => <TextLink {...args}>Disabled link</TextLink>,
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -82,9 +79,8 @@ export const WithIcon: Story = {
       <MaterialIcon icon="arrow_forward" size={24} color="CurrentColor" />
     </TextLink>
   ),
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -95,9 +91,8 @@ export const Small: Story = {
     typography: "Link/sm",
   },
   render: (args) => <TextLink {...args}>Small link</TextLink>,
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -113,9 +108,8 @@ export const SmallWithIcon: Story = {
       <MaterialIcon icon="arrow_forward" size={20} color="CurrentColor" />
     </TextLink>
   ),
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }
@@ -135,9 +129,8 @@ export const Inline: Story = {
       </p>
     </Typography>
   ),
-  play: async ({ canvasElement }) => {
-    const link = canvasElement.querySelector("a")
-    if (!link) throw new Error("Link not found")
+  play: async ({ canvas }) => {
+    const link = await canvas.findByRole("link")
     expect(link).toBeInTheDocument()
   },
 }

packages/design-system/lib/components/Toasts/Toast.stories.tsx

@@ -1,7 +1,7 @@
 import { Toast } from "./Toast"
 
 import type { Meta, StoryObj } from "@storybook/nextjs-vite"
-import { expect } from "storybook/test"
+import { expect, within } from "storybook/test"
 
 import { config } from "./variants.ts"
 
@@ -52,7 +52,7 @@ export const DefaultWithCustomContent: Story = {
   play: async ({ canvas }) => {
     const toast = await canvas.findByRole("status")
     expect(toast).toBeVisible()
-    expect(canvas.getByText("This is a custom info toast")).toBeVisible()
+    expect(await canvas.findByText("This is a custom info toast")).toBeVisible()
   },
 }
 
@@ -61,10 +61,11 @@ export const Success: Story = {
     variant: "success",
     message: "This is a success toast",
   },
-  play: async ({ canvas, args }) => {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
     const toast = await canvas.findByRole("status")
     expect(toast).toBeVisible()
-    expect(canvas.getByText(args.message as string)).toBeVisible()
+    expect(await canvas.findByText(args.message as string)).toBeVisible()
   },
 }
 
@@ -73,10 +74,11 @@ export const Error: Story = {
     variant: "error",
     message: "This is an error toast",
   },
-  play: async ({ canvas, args }) => {
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement)
     const toast = await canvas.findByRole("alert")
     expect(toast).toBeVisible()
-    expect(canvas.getByText(args.message as string)).toBeVisible()
+    expect(await canvas.findByText(args.message as string)).toBeVisible()
   },
 }
 
@@ -85,9 +87,10 @@ export const Warning: Story = {
     variant: "warning",
     message: "This is a warning toast",
   },
-  play: async ({ canvas, args }) => {
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement)
     const toast = await canvas.findByRole("alert")
     expect(toast).toBeVisible()
-    expect(canvas.getByText(args.message as string)).toBeVisible()
+    expect(await canvas.findByText(args.message as string)).toBeVisible()
   },
 }

packages/design-system/lib/components/VideoPlayer/VideoPlayer.stories.tsx

@@ -7,6 +7,11 @@ import { config as videoPlayerConfig } from "./variants"
 const meta: Meta<typeof VideoPlayer> = {
   title: "Core Components/Video/VideoPlayer",
   component: VideoPlayer,
+  beforeEach: () => {
+    // Mock video methods to prevent actual playback
+    window.HTMLMediaElement.prototype.play = () => Promise.resolve()
+    window.HTMLMediaElement.prototype.pause = () => {}
+  },
 
   parameters: {
     docs: {

packages/design-system/vitest.config.ts

@@ -52,6 +52,7 @@ export default mergeConfig(
               headless: true,
               instances: browserInstances,
             },
+            fileParallelism: false,
             setupFiles: ["./.storybook/vitest.setup.ts"],
           },
         },