From 4677c4d585ebb7c1565b2a19292c5af199171acc Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Thu, 30 May 2024 12:24:24 -0700
Subject: [PATCH] test(menu-item): add token theming tests (#9420)

**Related Issue:** #7180

## Summary
Add token theming tests for `menu-item`.
---
 .../src/components/menu-item/menu-item.e2e.ts | 90 ++++++++++++++++++-
 1 file changed, 89 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/menu-item/menu-item.e2e.ts b/packages/calcite-components/src/components/menu-item/menu-item.e2e.ts
index 057d12bf700..9e40383d266 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.e2e.ts
+++ b/packages/calcite-components/src/components/menu-item/menu-item.e2e.ts
@@ -1,7 +1,9 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
-import { accessible, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests";
+import { accessible, focusable, hidden, reflects, renders, t9n, themed } from "../../tests/commonTests";
 import { getFocusedElementProp } from "../../tests/utils";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-menu-item", () => {
   describe("renders", () => {
@@ -116,3 +118,89 @@ describe("calcite-menu-item", () => {
     expect(eventSpy).toHaveReceivedEventTimes(2);
   });
 });
+
+describe("theme", () => {
+  const menuItemHtml = html`
+    <calcite-menu layout="vertical">
+      <calcite-menu-item text="Example submenu item 2" text-enabled href="https://esri.com">
+        <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
+      </calcite-menu-item>
+    </calcite-menu>
+  `;
+  const dropdownMenuItems = html`
+    <calcite-menu layout="horizontal">
+      <calcite-menu-item text="Example item" text-enabled icon-start="layer" icon-end="layer" breadcrumb open>
+        <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
+        <calcite-menu-item slot="submenu-item" text="Example submenu item 2" text-enabled href="https://esri.com">
+          <calcite-menu-item slot="submenu-item" text="Example submenu item 1" text-enabled></calcite-menu-item>
+        </calcite-menu-item>
+      </calcite-menu-item>
+    </calcite-menu>
+  `;
+  describe("default", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-menu-item-action-background-color-active": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-background-color",
+        state: { press: { attribute: "class", value: CSS.dropdownAction } },
+      },
+      "--calcite-menu-item-action-background-color-hover": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-background-color",
+        state: "hover",
+      },
+      "--calcite-menu-item-action-background-color": {
+        shadowSelector: `calcite-action`,
+        targetProp: "--calcite-action-background-color",
+      },
+      "--calcite-menu-item-sub-menu-corner-radius": {
+        shadowSelector: `.dropdown--vertical`,
+        targetProp: "borderRadius",
+      },
+      "--calcite-menu-item-background-color": {
+        shadowSelector: `.${CSS.content}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-menu-item-border-color": {
+        shadowSelector: `.${CSS.content}`,
+        targetProp: "borderColor",
+      },
+    };
+    themed(async () => {
+      const page = await newE2EPage();
+      await page.setContent(menuItemHtml);
+      await page.waitForChanges();
+      return { tag: "calcite-menu-item", page };
+    }, tokens);
+  });
+
+  describe("dropdownMenuItems", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-menu-item-background-color": {
+        shadowSelector: `.${CSS.dropdownMenuItems}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-menu-item-icon-color": {
+        shadowSelector: `.${CSS.container} .${CSS.icon}`,
+        targetProp: "--calcite-icon-color",
+      },
+      "--calcite-menu-item-text-color": {
+        shadowSelector: `.${CSS.content}`,
+        targetProp: "color",
+      },
+      "--calcite-menu-item-sub-menu-border-color": {
+        shadowSelector: `.${CSS.dropdownMenuItems}`,
+        targetProp: "borderColor",
+      },
+    };
+    themed(async () => {
+      const page = await newE2EPage();
+      await page.setContent(dropdownMenuItems);
+      const menuItem = await page.find("calcite-menu-item");
+      await menuItem.click();
+      await page.waitForChanges();
+      menuItem.setProperty("open", true);
+      return { tag: "calcite-menu-item", page };
+    }, tokens);
+  });
+});