test(react): adding visual regression test for focused, checked toggl…

…e button adding visual regression test for focused, checked toggle button with dark theme
mi6 · Feb 24, 2025 · ff1c2c4 · ff1c2c4
1 parent 5551953
commit ff1c2c4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/...-diff-screenshots/baseline/IcToggleButton.cy.tsx/dark-theme-checked-focused.png b/...-diff-screenshots/baseline/IcToggleButton.cy.tsx/dark-theme-checked-focused.png
diff --git a/packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx b/packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx
@@ -328,10 +328,8 @@ describe("IcToggleButton visual regression and a11y tests", () => {
 
     cy.checkA11yWithWait(undefined, undefined, TOGGLE_BUTTON_AXE_OPTIONS);
     cy.compareSnapshot({
-      name: "light-theme-monochrome",
-      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.049),
       name: "/light-theme-monochrome",
-      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.037),
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.049),
     });
   });
 
@@ -341,10 +339,28 @@ describe("IcToggleButton visual regression and a11y tests", () => {
 
     cy.checkA11yWithWait(undefined, undefined, TOGGLE_BUTTON_AXE_OPTIONS);
     cy.compareSnapshot({
-      name: "dark-theme-monochrome",
-      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.049),
       name: "/dark-theme-monochrome",
-      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.033),
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.049),
+    });
+  });
+
+  it("should render checked and focused toggle button with dark theme", () => {
+    mount(
+      <div style={{ padding: "10px" }}>
+        <IcToggleButton label="Test" theme="dark" checked />
+      </div>
+    );
+    cy.checkHydrated(IC_TOGGLE_BUTTON_SELECTOR);
+
+    cy.findShadowEl(IC_TOGGLE_BUTTON_SELECTOR, "ic-button")
+      .shadow()
+      .find("button")
+      .focus();
+
+    cy.checkA11yWithWait(undefined, undefined, TOGGLE_BUTTON_AXE_OPTIONS);
+    cy.compareSnapshot({
+      name: "/dark-theme-checked-focused",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.007),
     });
   });
 });