test(avatar): add component token E2E tests (#9601)

**Related Issue:** #7180 ## Summary ✨🧪✨
Esri · Jun 18, 2024 · 63c4c0f · 63c4c0f
1 parent dc89196
commit 63c4c0f
Showing 1 changed file with 53 additions and 1 deletion.
diff --git a/packages/calcite-components/src/components/avatar/avatar.e2e.ts b/packages/calcite-components/src/components/avatar/avatar.e2e.ts
@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
+import { accessible, defaults, hidden, renders, themed } from "../../tests/commonTests";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
@@ -98,4 +98,56 @@ describe("calcite-avatar", () => {
     expect(secondBgColor).not.toEqual(thirdBgColor);
     expect(firstBgColor).not.toEqual(thirdBgColor);
   });
+
+  describe("theme", () => {
+    describe("thumbnail", () => {
+      themed(
+        html`<calcite-avatar
+          thumbnail="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII"
+        ></calcite-avatar>`,
+        {
+          "--calcite-avatar-corner-radius": [
+            {
+              targetProp: "borderRadius",
+            },
+            {
+              shadowSelector: `.${CSS.thumbnail}`,
+              targetProp: "borderRadius",
+            },
+          ],
+        },
+      );
+    });
+
+    describe("icon", () => {
+      themed(html`<calcite-avatar user-id="umonti"></calcite-avatar>`, {
+        "--calcite-avatar-icon-color": {
+          shadowSelector: `.${CSS.icon}`,
+          targetProp: "color",
+        },
+        "--calcite-avatar-corner-radius": [
+          {
+            targetProp: "borderRadius",
+          },
+          {
+            shadowSelector: `.${CSS.background}`,
+            targetProp: "borderRadius",
+          },
+        ],
+      });
+    });
+
+    describe("initials", () => {
+      themed(html`<calcite-avatar full-name="Urbano Monti"></calcite-avatar>`, {
+        "--calcite-avatar-text-color": {
+          shadowSelector: `.${CSS.initials}`,
+          targetProp: "color",
+        },
+        "--calcite-avatar-corner-radius": {
+          shadowSelector: `.${CSS.background}`,
+          targetProp: "borderRadius",
+        },
+      });
+    });
+  });
 });