From 52477126bfcabdf4fd5cd3a95c0dea81ca7e9ee1 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Fri, 24 May 2024 15:44:31 -0500
Subject: [PATCH] test(navigation-logo): add token theming tests (#9409)

**Related Issue:** #7180

## Summary

Add token test for `navigation-logo` component.
---
 .../navigation-logo/navigation-logo.e2e.ts    | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts
index d33aa0b6fab..76ac20cfa0c 100755
--- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts
+++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts
@@ -1,5 +1,7 @@
 import { html } from "../../../support/formatting";
 import { accessible, focusable, hidden, reflects, renders, defaults } from "../../tests/commonTests";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-navigation-logo", () => {
   describe("renders", () => {
@@ -67,4 +69,41 @@ describe("calcite-navigation-logo", () => {
       },
     ]);
   });
+
+  describe("theme", () => {
+    const navigationLogoHtml = html`
+      <calcite-navigation-logo heading="Walt's Chips" description="Eastern Potato Chip Company" icon="layers">
+      </calcite-navigation-logo>
+    `;
+
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-navigation-logo-background-color": {
+          shadowSelector: `.${CSS.anchor}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-navigation-logo-border-color": {
+          shadowSelector: `.${CSS.anchor}`,
+          targetProp: "borderBlockEndColor",
+        },
+        "--calcite-navigation-logo-description-text-color": {
+          shadowSelector: `.${CSS.description}`,
+          targetProp: "color",
+        },
+        "--calcite-navigation-logo-heading-text-color": {
+          shadowSelector: `.${CSS.anchor}`,
+          targetProp: "color",
+        },
+        "--calcite-navigation-logo-icon-color": {
+          shadowSelector: `.${CSS.icon}`,
+          targetProp: "color",
+        },
+        "--calcite-navigation-logo-text-color": {
+          shadowSelector: `.${CSS.icon}`,
+          targetProp: "color",
+        },
+      };
+      themed(navigationLogoHtml, tokens);
+    });
+  });
 });