Merged in feature/storybook-tests (pull request #2623)

Feature/storybook tests * feature: add interaction tests for storybook and upgrade storybook@9 * add a11y testing for storybook * Merge branch 'master' of bitbucket.org:scandic-swap/web into feature/storybook-tests * Test and build only required packages * . * . * . * . * . * . * . * disable playwright tests in netlify ci * . * debug out process.env * don't run playwright on CI * remove unused netlify-plugin-playwright-cache * . * . * . * . * . * . * remove turbo dependancy to design-system#test * merge * merge Approved-by: Anton Gunnarsson
2025-08-14 06:25:08 +00:00
parent b2148cd12e
commit f531c7a49f
43 changed files with 1132 additions and 2120 deletions
--- a/packages/design-system/lib/components/Button/Button.stories.tsx
+++ b/packages/design-system/lib/components/Button/Button.stories.tsx
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'

-import { fn } from '@storybook/test'
+import { expect, fn } from 'storybook/test'

 import { MaterialIcon } from '../Icons/MaterialIcon'
 import { config as typographyConfig } from '../Typography/variants'
@@ -58,6 +58,12 @@ export const PrimaryDefault: Story = {
    children: 'Primary button',
    typography: 'Body/Paragraph/mdBold',
    variant: 'Primary',
+    isDisabled: false,
+    isPending: false,
+  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
  },
 }

