test(list,list-item-group): add themed e2e tests

Esri · Jun 17, 2024 · 815208b · 815208b
1 parent 3a8e269
commit 815208b
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 2 deletions.
diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts b/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts
@@ -1,4 +1,7 @@
-import { hidden, renders, disabled, defaults } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { hidden, renders, disabled, defaults, themed } from "../../tests/commonTests";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-list-item-group", () => {
   describe("renders", () => {
@@ -33,4 +36,33 @@ describe("calcite-list-item-group", () => {
       },
     ]);
   });
+
+  describe("themed", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-list-item-group-background-color": {
+        selector: "calcite-list-item-group",
+        targetProp: "backgroundColor",
+      },
+      "--calcite-list-item-group-text-color": {
+        selector: "calcite-list-item-group",
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "color",
+      },
+    };
+    themed(
+      html`<calcite-list selection-mode="single">
+        <calcite-list-item-group>
+          <calcite-list-item label="Apples" description="Apples are cool" value="apples" open></calcite-list-item>
+          <calcite-list-item
+            label="Oranges"
+            description="Oranges are cool"
+            value="oranges"
+            selected
+          ></calcite-list-item>
+          <calcite-list-item label="Pears" description="Pears are cool" value="pears"></calcite-list-item>
+        </calcite-list-item-group>
+      </calcite-list>`,
+      tokens,
+    );
+  });
 });
diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -5,7 +5,8 @@ import { html } from "../../../support/formatting";
 import { CSS as ListItemCSS, activeCellTestAttribute } from "../list-item/resources";
 import { DEBOUNCE_TIMEOUT as FILTER_DEBOUNCE_TIMEOUT } from "../filter/resources";
 import { GlobalTestProps, dragAndDrop, isElementFocused, getFocusedElementProp } from "../../tests/utils";
-import { debounceTimeout } from "./resources";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import { CSS, debounceTimeout } from "./resources";
 import { ListDragDetail } from "./interfaces";
 
 const placeholder = placeholderImage({
@@ -1326,4 +1327,51 @@ describe("calcite-list", () => {
       expect(await handle.getProperty("selected")).toBe(false);
     });
   });
+
+  describe("theme", () => {
+    describe("filtered default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-list-header-background-color": {
+          shadowSelector: `.${CSS.sticky}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-list-header-z-index": {
+          shadowSelector: `.${CSS.sticky}`,
+          targetProp: "backgroundColor",
+        },
+      };
+      themed(
+        html`<calcite-list filter-enabled filter-text="Bananas" selection-appearance="border" selection-mode="single">
+          <calcite-list-item label="Apples" value="apples"></calcite-list-item>
+          <calcite-list-item label="Oranges" value="oranges"></calcite-list-item>
+          <calcite-list-item label="Pears" value="pears"></calcite-list-item>
+          <calcite-notice slot="filter-no-results" icon kind="warning" scale="s" open>
+            <div slot="title">No fruits found</div>
+            <div slot="message">Try a different fruit?</div>
+          </calcite-notice>
+        </calcite-list>`,
+        tokens,
+      );
+    });
+    describe("filtered fallback", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-list-background-color": {
+          shadowSelector: `.${CSS.sticky}`,
+          targetProp: "backgroundColor",
+        },
+      };
+      themed(
+        html`<calcite-list filter-enabled filter-text="Bananas" selection-appearance="border" selection-mode="single">
+          <calcite-list-item label="Apples" value="apples"></calcite-list-item>
+          <calcite-list-item label="Oranges" value="oranges"></calcite-list-item>
+          <calcite-list-item label="Pears" value="pears"></calcite-list-item>
+          <calcite-notice slot="filter-no-results" icon kind="warning" scale="s" open>
+            <div slot="title">No fruits found</div>
+            <div slot="message">Try a different fruit?</div>
+          </calcite-notice>
+        </calcite-list>`,
+        tokens,
+      );
+    });
+  });
 });