From f2e334627a5233b2811bd7c7fd1d75652d0cf1aa Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Tue, 18 Jun 2024 17:16:26 -0700
Subject: [PATCH] test(shell): add token theming tests (#9458)

**Related Issue:**#7180

## Summary
Add token theming tests for `shell`.
---
 .../src/components/shell/shell.e2e.ts         | 67 ++++++++++++++++++-
 1 file changed, 66 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/shell/shell.e2e.ts b/packages/calcite-components/src/components/shell/shell.e2e.ts
index e02c1cd0be4..fe410a169a6 100644
--- a/packages/calcite-components/src/components/shell/shell.e2e.ts
+++ b/packages/calcite-components/src/components/shell/shell.e2e.ts
@@ -1,6 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, hidden, renders, slots } from "../../tests/commonTests";
+import { accessible, hidden, renders, slots, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-shell", () => {
@@ -122,3 +123,67 @@ describe("calcite-shell", () => {
     expect(panelTop).toBeNull();
   });
 });
+
+describe("theme", () => {
+  const shellHTML = html`
+    <calcite-shell>
+      <calcite-tip-manager>
+        <calcite-tip heading="Example tip title">
+          <calcite-link href="http://www.esri.com">An example link</calcite-link>
+        </calcite-tip>
+      </calcite-tip-manager>
+      <calcite-panel heading="Leading panel content"></calcite-panel>
+      <calcite-flow heading="Leading panel content"></calcite-flow>
+      <calcite-shell-center-row slot="${SLOTS.panelBottom}"></calcite-shell-center-row>
+      <calcite-shell-center-row slot="${SLOTS.panelTop}"></calcite-shell-center-row>
+      <calcite-shell-center-row slot="${SLOTS.centerRow}"></calcite-shell-center-row>
+    </calcite-shell>
+  `;
+
+  describe("slotted overrides", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-shell-border-color": [
+        {
+          selector: `calcite-panel`,
+          targetProp: "borderColor",
+        },
+        {
+          selector: `calcite-flow`,
+          targetProp: "borderColor",
+        },
+        {
+          selector: `calcite-shell-center-row[slot="${SLOTS.panelBottom}"]`,
+          targetProp: "borderColor",
+        },
+        {
+          selector: `calcite-shell-center-row[slot="${SLOTS.panelTop}"]`,
+          targetProp: "borderColor",
+        },
+        {
+          selector: `calcite-shell-center-row[slot="${SLOTS.centerRow}"]`,
+          targetProp: "borderColor",
+        },
+      ],
+    };
+    themed(async () => shellHTML, tokens);
+  });
+
+  describe("default", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-shell-background-color": {
+        targetProp: "backgroundColor",
+      },
+    };
+    themed(async () => shellHTML, tokens);
+  });
+
+  describe("deprecated", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-shell-tip-spacing": {
+        selector: `calcite-tip-manager`,
+        targetProp: "insetInline",
+      },
+    };
+    themed(async () => shellHTML, tokens);
+  });
+});