scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Joakim Jäderberg
2025-08-14 06:25:08 +00:00
parent b2148cd12e
commit f531c7a49f
43 changed files with 1132 additions and 2120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
packages/design-system/lib/components/Button/Button.stories.tsx
View File

@@ -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()
},
}