test(progress): add component token E2E tests (#9605)

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

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/packages/calcite-components/src/components/progress/progress.e2e.ts b/packages/calcite-components/src/components/progress/progress.e2e.ts
@@ -1,4 +1,6 @@
-import { accessible, hidden, renders } from "../../tests/commonTests";
+import { accessible, hidden, renders, themed } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { CSS } from "./resources";
 
 describe("calcite-progress", () => {
   describe("renders", () => {
@@ -16,4 +18,28 @@ describe("calcite-progress", () => {
   describe("accessible with value", () => {
     accessible(`<calcite-progress value="50" type="indeterminate" text="percentage"></calcite-progress>`);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-progress", {
+        "--calcite-progress-background-color": {
+          shadowSelector: `.${CSS.track}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-progress-fill-color": {
+          shadowSelector: `.${CSS.bar}`,
+          targetProp: "backgroundColor",
+        },
+      });
+    });
+
+    describe("indeterminate", () => {
+      themed(html`<calcite-progress value="50" type="indeterminate" text="percentage"></calcite-progress>`, {
+        "--calcite-progress-text-color": {
+          shadowSelector: `.${CSS.text}`,
+          targetProp: "color",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/progress/progress.tsx b/packages/calcite-components/src/components/progress/progress.tsx
@@ -1,6 +1,8 @@
 import { Component, Element, h, Prop, VNode } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
+import { CSS } from "./resources";
+
 @Component({
   tag: "calcite-progress",
   styleUrl: "progress.scss",
@@ -41,13 +43,13 @@ export class Progress {
         aria-valuenow={this.value}
         role="progressbar"
       >
-        <div class="track">
+        <div class={CSS.track}>
           <div
             class={{
-              bar: true,
-              indeterminate: this.type === "indeterminate",
+              [CSS.bar]: true,
+              [CSS.indeterminate]: this.type === "indeterminate",
               [CSS_UTILITY.rtl]: dir === "rtl",
-              reversed: this.reversed,
+              [CSS.reversed]: this.reversed,
             }}
             style={barStyles}
           />

diff --git a/packages/calcite-components/src/components/progress/resources.ts b/packages/calcite-components/src/components/progress/resources.ts
@@ -0,0 +1,6 @@
+export const CSS = {
+  track: "track",
+  bar: "bar",
+  text: "text",
+  reversed: "reversed",
+};