Add missing stories, simplify Autocomplete stories

e2e/components/TextInputWithTokens.test.ts

@@ -2,88 +2,71 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('TextInputWithTokens', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinputwithtokens--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`TextInputWithTokens.Default.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinputwithtokens--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('With Leading Visual', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinputwithtokens-features--with-leading-visual',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`TextInputWithTokens.With Leading Visual.${theme}.png`)
-        })
+const stories = [
+  {
+    id: 'components-textinputwithtokens--default',
+    title: 'Default',
+  },
+  {
+    id: 'components-textinputwithtokens-features--with-leading-visual',
+    title: 'With Leading Visual',
+  },
+  {
+    id: 'components-textinputwithtokens-features--with-trailing-visual',
+    title: 'With Trailing Visual',
+  },
+  {
+    id: 'components-textinputwithtokens-features--max-height',
+    title: 'Max Height',
+  },
+  {
+    id: 'components-textinputwithtokens-features--prevent-tokens-from-wrapping',
+    title: 'Prevent Tokens From Wrapping',
+  },
+  {
+    id: 'components-textinputwithtokens-features--size',
+    title: 'Size',
+  },
+  {
+    id: 'components-textinputwithtokens-features--truncated',
+    title: 'Truncated',
+  },
+] as const
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinputwithtokens-features--with-leading-visual',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
+test.describe('TextInputWithTokens', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
 
-  test.describe('With Trailing Visual', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinputwithtokens-features--with-trailing-visual',
-            globals: {
-              colorScheme: theme,
-            },
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`TextInputWithTokens.${story.title}.${theme}.png`)
           })
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`TextInputWithTokens.With Trailing Visual.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinputwithtokens-features--with-trailing-visual',
-            globals: {
-              colorScheme: theme,
-            },
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations({
+              rules: {
+                'color-contrast': {
+                  enabled: theme !== 'dark_dimmed',
+                },
+              },
+            })
           })
-          await expect(page).toHaveNoViolations()
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })