test(loader): add component token E2E tests (#9726)

**Related Issue:** #7190 ## Summary ✨🧪✨
Esri · Jul 20, 2024 · 2c5e985 · 2c5e985
1 parent a2b082b
commit 2c5e985
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 9 deletions.
diff --git a/packages/calcite-components/src/components/input/common/_mixins.scss b/packages/calcite-components/src/components/input/common/_mixins.scss
@@ -276,7 +276,7 @@
     }
 
     .number-button-item {
-      padding-block: 0px;
+      padding-block: 0;
       padding-inline: 0.5rem /* 8px */;
     }
   }

diff --git a/packages/calcite-components/src/components/loader/loader.e2e.ts b/packages/calcite-components/src/components/loader/loader.e2e.ts
@@ -1,5 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { hidden, renders } from "../../tests/commonTests";
+import { hidden, renders, themed } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 
 describe("calcite-loader", () => {
   describe("renders", () => {
@@ -55,4 +56,114 @@ describe("calcite-loader", () => {
     expect(loader).toHaveAttribute("id");
     expect(loader.getAttribute("id").length).toEqual(36);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-loader", {
+        "--calcite-loader-color": {
+          targetProp: "stroke",
+        },
+        "--calcite-loader-size": [
+          {
+            targetProp: "minBlockSize",
+          },
+          {
+            shadowSelector: ".loader__svgs",
+            targetProp: "blockSize",
+          },
+          {
+            shadowSelector: ".loader__svgs",
+            targetProp: "inlineSize",
+          },
+          {
+            shadowSelector: ".loader__svg",
+            targetProp: "blockSize",
+          },
+          {
+            shadowSelector: ".loader__svg",
+            targetProp: "inlineSize",
+          },
+        ],
+      });
+    });
+
+    describe("determinate", () => {
+      themed(html` <calcite-loader text="loading..." type="determinate" value="100"></calcite-loader>`, {
+        "--calcite-loader-color": {
+          shadowSelector: ".loader__percentage",
+          targetProp: "color",
+        },
+        "--calcite-loader-size": [
+          {
+            shadowSelector: ".loader__percentage",
+            targetProp: "inlineSize",
+          },
+        ],
+        "--calcite-loader-text-color": [
+          {
+            shadowSelector: ".loader__percentage",
+            targetProp: "color",
+          },
+          {
+            shadowSelector: ".loader__text",
+            targetProp: "color",
+          },
+        ],
+        "--calcite-loader-track-color": {
+          targetProp: "stroke",
+        },
+      });
+    });
+
+    describe("inline", () => {
+      themed(html`<calcite-loader inline></calcite-loader>`, {
+        "--calcite-loader-size": [
+          {
+            targetProp: "blockSize",
+          },
+          {
+            targetProp: "inlineSize",
+          },
+        ],
+      });
+    });
+
+    describe("deprecated", () => {
+      describe("default", () => {
+        themed(`calcite-loader`, {
+          "--calcite-loader-font-size": {
+            targetProp: "fontSize",
+          },
+          "--calcite-loader-padding": {
+            targetProp: "paddingBlock",
+          },
+        });
+
+        describe("inline", () => {
+          themed(html`<calcite-loader inline></calcite-loader>`, {
+            "--calcite-loader-size-inline": [
+              {
+                targetProp: "blockSize",
+              },
+              {
+                targetProp: "minBlockSize",
+              },
+              {
+                targetProp: "inlineSize",
+              },
+            ],
+          });
+        });
+
+        describe("determinate", () => {
+          themed(html`<calcite-loader type="determinate" value="10"></calcite-loader>`, {
+            "--calcite-loader-font-size": {
+              shadowSelector: ".loader__percentage",
+              targetProp: "fontSize",
+            },
+          });
+        });
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/loader/loader.scss b/packages/calcite-components/src/components/loader/loader.scss
@@ -4,13 +4,13 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-loader-color:  defines the color of the component.
- * @prop --calcite-loader-font-size: Specifies the font size of the loading percentage when type is `"determinate"`.
+ * @prop --calcite-loader-font-size: [Deprecated] Specifies the font size of the loading percentage when type is `"determinate"`.
  * @prop --calcite-loader-padding: [Deprecated] Use --calcite-loader-space instead. Specifies the padding of the loader.
  * @prop --calcite-loader-space: Specifies the padding of the loader.
  * @prop --calcite-loader-size-inline: [Deprecated] Use --calcite-loader-size. The width and height of an inline loader.
- * @prop --calcite-loader-size: The width and height of a loader.
+ * @prop --calcite-loader-size: [Deprecated] The width and height of a loader.
  * @prop --calcite-loader-text-color: defines the text color of a loader.
- * @prop --calcite-loader-track-color-determinate: defines the track color of a "determinate" loader
+ * @prop --calcite-loader-track-color: defines the track color of a "determinate" loader
  *
  */
 @import "../../assets/styles/animation";
@@ -41,17 +41,17 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
 
 :host([scale="s"]) {
   --calcite-internal-loader-font-size: theme("fontSize.n2");
-  --calcite-internal-loader-size: theme("spacing.8");
+  --calcite-internal-loader-size-fallback: theme("spacing.8");
 }
 
 :host([scale="m"]) {
   --calcite-internal-loader-font-size: theme("fontSize.0");
-  --calcite-internal-loader-size: theme("spacing.16");
+  --calcite-internal-loader-size-fallback: theme("spacing.16");
 }
 
 :host([scale="l"]) {
   --calcite-internal-loader-font-size: theme("fontSize.2");
-  --calcite-internal-loader-size: theme("spacing.24");
+  --calcite-internal-loader-size-fallback: theme("spacing.24");
 }
 
 :host([no-padding]) {
@@ -114,7 +114,7 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;
 
 :host([type="determinate"]) {
   @apply animate-none;
-  stroke: var(--calcite-loader-track-color-determinate, var(--calcite-color-border-3));
+  stroke: var(--calcite-loader-track-color, var(--calcite-color-border-3));
 
   .loader__svgs {
     @apply animate-none;