test(stepper): add token theming tests (#9484)

**Related Issue:** #7180 ## Summary Add token theming tests for `stepper`.
Esri · Jun 2, 2024 · df6bf86 · df6bf86
1 parent f42fdf7
commit df6bf86
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 1 deletion.
diff --git a/packages/calcite-components/src/components/stepper/resources.ts b/packages/calcite-components/src/components/stepper/resources.ts
@@ -3,6 +3,11 @@ export const CSS = {
   actionIconStart: "action-icon--start",
   actionIconEnd: "action-icon--end",
   actionContainer: "action-container",
+  rect: "rect",
+  stepBar: "step-bar",
+  stepBarComplete: "step-bar--complete",
+  stepBarError: "step-bar--error",
+  stepBarSelected: "step-bar--selected",
   stepBarContainer: "step-bar-container",
   singleView: "single-view",
 };
diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -1,8 +1,10 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { defaults, hidden, reflects, renders, t9n } from "../../tests/commonTests";
+import { defaults, hidden, reflects, renders, t9n, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { NumberStringFormatOptions } from "../../utils/locale";
 import { isElementFocused } from "../../tests/utils";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 // we use browser-context function to click on items to workaround `E2EElement#click` error
 async function itemClicker(item: HTMLCalciteStepperItemElement) {
@@ -899,4 +901,74 @@ describe("calcite-stepper", () => {
       expect(displayedItems.length).toBe(1);
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-stepper-action-background-color": {
+          shadowSelector: `calcite-action`,
+          targetProp: "--calcite-action-background-color",
+        },
+        "--calcite-stepper-action-background-color-hover": {
+          shadowSelector: `calcite-action`,
+          targetProp: "--calcite-action-background-color",
+          state: { hover: { attribute: "class", value: CSS.actionIcon } },
+        },
+        "--calcite-stepper-action-background-color-active": {
+          shadowSelector: `calcite-action`,
+          targetProp: "--calcite-action-background-color",
+          state: { press: { attribute: "class", value: CSS.actionIcon } },
+        },
+        "--calcite-stepper-step-bar-fill-color": {
+          shadowSelector: `.${CSS.stepBar} ${CSS.rect}`,
+          targetProp: "fill",
+        },
+        "--calcite-stepper-step-bar-fill-color-hover": {
+          shadowSelector: `.${CSS.stepBar} ${CSS.rect}`,
+          targetProp: "fill",
+          state: "hover",
+        },
+        "--calcite-stepper-step-bar-selected-fill-color": {
+          shadowSelector: `.${CSS.stepBarSelected}`,
+          targetProp: "fill",
+        },
+        "--calcite-stepper-step-bar-complete-fill-color": {
+          shadowSelector: `.${CSS.stepBarComplete}`,
+          targetProp: "fill",
+        },
+        "--calcite-stepper-step-bar-completed-fill-color-hover": {
+          shadowSelector: `.${CSS.stepBarComplete}`,
+          targetProp: "fill",
+          state: "hover",
+        },
+        "--calcite-stepper-step-bar-error-fill-color": {
+          shadowSelector: `.${CSS.stepBarError}`,
+          targetProp: "fill",
+        },
+        "--calcite-stepper-step-bar-error-fill-color-hover": {
+          shadowSelector: `.${CSS.stepBarError}`,
+          targetProp: "fill",
+        },
+      };
+      themed(
+        html`
+          <calcite-stepper layout="horizontal-single" numbered icon scale="s">
+            <calcite-stepper-item heading="Confirm and complete">
+              <div>Step 4 Content Goes Here</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Choose method" selected>
+              <div>Step 1 Content Goes Here</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" complete>
+              <div>Step 2 Content Goes Here</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" error>
+              <div>Step 3 Content Goes Here</div>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        `,
+        tokens,
+      );
+    });
+  });
 });