diff --git a/packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx b/packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx
index eb97fd5109c..28a27442a57 100644
--- 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 {
useAriaAnnouncer,
useDensity,
useTheme,
+ ModeValues,
} from "@salt-ds/core";
import { WindowProvider } from "@salt-ds/window";
import { mount } from "cypress/react18";
import { type ReactNode, useCallback, useState } from "react";
import { createPortal } from "react-dom";
+import { Mode } from "fs";
const TestComponent = ({
id = "test-1",
@@ -316,6 +318,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 ;
+ };
+
+ it("should update the mode", () => {
+ mount(
+
+
+
+
+ );
+ 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(ModeValues[0]);
+
+ const handleClick = () => {
+ setMode((prevState) =>
+ prevState === ModeValues[0] ? ModeValues[1] : ModeValues[0]
+ );
+ };
+ return (
+
+
+ {children}
+
+ );
+ };
+
+ it("should update the mode", () => {
+ mount(
+
+
+
+ );
+ 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 ;
+ };
+
+ it("should update the mode", () => {
+ mount(
+
+
+
+
+ );
+ 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", () => {