refactor: update storybook to v9

.github/workflows/aat-reports.yml

@@ -37,7 +37,7 @@ jobs:
           echo "pid=$pid" >> $GITHUB_OUTPUT
           sleep 5
       - name: Run AAT
-        uses: docker://mcr.microsoft.com/playwright:v1.52.0-jammy
+        uses: docker://mcr.microsoft.com/playwright:v1.53.1-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
         with:

.github/workflows/ci.yml

@@ -68,7 +68,7 @@ jobs:
       - name: Test
         run: npm run test -- --coverage
       - name: Run tests defined in vitest
-        uses: docker://mcr.microsoft.com/playwright:v1.52.0-jammy
+        uses: docker://mcr.microsoft.com/playwright:v1.53.1-jammy
         with:
           args: npx vitest
 

.github/workflows/stress-tests.yml

@@ -25,7 +25,7 @@ jobs:
           echo "pid=$pid" >> $GITHUB_OUTPUT
           sleep 5
       - name: Run Stress Tests
-        uses: docker://mcr.microsoft.com/playwright:v1.52.0-jammy
+        uses: docker://mcr.microsoft.com/playwright:v1.53.1-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
         with:

.github/workflows/vrt-reports.yml

@@ -37,7 +37,7 @@ jobs:
           echo "pid=$pid" >> $GITHUB_OUTPUT
           sleep 5
       - name: Run VRT
-        uses: docker://mcr.microsoft.com/playwright:v1.52.0-jammy
+        uses: docker://mcr.microsoft.com/playwright:v1.53.1-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
         with:

.github/workflows/vrt.yml

@@ -52,7 +52,7 @@ jobs:
           echo "pid=$pid" >> $GITHUB_OUTPUT
           sleep 5
       - name: Run VRT
-        uses: docker://mcr.microsoft.com/playwright:v1.52.0-jammy
+        uses: docker://mcr.microsoft.com/playwright:v1.53.1-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
         with:

e2e/components/Autocomplete.test.ts

@@ -2,7 +2,7 @@ import {test, expect, type Page} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-const stories: Array<{title: string; id: string; setup: (page: Page) => void}> = [
+const stories: Array<{title: string; id: string; setup: (page: Page) => Promise<void>}> = [
   {
     title: 'Default',
     id: 'components-autocomplete--default',
@@ -58,6 +58,7 @@ const stories: Array<{title: string; id: string; setup: (page: Page) => void}> =
       await page.keyboard.press('Tab')
       await page.keyboard.press('Enter')
       await expect(page.getByRole('dialog')).toBeVisible()
+      await page.getByText('Default label').waitFor()
       await page.keyboard.press('Tab')
       await page.keyboard.press('D')
     },
@@ -118,7 +119,7 @@ test.describe('Autocomplete', () => {
               },
             })
 
-            story.setup(page)
+            await story.setup(page)
 
             await expect(page).toHaveScreenshot(`Autocomplete.${story.title}.${theme}.png`, {animations: 'disabled'})
           })
@@ -131,7 +132,7 @@ test.describe('Autocomplete', () => {
               },
             })
 
-            story.setup(page)
+            await story.setup(page)
 
             await expect(page).toHaveNoViolations({
               rules: {

e2e/components/IconButton.test.ts

@@ -1,237 +1,86 @@
-import {test, expect} from '@playwright/test'
+import {test, expect, type Page} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('IconButton', () => {
-  test.describe('Playground', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-iconbutton--playground',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`IconButton.Playground.${theme}.png`)
-        })
-      })
-    }
-  })
-
-  test.describe('Danger', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-iconbutton-features--danger',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`IconButton.Danger.${theme}.png`)
-        })
-      })
-    }
-  })
-
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-iconbutton--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`IconButton.Default.${theme}.png`)
-        })
-      })
-    }
-  })
-
-  test.describe('Disabled', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-iconbutton-features--disabled',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`IconButton.Disabled.${theme}.png`)
-        })
-      })
-    }
-  })
-
-  test.describe('Invisible', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-iconbutton-features--invisible',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`IconButton.Invisible.${theme}.png`)
-        })
-      })
-    }
-  })
-
-  test.describe('Large', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-iconbutton-features--large',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`IconButton.Large.${theme}.png`)
-        })
-      })
-    }
-  })
+const stories = [
+  {
+    title: 'Playground',
+    id: 'components-iconbutton--playground',
+  },
+  {
+    title: 'Danger',
+    id: 'components-iconbutton-features--danger',
+  },
+  {
+    title: 'Default',
+    id: 'components-iconbutton--default',
+  },
+  {
+    title: 'Disabled',
+    id: 'components-iconbutton-features--disabled',
+  },
+  {
+    title: 'Invisible',
+    id: 'components-iconbutton-features--invisible',
+  },
+  {
+    title: 'Large',
+    id: 'components-iconbutton-features--large',
+  },
+  {
+    title: 'Medium',
+    id: 'components-iconbutton-features--medium',
+  },
+  {
+    title: 'Primary',
+    id: 'components-iconbutton-features--primary',
+  },
+  {
+    title: 'Small',
+    id: 'components-iconbutton-features--small',
+  },
+  {
+    title: 'Keybinding Hint',
+    id: 'components-iconbutton-features--keybinding-hint',
+    async setup(page: Page) {
+      await page.keyboard.press('Tab') // focus on icon button
+    },
+  },
+  {
+    title: 'Keybinding Hint on Description',
+    id: 'components-iconbutton-features--keybinding-hint-on-description',
+    async setup(page: Page) {
+      await page.keyboard.press('Tab') // focus on icon button
+    },
+  },
+  {
+    title: 'Flex',
+    id: 'components-iconbutton-dev--icon-button-within-flex-container',
+  },
+] as const
 
-  test.describe('Medium', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-iconbutton-features--medium',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`IconButton.Medium.${theme}.png`)
-        })
-      })
-    }
-  })
-
-  test.describe('Primary', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-iconbutton-features--primary',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`IconButton.Primary.${theme}.png`)
-        })
-      })
-    }
-  })
-
-  test.describe('Small', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-iconbutton-features--small',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`IconButton.Small.${theme}.png`)
-        })
-      })
-    }
-  })
-  test.describe('Keybinding hint', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-iconbutton-features--keybinding-hint',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          await page.keyboard.press('Tab') // focus on icon button
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `IconButton.Keybinding Hint.${theme}.png`,
-          )
-        })
-      })
-    }
-  })
-
-  test.describe('Keybinding hint on Description', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-iconbutton-features--keybinding-hint-on-description',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          await page.keyboard.press('Tab') // focus on icon button
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `IconButton.Keybinding Hint on Description.${theme}.png`,
-          )
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-iconbutton-features--keybinding-hint-on-description',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await page.keyboard.press('Tab') // focus on icon button
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('Flex', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-iconbutton-dev--icon-button-within-flex-container',
-            globals: {
-              colorScheme: theme,
-            },
+test.describe('IconButton', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('@vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            if ('setup' in story) {
+              await story.setup(page)
+            }
+
+            // Default state
+            await expect(page).toHaveScreenshot(`IconButton.${story.title}.${theme}.png`)
           })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`IconButton.Flex.${theme}.png`)
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })