test(navigation-user): add token theming tests (#9410)

**Related Issue:** #7180 

## Summary

Add token theming tests for `navigation-user` component.

packages/calcite-components/src/components/navigation-user/navigation-user.e2e.ts

@@ -1,5 +1,7 @@
 import { html } from "../../../support/formatting";
 import { accessible, defaults, focusable, hidden, reflects, renders } from "../../tests/commonTests";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-navigation-user", () => {
   describe("renders", () => {
@@ -39,4 +41,40 @@ describe("calcite-navigation-user", () => {
   describe("is focusable", () => {
     focusable("calcite-navigation-user");
   });
+
+  describe("theme", () => {
+    const navigationUserHtml = html`
+      <calcite-navigation-user full-name="Walt McChipson" username="waltChip"> </calcite-navigation-user>
+    `;
+
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-navigation-user-avatar-corner-radius": {
+          shadowSelector: `calcite-avatar`,
+          targetProp: "--calcite-avatar-corner-radius",
+        },
+        "--calcite-navigation-user-avatar-text-color": {
+          shadowSelector: `calcite-avatar`,
+          targetProp: "--calcite-avatar-text-color",
+        },
+        "--calcite-navigation-user-background-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-navigation-user-border-color": {
+          shadowSelector: `.${CSS.button}`,
+          targetProp: "borderBlockEndColor",
+        },
+        "--calcite-navigation-user-full-name-text-color": {
+          shadowSelector: `.${CSS.fullName}`,
+          targetProp: "color",
+        },
+        "--calcite-navigation-user-name-text-color": {
+          shadowSelector: `.${CSS.username}`,
+          targetProp: "color",
+        },
+      };
+      themed(navigationUserHtml, tokens);
+    });
+  });
 });