test(react): add icon button loading Cypress tests

Add icon button loading Cypress tests to capture any issues
mi6 · Dec 10, 2024 · 2acad46 · 2acad46
1 parent 3f21c08
commit 2acad46
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/...-image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-button-group.png b/...-image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-button-group.png
diff --git a/...image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-high-contrast.png b/...image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-high-contrast.png
diff --git a/packages/react/src/component-tests/IcButton/IcButtonTestData.tsx b/packages/react/src/component-tests/IcButton/IcButtonTestData.tsx
@@ -33,6 +33,14 @@ export const iconProps = {
     disabled: false,
     monochrome: false,
   },
+  iconLoading: {
+    title: "Default",
+    size: "medium",
+    theme: "light",
+    loading: true,
+    disabled: false,
+    monochrome: false,
+  },
   iconDisabled: {
     title: "Disabled",
     size: "medium",
@@ -49,6 +57,14 @@ export const iconProps = {
     disabled: false,
     monochrome: true,
   },
+  iconDarkLoading: {
+    title: "Dark",
+    size: "medium",
+    theme: "dark",
+    loading: true,
+    disabled: false,
+    monochrome: true,
+  },
   iconLight: {
     title: "Light",
     size: "medium",
@@ -57,6 +73,14 @@ export const iconProps = {
     disabled: false,
     monochrome: true,
   },
+  iconLightLoading: {
+    title: "Light",
+    size: "medium",
+    theme: "light",
+    loading: true,
+    disabled: false,
+    monochrome: true,
+  },
 };
 
 export const SlottedIcon = () => {
@@ -787,9 +811,12 @@ export const IconButtonGroup = (): ReactElement => {
       <IconBtnGroup props={iconProps.iconDefault} />
       <IconBtnGroup props={iconProps.iconLarge} />
       <IconBtnGroup props={iconProps.iconSmall} />
+      <IconBtnGroup props={iconProps.iconLoading} />
       <IconBtnGroup props={iconProps.iconDisabled} />
       <IconBtnGroup props={iconProps.iconDark} />
+      <IconBtnGroup props={iconProps.iconDarkLoading} />
       <IconBtnGroup props={iconProps.iconLight} />
+      <IconBtnGroup props={iconProps.iconLightLoading} />
     </>
   );
 };