From 73c5dc82b282d45c0d3322ee8d38cb1af50e0b91 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Thu, 30 May 2024 12:49:28 -0700
Subject: [PATCH] test(modal): add token theming tests (#9447)

**Related Issue:** #7180

## Summary
Add token theming tests for `modal`.
---
 .../src/components/modal/modal.e2e.ts         | 140 +++++++++++++++++-
 1 file changed, 137 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index a57d1ba3939..452b5f38232 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -1,7 +1,8 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { focusable, hidden, openClose, renders, slots, t9n } from "../../tests/commonTests";
+import { focusable, hidden, openClose, renders, slots, t9n, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { GlobalTestProps, isElementFocused, skipAnimations } from "../../tests/utils";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-modal", () => {
@@ -610,7 +611,7 @@ describe("calcite-modal", () => {
     });
     const scrimStyles = await page.evaluate(() => {
       const scrim = document.querySelector("calcite-modal").shadowRoot.querySelector(".scrim");
-      return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
+      return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background-color");
     });
     expect(scrimStyles.trim()).toEqual("rgba(0, 0, 0, 0.85)");
   });
@@ -632,7 +633,7 @@ describe("calcite-modal", () => {
     });
     const scrimStyles = await page.evaluate(() => {
       const scrim = document.querySelector("calcite-modal").shadowRoot.querySelector(".scrim");
-      return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
+      return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background-color");
     });
     expect(scrimStyles).toEqual(overrideStyle);
   });
@@ -657,3 +658,136 @@ describe("calcite-modal", () => {
     expect(closeIcon).not.toBe(null);
   });
 });
+
+describe("theme", () => {
+  const modalHTML = html`
+    <calcite-modal open>
+      <h3 slot="header">Slot for a header.</h3>
+      <div slot="content-top">Slot for a content-top.</div>
+      <div slot="content" style="height: 100px">
+        Lorem ipsum dolor sit amet, feugiat magna ut, posuere arcu. Curabitur varius erat ut suscipit convallis.
+      </div>
+      <div slot="content-bottom">Slot for a content-bottom.</div>
+      <calcite-button slot="primary" width="full">Button</calcite-button>
+    </calcite-modal>
+  `;
+  const modalBrandHTML = html`
+    <calcite-modal kind="brand" open>
+      <h3 slot="header">Slot for a header.</h3>
+    </calcite-modal>
+  `;
+  const modalDangerHTML = html`
+    <calcite-modal kind="danger" open>
+      <h3 slot="header">Slot for a header.</h3>
+    </calcite-modal>
+  `;
+  const modalInfoHTML = html`
+    <calcite-modal kind="info" open>
+      <h3 slot="header">Slot for a header.</h3>
+    </calcite-modal>
+  `;
+  const modalSuccessHTML = html`
+    <calcite-modal kind="success" open>
+      <h3 slot="header">Slot for a header.</h3>
+    </calcite-modal>
+  `;
+  const modalWarningHTML = html`
+    <calcite-modal kind="warning" open>
+      <h3 slot="header">Slot for a header.</h3>
+    </calcite-modal>
+  `;
+  describe("default", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-modal-background-color": {
+        shadowSelector: `.${CSS.modal}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-modal-border-color": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "--calcite-internal-modal-border-color",
+      },
+      "--calcite-modal-close-button-background-color-hover": {
+        shadowSelector: `.${CSS.modal} .${CSS.close}`,
+        targetProp: "backgroundColor",
+        state: { hover: { attribute: "class", value: CSS.close } },
+      },
+      "--calcite-modal-close-button-background-color": {
+        shadowSelector: `.${CSS.modal} .${CSS.close}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-modal-content-background-color": {
+        shadowSelector: `.${CSS.modal} .${CSS.content}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-modal-content-padding": {
+        shadowSelector: `.${CSS.modal} .${CSS.content}`,
+        targetProp: "padding",
+      },
+      "--calcite-modal-content-space": {
+        shadowSelector: `.${CSS.modal} .${CSS.content}`,
+        targetProp: "padding",
+      },
+      "--calcite-modal-height": {
+        shadowSelector: `.${CSS.modal}`,
+        targetProp: "blockSize",
+      },
+      "--calcite-modal-shadow": {
+        shadowSelector: `.${CSS.modal}`,
+        targetProp: "boxShadow",
+      },
+      "--calcite-modal-text-color": {
+        shadowSelector: `.${CSS.modal}`,
+        targetProp: "color",
+      },
+      "--calcite-modal-width": {
+        shadowSelector: `.${CSS.modal}`,
+        targetProp: "inlineSize",
+      },
+      "--calcite-modal-scrim-background-color": {
+        shadowSelector: `.${CSS.scrim}`,
+        targetProp: "--calcite-scrim-background-color",
+      },
+    };
+    themed(async () => modalHTML, tokens);
+  });
+  describe("kindBrand", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-modal-accent-color": {
+        targetProp: "--calcite-internal-modal-accent-color",
+      },
+    };
+    themed(async () => modalBrandHTML, tokens);
+  });
+  describe("dangerBrand", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-modal-accent-color": {
+        targetProp: "--calcite-internal-modal-accent-color",
+      },
+    };
+    themed(async () => modalDangerHTML, tokens);
+  });
+  describe("infoBrand", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-modal-accent-color": {
+        targetProp: "--calcite-internal-modal-accent-color",
+      },
+    };
+    themed(async () => modalInfoHTML, tokens);
+  });
+  describe("successBrand", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-modal-accent-color": {
+        targetProp: "--calcite-internal-modal-accent-color",
+      },
+    };
+    themed(async () => modalSuccessHTML, tokens);
+  });
+  describe("warningBrand", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-modal-accent-color": {
+        targetProp: "--calcite-internal-modal-accent-color",
+      },
+    };
+    themed(async () => modalWarningHTML, tokens);
+  });
+});