test(meter): Add token theming tests (#9357)

**Related Issue:** #7180 ## Summary Add token theming tests for Meter
Esri · May 17, 2024 · 8788983 · 8788983
1 parent 7ef714f
commit 8788983
Showing 1 changed file with 58 additions and 1 deletion.
diff --git a/packages/calcite-components/src/components/meter/meter.e2e.ts b/packages/calcite-components/src/components/meter/meter.e2e.ts
@@ -1,6 +1,8 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
-import { accessible, renders, hidden, defaults, reflects } from "../../tests/commonTests";
+import { accessible, renders, hidden, defaults, reflects, themed } from "../../tests/commonTests";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-meter", () => {
   describe("renders", () => {
@@ -97,6 +99,61 @@ describe("calcite-meter", () => {
     accessible(`<calcite-meter label="A great meter"></calcite-meter>`);
   });
 
+  describe("theme", () => {
+    const meterHtml = html`<calcite-meter
+      group-separator
+      unit-label="GB"
+      value-label
+      range-labels
+      min="0"
+      max="12400"
+      low="4600"
+      high="7600"
+      value="-2200"
+      value-label-type="units"
+    ></calcite-meter>`;
+
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-meter-background-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-meter-border-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-meter-corner-radius": [
+          {
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "borderRadius",
+          },
+          {
+            shadowSelector: `.${CSS.fill}`,
+            targetProp: "borderRadius",
+          },
+        ],
+        "--calcite-meter-shadow": {
+          targetProp: "boxShadow",
+          shadowSelector: `.${CSS.container}`,
+        },
+        "--calcite-meter-fill-color": {
+          shadowSelector: `.${CSS.fill}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-meter-range-text-color": {
+          shadowSelector: `.${CSS.labelRange}`,
+          targetProp: "color",
+        },
+        "--calcite-meter-value-text-color": {
+          shadowSelector: `.${CSS.labelValue}`,
+          targetProp: "color",
+        },
+      };
+      themed(meterHtml, tokens);
+    });
+  });
+
   describe("correctly sets range and value properties", () => {
     it("correctly sets range and value properties if not present", async () => {
       const page = await newE2EPage({