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

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