@@ -66,6 +72,10 @@ export const PrimaryDisabled: Story = {
    ...PrimaryDefault.args,
    isDisabled: true,
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const PrimaryLoading: Story = {
@@ -73,6 +83,10 @@ export const PrimaryLoading: Story = {
    ...PrimaryDefault.args,
    isPending: true,
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const PrimaryLarge: Story = {
@@ -80,6 +94,10 @@ export const PrimaryLarge: Story = {
    ...PrimaryDefault.args,
    size: 'Large',
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const PrimaryMedium: Story = {
@@ -87,6 +105,10 @@ export const PrimaryMedium: Story = {
    ...PrimaryDefault.args,
    size: 'Medium',
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const PrimarySmall: Story = {
@@ -94,6 +116,10 @@ export const PrimarySmall: Story = {
    ...PrimaryDefault.args,
    size: 'Small',
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const PrimaryInvertedDefault: Story = {
@@ -104,6 +130,10 @@ export const PrimaryInvertedDefault: Story = {
    variant: 'Primary',
    color: 'Inverted',
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const PrimaryInvertedDisabled: Story = {
@@ -111,6 +141,10 @@ export const PrimaryInvertedDisabled: Story = {
    ...PrimaryInvertedDefault.args,
    isDisabled: true,
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const PrimaryInvertedLoading: Story = {
@@ -118,6 +152,10 @@ export const PrimaryInvertedLoading: Story = {
    ...PrimaryInvertedDefault.args,
    isPending: true,
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const PrimaryInvertedLarge: Story = {
@@ -125,6 +163,11 @@ export const PrimaryInvertedLarge: Story = {
    ...PrimaryInvertedDefault.args,
    size: 'Large',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const PrimaryInvertedMedium: Story = {
@@ -132,6 +175,11 @@ export const PrimaryInvertedMedium: Story = {
    ...PrimaryInvertedDefault.args,
    size: 'Medium',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const PrimaryInvertedSmall: Story = {
@@ -139,6 +187,11 @@ export const PrimaryInvertedSmall: Story = {
    ...PrimaryInvertedDefault.args,
    size: 'Small',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const SecondaryDefault: Story = {
@@ -148,6 +201,11 @@ export const SecondaryDefault: Story = {
    typography: 'Body/Paragraph/mdBold',
    variant: 'Secondary',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const SecondaryDisabled: Story = {
@@ -155,6 +213,10 @@ export const SecondaryDisabled: Story = {
    ...SecondaryDefault.args,
    isDisabled: true,
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const SecondaryLoading: Story = {
@@ -162,6 +224,11 @@ export const SecondaryLoading: Story = {
    ...SecondaryDefault.args,
    isPending: true,
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const SecondaryLarge: Story = {
@@ -169,6 +236,11 @@ export const SecondaryLarge: Story = {
    ...SecondaryDefault.args,
    size: 'Large',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const SecondaryMedium: Story = {
@@ -176,6 +248,11 @@ export const SecondaryMedium: Story = {
    ...SecondaryDefault.args,
    size: 'Medium',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const SecondarySmall: Story = {
@@ -183,6 +260,11 @@ export const SecondarySmall: Story = {
    ...SecondaryDefault.args,
    size: 'Small',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const SecondaryInvertedDefault: Story = {
@@ -193,6 +275,11 @@ export const SecondaryInvertedDefault: Story = {
    variant: 'Secondary',
    color: 'Inverted',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const SecondaryInvertedDisabled: Story = {
@@ -200,6 +287,11 @@ export const SecondaryInvertedDisabled: Story = {
    ...SecondaryInvertedDefault.args,
    isDisabled: true,
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const SecondaryInvertedLoading: Story = {
@@ -207,6 +299,11 @@ export const SecondaryInvertedLoading: Story = {
    ...SecondaryInvertedDefault.args,
    isPending: true,
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const SecondaryInvertedLarge: Story = {
@@ -214,6 +311,11 @@ export const SecondaryInvertedLarge: Story = {
    ...SecondaryInvertedDefault.args,
    size: 'Large',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const SecondaryInvertedMedium: Story = {
@@ -221,6 +323,11 @@ export const SecondaryInvertedMedium: Story = {
    ...SecondaryInvertedDefault.args,
    size: 'Medium',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const SecondaryInvertedSmall: Story = {
@@ -228,6 +335,11 @@ export const SecondaryInvertedSmall: Story = {
    ...SecondaryInvertedDefault.args,
    size: 'Small',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TertiaryDefault: Story = {
@@ -237,6 +349,11 @@ export const TertiaryDefault: Story = {
    typography: 'Body/Paragraph/mdBold',
    variant: 'Tertiary',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TertiaryDisabled: Story = {
@@ -244,6 +361,11 @@ export const TertiaryDisabled: Story = {
    ...TertiaryDefault.args,
    isDisabled: true,
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const TertiaryLoading: Story = {
@@ -251,12 +373,22 @@ export const TertiaryLoading: Story = {
    ...TertiaryDefault.args,
    isPending: true,
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }
 export const TertiaryLarge: Story = {
  args: {
    ...TertiaryDefault.args,
    size: 'Large',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TertiaryMedium: Story = {
@@ -264,6 +396,11 @@ export const TertiaryMedium: Story = {
    ...TertiaryDefault.args,
    size: 'Medium',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TertiarySmall: Story = {
@@ -271,6 +408,11 @@ export const TertiarySmall: Story = {
    ...TertiaryDefault.args,
    size: 'Small',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TextDefault: Story = {
@@ -280,6 +422,11 @@ export const TextDefault: Story = {
    typography: 'Body/Paragraph/mdBold',
    variant: 'Text',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TextDisabled: Story = {
@@ -287,6 +434,11 @@ export const TextDisabled: Story = {
    ...TextDefault.args,
    isDisabled: true,
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const TextLarge: Story = {
@@ -294,6 +446,11 @@ export const TextLarge: Story = {
    ...TextDefault.args,
    size: 'Large',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TextMedium: Story = {
@@ -301,6 +458,11 @@ export const TextMedium: Story = {
    ...TextDefault.args,
    size: 'Medium',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TextSmall: Story = {
@@ -308,6 +470,11 @@ export const TextSmall: Story = {
    ...TextDefault.args,
    size: 'Small',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TextNoWrapping: Story = {
@@ -316,6 +483,10 @@ export const TextNoWrapping: Story = {
    children: 'Text button with wrapping false',
    wrapping: false,
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TextInvertedDefault: Story = {
@@ -326,6 +497,11 @@ export const TextInvertedDefault: Story = {
    variant: 'Text',
    color: 'Inverted',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TextInvertedDisabled: Story = {
@@ -333,6 +509,11 @@ export const TextInvertedDisabled: Story = {
    ...TextInvertedDefault.args,
    isDisabled: true,
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const TextInvertedLarge: Story = {
@@ -340,6 +521,11 @@ export const TextInvertedLarge: Story = {
    ...TextInvertedDefault.args,
    size: 'Large',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TextInvertedMedium: Story = {
@@ -347,6 +533,11 @@ export const TextInvertedMedium: Story = {
    ...TextInvertedDefault.args,
    size: 'Medium',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TextInvertedSmall: Story = {
@@ -354,6 +545,11 @@ export const TextInvertedSmall: Story = {
    ...TextInvertedDefault.args,
    size: 'Small',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TextWithIcon: Story = {
@@ -368,6 +564,13 @@ export const TextWithIcon: Story = {
    typography: 'Body/Paragraph/mdBold',
    variant: 'Text',
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+
+    expect(canvas.getByText('Text with icon')).toBeDefined()
+    expect(canvas.getByTestId('MaterialIcon')).toBeDefined()
+  },
 }

 export const TextWithIconInverted: Story = {
@@ -383,4 +586,12 @@ export const TextWithIconInverted: Story = {
    variant: 'Text',
    color: 'Inverted',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(await canvas.findByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+
+    expect(canvas.getByText('Text with icon')).toBeDefined()
+    expect(canvas.getByTestId('MaterialIcon')).toBeDefined()
+  },
 }
--- a/packages/design-system/lib/components/Card/Card.stories.tsx
+++ b/packages/design-system/lib/components/Card/Card.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'

 import { Card } from './Card.tsx'

--- a/packages/design-system/lib/components/Card/Compositions/ContentCard.stories.tsx
+++ b/packages/design-system/lib/components/Card/Compositions/ContentCard.stories.tsx
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { fn } from '@storybook/test'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { fn } from 'storybook/test'

 import { themes } from '../../../../.storybook/preview'

--- a/packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx
+++ b/packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'

-import { fn } from '@storybook/test'
+import { fn } from 'storybook/test'

 import { MaterialIcon } from '../Icons/MaterialIcon/MaterialIcon.tsx'
 import { ChipButton } from './ChipButton.tsx'
--- a/packages/design-system/lib/components/ChipLink/ChipLink.stories.tsx
+++ b/packages/design-system/lib/components/ChipLink/ChipLink.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'

 import { MaterialIcon } from '../Icons/MaterialIcon'
 import { ChipLink } from './ChipLink.tsx'
--- a/packages/design-system/lib/components/Chips/Chips.stories.tsx
+++ b/packages/design-system/lib/components/Chips/Chips.stories.tsx
@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { fn } from '@storybook/test'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { fn } from 'storybook/test'

 import { Chips } from './Chips.tsx'
 import { ChipLink } from '../ChipLink/ChipLink.tsx'
--- a/packages/design-system/lib/components/Divider/Divider.stories.tsx
+++ b/packages/design-system/lib/components/Divider/Divider.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'

 import { Divider } from './Divider'

--- a/packages/design-system/lib/components/IconButton/IconButton.stories.tsx
+++ b/packages/design-system/lib/components/IconButton/IconButton.stories.tsx
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'

-import { fn } from '@storybook/test'
+import { expect, fn } from 'storybook/test'

 import { MaterialIcon } from '../Icons/MaterialIcon'
 import { IconButton } from './IconButton'
@@ -40,6 +40,10 @@ export const PrimaryDefault: Story = {
    children: <MaterialIcon icon="search" size={24} color="CurrentColor" />,
    theme: 'Primary',
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const PrimaryDisabled: Story = {
@@ -47,6 +51,10 @@ export const PrimaryDisabled: Story = {
    ...PrimaryDefault.args,
    isDisabled: true,
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const InvertedDefault: Story = {
@@ -57,6 +65,10 @@ export const InvertedDefault: Story = {
    ),
    theme: 'Inverted',
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const InvertedDisabled: Story = {
@@ -64,6 +76,10 @@ export const InvertedDisabled: Story = {
    ...InvertedDefault.args,
    isDisabled: true,
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const InvertedElevated: Story = {
@@ -71,6 +87,10 @@ export const InvertedElevated: Story = {
    ...InvertedDefault.args,
    style: 'Elevated',
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const InvertedElevatedDisabled: Story = {
@@ -78,6 +98,10 @@ export const InvertedElevatedDisabled: Story = {
    ...InvertedElevated.args,
    isDisabled: true,
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const InvertedMuted: Story = {
@@ -86,6 +110,11 @@ export const InvertedMuted: Story = {
    children: <MaterialIcon icon="close" size={24} color="CurrentColor" />,
    style: 'Muted',
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const InvertedMutedDisabled: Story = {
@@ -93,6 +122,11 @@ export const InvertedMutedDisabled: Story = {
    ...InvertedMuted.args,
    isDisabled: true,
  },
+
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const InvertedFaded: Story = {
@@ -100,6 +134,10 @@ export const InvertedFaded: Story = {
    ...InvertedDefault.args,
    style: 'Faded',
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const InvertedFadedDisabled: Story = {
@@ -107,6 +145,10 @@ export const InvertedFadedDisabled: Story = {
    ...InvertedFaded.args,
    isDisabled: true,
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const TertiaryElevated: Story = {
@@ -116,6 +158,10 @@ export const TertiaryElevated: Story = {
    theme: 'Tertiary',
    style: 'Elevated',
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const TertiaryDisabled: Story = {
@@ -123,6 +169,10 @@ export const TertiaryDisabled: Story = {
    ...TertiaryElevated.args,
    isDisabled: true,
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }

 export const BlackMuted: Story = {
@@ -131,6 +181,10 @@ export const BlackMuted: Story = {
    children: <MaterialIcon icon="close" size={24} color="CurrentColor" />,
    theme: 'Black',
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(1)
+  },
 }

 export const BlackMutedDisabled: Story = {
@@ -138,4 +192,8 @@ export const BlackMutedDisabled: Story = {
    ...BlackMuted.args,
    isDisabled: true,
  },
+  play: async ({ canvas, userEvent, args }) => {
+    await userEvent.click(canvas.getByRole('button'))
+    expect(args.onPress).toHaveBeenCalledTimes(0)
+  },
 }
--- a/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx
+++ b/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx
@@ -23,6 +23,7 @@ export function MaterialIcon({
    <span>
      <MaterialSymbol
        className={classNames}
+        data-testid="MaterialIcon"
        size={size}
        {...props}
        fill={isFilled}
--- a/packages/design-system/lib/components/Input/Input.stories.tsx
+++ b/packages/design-system/lib/components/Input/Input.stories.tsx
@@ -1,10 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { expect } from 'storybook/test'

 import { Input } from './Input'
 import { TextField } from 'react-aria-components'

 const meta: Meta<typeof Input> = {
  title: 'Components/Input',
+  // @ts-expect-error Input does not support this, but wrapping <TextField> does
  component: ({ isInvalid, ...props }) => (
    <TextField isInvalid={isInvalid}>
      <Input {...props} />
@@ -23,6 +26,19 @@ export const Default: Story = {
    name: 'foo',
    required: false,
  },
+
+  play: async ({ canvas, userEvent }) => {
+    const textbox = canvas.getByRole('textbox')
+    expect(textbox).not.toBeDisabled()
+
+    expect(textbox).toHaveValue('')
+
+    await userEvent.type(textbox, 'Hello World')
+    expect(textbox).toHaveValue('Hello World')
+
+    await userEvent.clear(textbox)
+    expect(textbox).toHaveValue('')
+  },
 }

 export const Filled: Story = {
@@ -31,6 +47,13 @@ export const Filled: Story = {
    name: 'foo',
    value: 'Value',
  },
+
+  play: async ({ canvas }) => {
+    const textbox = canvas.getByRole('textbox')
+    expect(textbox).toHaveValue('Value')
+
+    expect(textbox).not.toBeDisabled()
+  },
 }

 export const Error: Story = {
@@ -40,6 +63,12 @@ export const Error: Story = {
    // @ts-expect-error Input does not support this, but wrapping <TextField> does
    isInvalid: true,
  },
+
+  play: async ({ canvas }) => {
+    const textbox = canvas.getByRole('textbox')
+    expect(textbox).toHaveAttribute('aria-invalid', 'true')
+    expect(textbox).not.toBeDisabled()
+  },
 }

 export const Disabled: Story = {
@@ -48,6 +77,15 @@ export const Disabled: Story = {
    name: 'foo',
    disabled: true,
  },
+
+  play: async ({ canvas, userEvent }) => {
+    const textbox = canvas.getByRole('textbox')
+    expect(textbox).toHaveValue('')
+    expect(textbox).toBeDisabled()
+
+    await userEvent.type(textbox, 'Hello World')
+    expect(textbox).toHaveValue('')
+  },
 }

 export const DisabledFilled: Story = {
@@ -57,4 +95,13 @@ export const DisabledFilled: Story = {
    disabled: true,
    value: 'Value',
  },
+
+  play: async ({ canvas, userEvent }) => {
+    const textbox = canvas.getByRole('textbox')
+    expect(textbox).toHaveValue('Value')
+    expect(textbox).toBeDisabled()
+
+    await userEvent.type(textbox, 'Hello World')
+    expect(textbox).toHaveValue('Value')
+  },
 }
--- a/packages/design-system/lib/components/Label/Label.stories.tsx
+++ b/packages/design-system/lib/components/Label/Label.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'

 import { Label } from './Label'

--- a/packages/design-system/lib/components/Loading/Loading.stories.tsx
+++ b/packages/design-system/lib/components/Loading/Loading.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'

 import { Loading } from './Loading'
 import { config } from './variants'
--- a/packages/design-system/lib/components/RateCard/Campaign/Campaign.stories.tsx
+++ b/packages/design-system/lib/components/RateCard/Campaign/Campaign.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import CampaignRateCard from '.'

 const meta: Meta<typeof CampaignRateCard> = {
--- a/packages/design-system/lib/components/RateCard/Code/Code.stories.tsx
+++ b/packages/design-system/lib/components/RateCard/Code/Code.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import CodeRateCard from '.'

 const meta: Meta<typeof CodeRateCard> = {
--- a/packages/design-system/lib/components/RateCard/NoRateAvailable/NoRateAvailable.stories.tsx
+++ b/packages/design-system/lib/components/RateCard/NoRateAvailable/NoRateAvailable.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import NoRateAvailableCard from '.'

 const meta: Meta<typeof NoRateAvailableCard> = {
--- a/packages/design-system/lib/components/RateCard/Points/Points.stories.tsx
+++ b/packages/design-system/lib/components/RateCard/Points/Points.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'

 import PointsRateCard from '.'

--- a/packages/design-system/lib/components/RateCard/Regular/Regular.stories.tsx
+++ b/packages/design-system/lib/components/RateCard/Regular/Regular.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import RegularRateCard from '.'

 const meta: Meta<typeof RegularRateCard> = {
--- a/packages/design-system/lib/components/Select/Select.stories.tsx
+++ b/packages/design-system/lib/components/Select/Select.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'

 import { Select } from './Select'

--- a/packages/design-system/lib/components/Typography/Typography.docs.mdx
+++ b/packages/design-system/lib/components/Typography/Typography.docs.mdx
@@ -5,7 +5,7 @@ import {
  Description,
  Controls,
  Stories,
-} from '@storybook/blocks'
+} from '@storybook/addon-docs/blocks'

 import * as TypographyStories from './Typography.stories.tsx'

--- a/packages/design-system/lib/components/Typography/Typography.stories.tsx
+++ b/packages/design-system/lib/components/Typography/Typography.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react-vite'

 import { Typography } from './Typography.tsx'