Add fixtures for #3044 (#3504)

* Add fixtures for #3044 * test(vrt): update snapshots * oops my bad! --------- Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>
primer · Jul 10, 2023 · 4a70ce3 · 4a70ce3
1 parent 11cdbdc
commit 4a70ce3
Show file tree

Hide file tree

Showing 20 changed files with 46 additions and 0 deletions.
diff --git a/...t.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-hover-linux.png b/...t.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-hover-linux.png
diff --git a/...ionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-linux.png b/...ionList.test.ts-snapshots/ActionList-All-combinations-dark-colorblind-linux.png
diff --git a/...nList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-hover-linux.png b/...nList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-hover-linux.png
diff --git a/.../ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-linux.png b/.../ActionList.test.ts-snapshots/ActionList-All-combinations-dark-dimmed-linux.png
diff --git a/...est.ts-snapshots/ActionList-All-combinations-dark-high-contrast-hover-linux.png b/...est.ts-snapshots/ActionList-All-combinations-dark-high-contrast-hover-linux.png
diff --git a/...List.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-linux.png b/...List.test.ts-snapshots/ActionList-All-combinations-dark-high-contrast-linux.png
diff --git a/...s/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-hover-linux.png b/...s/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-hover-linux.png
diff --git a/...ponents/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-linux.png b/...ponents/ActionList.test.ts-snapshots/ActionList-All-combinations-dark-linux.png
diff --git a/...t.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-hover-linux.png b/...t.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-hover-linux.png
diff --git a/...ionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-linux.png b/...ionList.test.ts-snapshots/ActionList-All-combinations-dark-tritanopia-linux.png
diff --git a/....test.ts-snapshots/ActionList-All-combinations-light-colorblind-hover-linux.png b/....test.ts-snapshots/ActionList-All-combinations-light-colorblind-hover-linux.png
diff --git a/...onList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-linux.png b/...onList.test.ts-snapshots/ActionList-All-combinations-light-colorblind-linux.png
diff --git a/...st.ts-snapshots/ActionList-All-combinations-light-high-contrast-hover-linux.png b/...st.ts-snapshots/ActionList-All-combinations-light-high-contrast-hover-linux.png
diff --git a/...ist.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-linux.png b/...ist.test.ts-snapshots/ActionList-All-combinations-light-high-contrast-linux.png
diff --git a/.../ActionList.test.ts-snapshots/ActionList-All-combinations-light-hover-linux.png b/.../ActionList.test.ts-snapshots/ActionList-All-combinations-light-hover-linux.png
diff --git a/...onents/ActionList.test.ts-snapshots/ActionList-All-combinations-light-linux.png b/...onents/ActionList.test.ts-snapshots/ActionList-All-combinations-light-linux.png
diff --git a/....test.ts-snapshots/ActionList-All-combinations-light-tritanopia-hover-linux.png b/....test.ts-snapshots/ActionList-All-combinations-light-tritanopia-hover-linux.png
diff --git a/...onList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-linux.png b/...onList.test.ts-snapshots/ActionList-All-combinations-light-tritanopia-linux.png
diff --git a/e2e/components/ActionList.test.ts b/e2e/components/ActionList.test.ts
@@ -478,4 +478,39 @@ test.describe('ActionList', () => {
       })
     }
   })
+
+  test.describe('All combinations', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-examples--all-combinations',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Resize to fit long page
+          await page.setViewportSize({width: 1000, height: 1000})
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ActionList.All combinations.${theme}.png`)
+
+          // Hover state
+          await page.getByRole('listitem', {name: 'Danger inline description'}).hover()
+          expect(await page.screenshot()).toMatchSnapshot(`ActionList.All combinations.${theme}.hover.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-examples--all-combinations',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })
diff --git a/src/ActionList/ActionList.examples.stories.tsx b/src/ActionList/ActionList.examples.stories.tsx
@@ -440,6 +440,17 @@ export function AllCombinations(): JSX.Element {
               <StarIcon />
             </ActionList.TrailingVisual>
           </ActionList.Item>
+          <ActionList.Item variant="danger">
+            <ActionList.LeadingVisual>
+              <StarIcon />
+            </ActionList.LeadingVisual>
+            Danger
+            <ActionList.Description variant="inline">inline description</ActionList.Description>
+            <ActionList.Description variant="block">Block description</ActionList.Description>
+            <ActionList.TrailingVisual>
+              <StarIcon />
+            </ActionList.TrailingVisual>
+          </ActionList.Item>
         </ActionList>
       </Box>
     </>