test(e2e): update e2e tests for link (#4825)

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

e2e/components/Link.test.ts

@@ -2,190 +2,125 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-link--default',
+  },
+  {
+    title: 'Inline',
+    id: 'components-link-features--inline',
+  },
+  {
+    title: 'Muted',
+    id: 'components-link-features--muted',
+  },
+  {
+    title: 'Underline',
+    id: 'components-link-features--underline',
+  },
+] as const
+
 test.describe('Link', () => {
-  for (const featureFlagEnabled of [true, false]) {
-    test.describe('Default', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
       for (const theme of themes) {
         test.describe(theme, () => {
-          test(`default @vrt ${featureFlagEnabled ? '(css modules)' : '(styled-components)'}`, async ({page}) => {
+          test('default @vrt', async ({page}) => {
             await visit(page, {
-              id: 'components-link--default',
+              id: story.id,
               globals: {
                 colorScheme: theme,
                 featureFlags: {
-                  primer_react_css_modules: featureFlagEnabled,
+                  primer_react_css_modules: true,
                 },
               },
             })
 
             // Default state
-            expect(await page.screenshot()).toMatchSnapshot(`Link.Default.${theme}.png`)
+            expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.png`)
 
             // Hover state
             await page.getByRole('link').hover()
-            expect(await page.screenshot()).toMatchSnapshot(`Link.Default.${theme}.hover.png`)
+            expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.hover.png`)
 
             // Focus state
             await page.keyboard.press('Tab')
-            expect(await page.screenshot()).toMatchSnapshot(`Link.Default.${theme}.focus.png`)
+            expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.focus.png`)
           })
 
-          test(`axe @aat ${featureFlagEnabled ? '(css modules)' : '(styled-components)'}`, async ({page}) => {
+          test('axe @aat', async ({page}) => {
             await visit(page, {
-              id: 'components-link--default',
+              id: story.id,
               globals: {
                 colorScheme: theme,
                 featureFlags: {
-                  primer_react_css_modules: featureFlagEnabled,
-                },
-              },
-            })
-            await expect(page).toHaveNoViolations({
-              rules: {
-                'color-contrast': {
-                  enabled: theme !== 'dark_dimmed',
+                  primer_react_css_modules: true,
                 },
               },
             })
+            await expect(page).toHaveNoViolations()
           })
-        })
-      }
-    })
 
-    test.describe('Muted', () => {
-      for (const theme of themes) {
-        test.describe(theme, () => {
-          test(`default @vrt ${featureFlagEnabled ? '(css modules)' : '(styled-components)'}`, async ({page}) => {
+          test('default (styled-component) @vrt', async ({page}) => {
             await visit(page, {
-              id: 'components-link-features--muted',
+              id: story.id,
               globals: {
                 colorScheme: theme,
-                featureFlags: {
-                  primer_react_css_modules: featureFlagEnabled,
-                },
               },
             })
 
             // Default state
-            expect(await page.screenshot()).toMatchSnapshot(`Link.Muted.${theme}.png`)
+            expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.png`)
 
             // Hover state
             await page.getByRole('link').hover()
-            expect(await page.screenshot()).toMatchSnapshot(`Link.Muted.${theme}.hover.png`)
+            expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.hover.png`)
 
             // Focus state
             await page.keyboard.press('Tab')
-            expect(await page.screenshot()).toMatchSnapshot(`Link.Muted.${theme}.focus.png`)
+            expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.focus.png`)
           })
 
-          test(`axe @aat ${featureFlagEnabled ? '(css modules)' : '(styled-components)'}`, async ({page}) => {
+          test('axe (styled-component) @aat', async ({page}) => {
             await visit(page, {
-              id: 'components-link-features--muted',
+              id: story.id,
               globals: {
                 colorScheme: theme,
-                featureFlags: {
-                  primer_react_css_modules: featureFlagEnabled,
-                },
-              },
-            })
-            await expect(page).toHaveNoViolations({
-              rules: {
-                'color-contrast': {
-                  enabled: theme !== 'dark_dimmed',
-                },
               },
             })
+            await expect(page).toHaveNoViolations()
           })
         })
       }
     })
+  }
 
-    test.describe('Underline', () => {
-      for (const theme of themes) {
-        test.describe(theme, () => {
-          test(`default @vrt ${featureFlagEnabled ? '(css modules)' : '(styled-components)'}`, async ({page}) => {
-            await visit(page, {
-              id: 'components-link-features--underline',
-              globals: {
-                colorScheme: theme,
-                featureFlags: {
-                  primer_react_css_modules: featureFlagEnabled,
-                },
-              },
-            })
-
-            // Default state
-            expect(await page.screenshot()).toMatchSnapshot(`Link.Underline.${theme}.png`)
-
-            // Hover state
-            await page.getByRole('link').hover()
-            expect(await page.screenshot()).toMatchSnapshot(`Link.Underline.${theme}.hover.png`)
-
-            // Focus state
-            await page.keyboard.press('Tab')
-            expect(await page.screenshot()).toMatchSnapshot(`Link.Underline.${theme}.focus.png`)
+  test.describe('Dev: Inline', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-link-devonly--inline',
+            globals: {
+              colorScheme: theme,
+            },
           })
 
-          test(`axe @aat ${featureFlagEnabled ? '(css modules)' : '(styled-components)'}`, async ({page}) => {
-            await visit(page, {
-              id: 'components-link-features--underline',
-              globals: {
-                colorScheme: theme,
-                featureFlags: {
-                  primer_react_css_modules: featureFlagEnabled,
-                },
-              },
-            })
-            await expect(page).toHaveNoViolations({
-              rules: {
-                'color-contrast': {
-                  enabled: theme !== 'dark_dimmed',
-                },
-              },
-            })
-          })
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Link.Dev Inline.${theme}.png`)
         })
-      }
-    })
-
-    test.describe('Dev: Inline', () => {
-      for (const theme of themes) {
-        test.describe(theme, () => {
-          test(`default @vrt ${featureFlagEnabled ? '(css modules)' : '(styled-components)'}`, async ({page}) => {
-            await visit(page, {
-              id: 'components-link-devonly--inline',
-              globals: {
-                colorScheme: theme,
-                featureFlags: {
-                  primer_react_css_modules: featureFlagEnabled,
-                },
-              },
-            })
-
-            // Default state
-            expect(await page.screenshot()).toMatchSnapshot(`Link.Inline.${theme}.png`)
-          })
 
-          test(`axe @aat ${featureFlagEnabled ? '(css modules)' : '(styled-components)'}`, async ({page}) => {
-            await visit(page, {
-              id: 'components-link-devonly--inline',
-              globals: {
-                colorScheme: theme,
-                featureFlags: {
-                  primer_react_css_modules: featureFlagEnabled,
-                },
-              },
-            })
-            await expect(page).toHaveNoViolations({
-              rules: {
-                'color-contrast': {
-                  enabled: theme !== 'dark_dimmed',
-                },
-              },
-            })
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-link-devonly--inline',
+            globals: {
+              colorScheme: theme,
+            },
           })
+          await expect(page).toHaveNoViolations()
         })
-      }
-    })
-  }
+      })
+    }
+  })
 })