test: add e2e tests for color mode setter & inverter

jpmorganchase · Apr 11, 2024 · ab0e3a3 · ab0e3a3
1 parent 6466fbc
commit ab0e3a3
Showing 1 changed file with 89 additions and 0 deletions.
diff --git a/packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx b/packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx
@@ -5,11 +5,13 @@ import {
   useDensity,
   useTheme,
   UNSTABLE_SaltProviderNext,
+  ModeValues,
 } from "@salt-ds/core";
 import { mount } from "cypress/react18";
 import { WindowProvider } from "@salt-ds/window";
 import { ReactNode, useCallback, useState } from "react";
 import { createPortal } from "react-dom";
+import { Mode } from "fs";
 
 const TestComponent = ({
   id = "test-1",
@@ -257,6 +259,93 @@ describe("Given a SaltProvider", () => {
 
     cy.get("@consoleSpy").should("not.have.been.called");
   });
+
+  describe("when the mode is set", () => {
+    const ThemeToggle = () => {
+      const { setMode } = useTheme();
+
+      const handleClick = () => {
+        setMode((prevState) =>
+          prevState === ModeValues[0] ? ModeValues[1] : ModeValues[0]
+        );
+      };
+      return <button onClick={handleClick}>Set Mode</button>;
+    };
+
+    it("should update the mode", () => {
+      mount(
+        <SaltProvider>
+          <ThemeToggle />
+          <TestComponent />
+        </SaltProvider>
+      );
+      cy.get("#test-1").should("exist").and("have.attr", "data-mode", "light");
+      cy.findByRole("button").realClick();
+      cy.get("#test-1").should("have.attr", "data-mode", "dark");
+      cy.findByRole("button").realClick();
+      cy.get("#test-1").should("have.attr", "data-mode", "light");
+    });
+  });
+
+  describe("when the mode is controlled by consumers", () => {
+    const ControlledModeSaltProvider = ({
+      children,
+    }: {
+      children: ReactNode;
+    }) => {
+      const [mode, setMode] = useState<Mode>(ModeValues[0]);
+
+      const handleClick = () => {
+        setMode((prevState) =>
+          prevState === ModeValues[0] ? ModeValues[1] : ModeValues[0]
+        );
+      };
+      return (
+        <SaltProvider mode={mode}>
+          <button onClick={handleClick}>Set Mode</button>
+          {children}
+        </SaltProvider>
+      );
+    };
+
+    it("should update the mode", () => {
+      mount(
+        <ControlledModeSaltProvider>
+          <TestComponent />
+        </ControlledModeSaltProvider>
+      );
+      cy.get("#test-1").should("exist").and("have.attr", "data-mode", "light");
+      cy.findByRole("button").realClick();
+      cy.get("#test-1").should("have.attr", "data-mode", "dark");
+      cy.findByRole("button").realClick();
+      cy.get("#test-1").should("have.attr", "data-mode", "light");
+    });
+  });
+
+  describe("when the mode is inverted", () => {
+    const ThemeToggle = () => {
+      const { invertMode } = useTheme();
+
+      const handleClick = () => {
+        invertMode();
+      };
+      return <button onClick={handleClick}>Invert Mode</button>;
+    };
+
+    it("should update the mode", () => {
+      mount(
+        <SaltProvider>
+          <ThemeToggle />
+          <TestComponent />
+        </SaltProvider>
+      );
+      cy.get("#test-1").should("exist").and("have.attr", "data-mode", "light");
+      cy.findByRole("button").realClick();
+      cy.get("#test-1").should("have.attr", "data-mode", "dark");
+      cy.findByRole("button").realClick();
+      cy.get("#test-1").should("have.attr", "data-mode", "light");
+    });
+  });
 });
 
 describe("Given a SaltProviderNext", () => {