test(scrim): add component token E2E tests (#9606)

**Related Issue:** #7180 ## Summary ✨🧪✨
Esri · Jun 18, 2024 · c4490a7 · c4490a7
1 parent 6929b4c
commit c4490a7
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 81 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -4562,6 +4562,10 @@ export namespace Components {
           * Accessible name for the dropdown menu.
          */
         "dropdownLabel": string;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements": FlipPlacement[];
         /**
           * Specifies the kind of the component, which will apply to border and background, if applicable.
          */
@@ -4574,6 +4578,11 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * Determines where the component will be positioned relative to the container element.
+          * @default "bottom-end"
+         */
+        "placement": MenuPlacement;
         /**
           * Specifies an icon to display at the end of the primary button.
          */
@@ -12509,6 +12518,10 @@ declare namespace LocalJSX {
           * Accessible name for the dropdown menu.
          */
         "dropdownLabel"?: string;
+        /**
+          * Defines the available placements that can be used when a flip occurs.
+         */
+        "flipPlacements"?: FlipPlacement[];
         /**
           * Specifies the kind of the component, which will apply to border and background, if applicable.
          */
@@ -12529,6 +12542,11 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * Determines where the component will be positioned relative to the container element.
+          * @default "bottom-end"
+         */
+        "placement"?: MenuPlacement;
         /**
           * Specifies an icon to display at the end of the primary button.
          */

diff --git a/packages/calcite-components/src/components/scrim/scrim.e2e.ts b/packages/calcite-components/src/components/scrim/scrim.e2e.ts
@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, renders, t9n } from "../../tests/commonTests";
+import { accessible, defaults, hidden, renders, t9n, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { Scale } from "../interfaces";
 import { BREAKPOINTS, CSS } from "./resources";
@@ -221,86 +221,40 @@ describe("calcite-scrim", () => {
     });
   });
 
-  describe("CSS properties for light/dark modes", () => {
-    const scrimSnippet = `
-    <div style="position: relative; width: 200px; height: 200px; overflow: auto;">
-      <calcite-scrim>
-        <p>I'm a panel that is not loading.</p>
-        <p>This content can have any zIndex and it will not be placed above</p>
-      </calcite-scrim>
-    </div>
-    `;
-    let page;
-    let scrim;
-    let scrimStyles;
-    let scrimBgStyle;
-
-    it("should have defined CSS custom properties", async () => {
-      page = await newE2EPage({ html: scrimSnippet });
-      scrimBgStyle = await page.evaluate(() => {
-        scrim = document.querySelector("calcite-scrim");
-        scrim.style.setProperty("--calcite-scrim-background", "green");
-        return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
-      });
-      expect(scrimBgStyle).toEqual("green");
-    });
-
-    describe("when mode attribute is not provided", () => {
-      it("should render scrim background with default value tied to mode", async () => {
-        page = await newE2EPage({ html: scrimSnippet });
-        scrim = await page.find("calcite-scrim >>> .scrim");
-        scrimStyles = await scrim.getComputedStyle();
-        scrimBgStyle = await scrimStyles.getPropertyValue("background-color");
-        expect(scrimBgStyle).toEqual("rgba(255, 255, 255, 0.85)");
-      });
-    });
-
-    describe("when mode attribute is dark", () => {
-      it("should render scrim background with value tied to dark mode", async () => {
-        page = await newE2EPage({
-          html: `<div class="calcite-mode-dark">${scrimSnippet}</div>`,
-        });
-        scrim = await page.find("calcite-scrim >>> .scrim");
-        scrimStyles = await scrim.getComputedStyle();
-        scrimBgStyle = await scrimStyles.getPropertyValue("background-color");
-        expect(scrimBgStyle).toEqual("rgba(0, 0, 0, 0.85)");
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-scrim", {
+        "--calcite-scrim-background-color": {
+          shadowSelector: `.${CSS.scrim}`,
+          targetProp: "backgroundColor",
+        },
       });
     });
 
-    it("should allow the CSS custom property to be overridden when parent token is altered at :root", async () => {
-      const overrideStyle = "rgb(128, 0, 128)";
-      page = await newE2EPage({
-        html: `
-        <style>
-          :root {
-            --calcite-color-transparent-scrim: ${overrideStyle};
-          }
-        </style>
-        ${scrimSnippet}
-        `,
+    describe("loading", () => {
+      themed(html` <calcite-scrim loading></calcite-scrim>`, {
+        "--calcite-scrim-loader-color-start": {
+          shadowSelector: `calcite-loader`,
+          targetProp: "--calcite-loader-color-start",
+        },
+        "--calcite-scrim-loader-color-middle": {
+          shadowSelector: `calcite-loader`,
+          targetProp: "--calcite-loader-color-middle",
+        },
+        "--calcite-scrim-loader-color-end": {
+          shadowSelector: `calcite-loader`,
+          targetProp: "--calcite-loader-color-end",
+        },
       });
-      scrim = await page.find("calcite-scrim >>> .scrim");
-      scrimStyles = await scrim.getComputedStyle();
-      scrimBgStyle = await scrimStyles.getPropertyValue("background-color");
-      expect(scrimBgStyle).toEqual(overrideStyle);
     });
 
-    it("should allow the CSS custom property to be overridden when applied to element", async () => {
-      const overrideStyle = "rgb(128, 0, 128)";
-      page = await newE2EPage({
-        html: `
-        <style>
-          calcite-scrim {
-            --calcite-scrim-background: ${overrideStyle};
-          }
-        </style>
-        ${scrimSnippet}
-        `,
+    describe("deprecated", () => {
+      themed("calcite-scrim", {
+        "--calcite-scrim-background": {
+          shadowSelector: `.${CSS.scrim}`,
+          targetProp: "backgroundColor",
+        },
       });
-      scrim = await page.find("calcite-scrim >>> .scrim");
-      scrimStyles = await scrim.getComputedStyle();
-      scrimBgStyle = await scrimStyles.getPropertyValue("background-color");
-      expect(scrimBgStyle).toEqual(overrideStyle);
     });
   });
 });
diff --git a/packages/calcite-components/src/components/scrim/scrim.scss b/packages/calcite-components/src/components/scrim/scrim.scss
@@ -3,12 +3,11 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-scrim-background: [Deprecated] Use the `--calcite-scrim-background-color` property instead. Specifies the background color of the component.
  * @prop --calcite-scrim-background-color: Specifies the background color of the component.
- 
- * @prop --calcite-scrim-loader-color-one-third: Specifies the starting color of the loader
- * @prop --calcite-scrim-loader-color-start: Specifies the starting color of the loader
- * @prop --calcite-scrim-loader-color-two-thirds: Specifies the starting color of the loader
+ * @prop --calcite-scrim-background: [Deprecated] Use the `--calcite-scrim-background-color` property instead. Specifies the background color of the component.
+ * @prop --calcite-scrim-loader-color-end: Specifies the end color of the loader
+ * @prop --calcite-scrim-loader-color-middle: Specifies the middle color of the loader
+ * @prop --calcite-scrim-loader-color-start: Specifies the start color of the loader
  */
 
 :host {
@@ -52,9 +51,9 @@
 }
 
 calcite-loader {
-  --calcite-loader-color-middle: var(--calcite-scrim-loader-color-one-third);
+  --calcite-loader-color-middle: var(--calcite-scrim-loader-color-middle);
   --calcite-loader-color-start: var(--calcite-scrim-loader-color-start);
-  --calcite-loader-color-end: var(--calcite-scrim-loader-color-two-thirds);
+  --calcite-loader-color-end: var(--calcite-scrim-loader-color-end);
 }
 
 @include base-component();