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