test(switch): add component token E2E tests (#9596)

**Related Issue:** #7180 ## Summary ✨🧪✨
Esri · Jun 18, 2024 · d6161bd · d6161bd
1 parent dd3cc7d
commit d6161bd
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 11 deletions.
diff --git a/packages/calcite-components/src/components/switch/switch.e2e.ts b/packages/calcite-components/src/components/switch/switch.e2e.ts
@@ -1,6 +1,14 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, formAssociated, hidden, HYDRATED_ATTR, labelable } from "../../tests/commonTests";
-import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import {
+  accessible,
+  disabled,
+  formAssociated,
+  hidden,
+  HYDRATED_ATTR,
+  labelable,
+  themed,
+} from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 
 describe("calcite-switch", () => {
@@ -135,7 +143,7 @@ describe("calcite-switch", () => {
   });
 
   describe("theme", () => {
-    const tokens: ComponentTestTokens = {
+    themed(`calcite-switch`, {
       "--calcite-switch-corner-radius": [
         {
           shadowSelector: `.${CSS.handle}`,
@@ -152,6 +160,22 @@ describe("calcite-switch", () => {
           targetProp: "backgroundColor",
         },
       ],
+      "--calcite-switch-handle-border-color": [
+        {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "borderColor",
+        },
+        {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "borderColor",
+          state: "hover",
+        },
+        {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "boxShadow",
+          state: "hover",
+        },
+      ],
       "--calcite-switch-track-background-color": {
         shadowSelector: `.${CSS.track}`,
         targetProp: "backgroundColor",
@@ -166,7 +190,39 @@ describe("calcite-switch", () => {
           targetProp: "borderColor",
         },
       ],
-    };
-    themed(`calcite-switch`, tokens);
+    });
+
+    describe("checked", () => {
+      themed(html`<calcite-switch checked></calcite-switch>`, {
+        "--calcite-switch-border-color": [
+          {
+            shadowSelector: `.${CSS.track}`,
+            targetProp: "borderColor",
+          },
+        ],
+        "--calcite-switch-handle-border-color": [
+          {
+            shadowSelector: `.${CSS.handle}`,
+            targetProp: "borderColor",
+          },
+          {
+            shadowSelector: `.${CSS.handle}`,
+            targetProp: "borderColor",
+            state: "hover",
+          },
+          {
+            shadowSelector: `.${CSS.handle}`,
+            targetProp: "boxShadow",
+            state: "hover",
+          },
+        ],
+        "--calcite-switch-track-background-color": [
+          {
+            shadowSelector: `.${CSS.track}`,
+            targetProp: "backgroundColor",
+          },
+        ],
+      });
+    });
   });
 });
diff --git a/packages/calcite-components/src/components/switch/switch.scss b/packages/calcite-components/src/components/switch/switch.scss
@@ -5,6 +5,7 @@
  *
  * @prop --calcite-switch-corner-radius: Specifies the corner radius of the component.
  * @prop --calcite-switch-handle-background-color: Specifies the background color of the component handle.
+ * @prop --calcite-switch-handle-border-color: Specifies the background color of the component handle.
  * @prop --calcite-switch-track-background-color: Specifies the background color of the component track.
  * @prop --calcite-switch-border-color: Specifies the border color of the component.
  */
@@ -95,14 +96,14 @@
   inset-block-start: -1px;
   inset-inline: -1px theme("inset.auto");
   background-color: var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));
-  border-color: var(--calcite-switch-border-color, var(--calcite-color-border-input));
+  border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-border-input));
 }
 
 .container:hover,
 :host(:focus) {
   .handle {
-    box-shadow: inset 0 0 0 1px var(--calcite-switch-handle-shadow-color, var(--calcite-color-brand));
-    border-color: var(--calcite-switch-border-color, var(--calcite-color-brand));
+    box-shadow: inset 0 0 0 1px var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
+    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
   }
 }
 
@@ -113,13 +114,13 @@
   }
   .handle {
     inset-inline: theme("inset.auto") -1px;
-    border-color: var(--calcite-switch-border-color, var(--calcite-color-brand));
+    border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand));
   }
 
   .container:hover {
     .handle {
-      box-shadow: inset 0 0 0 1px var(--calcite-switch-handle-shadow-color, var(--calcite-color-brand-hover));
-      border-color: var(--calcite-switch-border-color, var(--calcite-color-brand-hover));
+      box-shadow: inset 0 0 0 1px var(--calcite-switch-handle-border-color, var(--calcite-color-brand-hover));
+      border-color: var(--calcite-switch-handle-border-color, var(--calcite-color-brand-hover));
     }
   }
 }