test(tooltip): add token theming tests (#9463)

**Related Issue:** #7180 ## Summary Add token theming tests for `tooltip` component.
Esri · May 30, 2024 · fe571d7 · fe571d7
1 parent f6e6f07
commit fe571d7
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts b/packages/calcite-components/src/components/tooltip/tooltip.e2e.ts
@@ -3,6 +3,9 @@ import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS } from "../tooltip/resour
 import { accessible, defaults, floatingUIOwner, hidden, openClose, renders } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { getElementXY, GlobalTestProps } from "../../tests/utils";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import { FloatingCSS } from "../../utils/floating-ui";
+import { CSS } from "./resources";
 
 interface PointerMoveOptions {
   delay: number;
@@ -1078,4 +1081,45 @@ describe("calcite-tooltip", () => {
     expect(await tooltip1.getProperty("open")).toBe(false);
     expect(await tooltip2.getProperty("open")).toBe(true);
   });
+
+  describe("theme", () => {
+    const tooltipHTML = html`
+      <calcite-tooltip placement="auto" reference-element="tooltip-auto-ref" open>
+        <p>placement: auto</p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </calcite-tooltip>
+      <calcite-button appearance="outline" id="tooltip-auto-ref">auto</calcite-button>
+    `;
+
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-tooltip-background-color": {
+          shadowSelector: `.${FloatingCSS.animation}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-tooltip-border-color": {
+          shadowSelector: `.${FloatingCSS.animation}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-tooltip-corner-radius": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderRadius",
+        },
+        "--calcite-tooltip-shadow": {
+          shadowSelector: `.${FloatingCSS.animation}`,
+          targetProp: "boxShadow",
+        },
+        "--calcite-tooltip-text-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "color",
+        },
+        "--calcite-tooltip-z-index": {
+          selector: "calcite-tooltip",
+          targetProp: "zIndex",
+        },
+      };
+      themed(tooltipHTML, tokens);
+    });
+  });
 });