test: set up slots helper to run a test per use case (#7083)

**Related Issue:** #N/A

## Summary
Refactor `slots` test helper to help mitigate timeouts.
The updated doc reflects how to use the helpers in E2E tests.

src/components/accordion-item/accordion-item.e2e.ts

@@ -14,5 +14,7 @@ describe("calcite-accordion-item", () => {
     accessible(`<calcite-accordion-item heading="My Heading"></calcite-accordion-item>`);
   });
 
-  it("has slots", () => slots("calcite-accordion-item", SLOTS));
+  describe("slots", () => {
+    slots("calcite-accordion-item", SLOTS);
+  });
 });

src/components/action-bar/action-bar.e2e.ts

@@ -249,7 +249,9 @@ describe("calcite-action-bar", () => {
     );
   });
 
-  it("has slots", () => slots("calcite-action-bar", SLOTS));
+  describe("slots", () => {
+    slots("calcite-action-bar", SLOTS);
+  });
 
   it("should set other 'calcite-action-group' - 'menuOpen' to false", async () => {
     const page = await newE2EPage();

src/components/action-group/action-group.e2e.ts

@@ -33,7 +33,9 @@ describe("calcite-action-group", () => {
     accessible(actionGroupHTML);
   });
 
-  it("has slots", () => slots("calcite-action-group", SLOTS));
+  describe("slots", () => {
+    slots("calcite-action-group", SLOTS);
+  });
 
   it("should honor scale of expand icon", async () => {
     const page = await newE2EPage({ html: actionGroupHTML });

src/components/action-menu/action-menu.e2e.ts

@@ -30,7 +30,9 @@ describe("calcite-action-menu", () => {
     `);
   });
 
-  it("has slots", () => slots("calcite-action-menu", SLOTS));
+  describe("slots", () => {
+    slots("calcite-action-menu", SLOTS);
+  });
 
   describe("defaults", () => {
     defaults("calcite-action-menu", [

src/components/action-pad/action-pad.e2e.ts

@@ -205,7 +205,9 @@ describe("calcite-action-pad", () => {
     );
   });
 
-  it("has slots", () => slots("calcite-action-pad", SLOTS));
+  describe("slots", () => {
+    slots("calcite-action-pad", SLOTS);
+  });
 
   it("'calciteActionMenuOpen' event should set other 'calcite-action-group' - 'menuOpen' to false", async () => {
     const page = await newE2EPage({

src/components/action/action.e2e.ts

@@ -50,7 +50,9 @@ describe("calcite-action", () => {
 
   it("can be disabled", () => disabled("calcite-action"));
 
-  it("has slots", () => slots("calcite-action", SLOTS));
+  describe("slots", () => {
+    slots("calcite-action", SLOTS);
+  });
 
   it("should have visible text when text is enabled", async () => {
     const page = await newE2EPage();

src/components/block/block.e2e.ts

@@ -29,7 +29,9 @@ describe("calcite-block", () => {
     ]);
   });
 
-  it("has slots", () => slots("calcite-block", SLOTS));
+  describe("slots", () => {
+    slots("calcite-block", SLOTS);
+  });
 
   describe("accessible", () => {
     accessible(html`

src/components/card/card.e2e.ts

@@ -28,7 +28,9 @@ describe("calcite-card", () => {
     </calcite-card>`);
   });
 
-  it("has slots", () => slots("calcite-card", SLOTS));
+  describe("slots", () => {
+    slots("calcite-card", SLOTS);
+  });
 
   it("renders with default props if none are provided", async () => {
     const page = await newE2EPage();

src/components/chip/chip.e2e.ts

@@ -15,7 +15,9 @@ describe("calcite-chip", () => {
     accessible(`<calcite-chip>doritos</calcite-chip>`);
   });
 
-  it("has slots", () => slots("calcite-chip", SLOTS));
+  describe("slots", () => {
+    slots("calcite-chip", SLOTS);
+  });
 
   describe("is focusable when interactive", () => {
     focusable("<calcite-chip interactive>doritos</calcite-chip>");

src/components/combobox-item/combobox-item.e2e.ts

@@ -9,7 +9,9 @@ describe("calcite-combobox-item", () => {
     hidden("calcite-combobox-item");
   });
 
-  it("has slots", () => slots("calcite-combobox-item", [], true));
+  describe("slots", () => {
+    slots("calcite-combobox-item", [], true);
+  });
 
   it("can be disabled", () => disabled("calcite-combobox-item", { focusTarget: "none" }));
 });

src/components/flow-item/flow-item.e2e.ts

@@ -41,7 +41,9 @@ describe("calcite-flow-item", () => {
     ]);
   });
 
-  it("has slots", () => slots("calcite-flow-item", SLOTS));
+  describe("slots", () => {
+    slots("calcite-flow-item", SLOTS);
+  });
 
   it("can be disabled", () => disabled(`<calcite-flow-item closable>scrolling content</calcite-flow-item>`));
 

src/components/list-item/list-item.e2e.ts

@@ -46,7 +46,9 @@ describe("calcite-list-item", () => {
     ]);
   });
 
-  it("has slots", () => slots("calcite-list-item", SLOTS));
+  describe("slots", () => {
+    slots("calcite-list-item", SLOTS);
+  });
 
   it("can be disabled", () => disabled(`<calcite-list-item label="test" active></calcite-list-item>`));
 

src/components/modal/modal.e2e.ts

@@ -13,7 +13,9 @@ describe("calcite-modal properties", () => {
     hidden("calcite-modal");
   });
 
-  it("has slots", () => slots("calcite-modal", SLOTS));
+  describe("slots", () => {
+    slots("calcite-modal", SLOTS);
+  });
 
   it("should hide closeButton when disabled", async () => {
     const page = await newE2EPage();

src/components/notice/notice.e2e.ts

@@ -34,7 +34,9 @@ describe("calcite-notice", () => {
     accessible(`<calcite-notice icon closable open>${noticeContent}</calcite-notice>`);
   });
 
-  it("has slots", () => slots("calcite-notice", SLOTS));
+  describe("slots", () => {
+    slots("calcite-notice", SLOTS);
+  });
 
   it("renders default props when none are provided", async () => {
     const page = await newE2EPage();

src/components/panel/panel.e2e.ts

@@ -34,7 +34,9 @@ describe("calcite-panel", () => {
     ]);
   });
 
-  it("has slots", () => slots("calcite-panel", SLOTS));
+  describe("slots", () => {
+    slots("calcite-panel", SLOTS);
+  });
 
   it("can be disabled", () => disabled(`<calcite-panel closable>scrolling content</calcite-panel>`));
 

src/components/pick-list-group/pick-list-group.e2e.ts

@@ -34,7 +34,9 @@ describe("calcite-pick-list-group", () => {
     ]);
   });
 
-  it("has slots", () => slots("calcite-pick-list-group", SLOTS));
+  describe("slots", () => {
+    slots("calcite-pick-list-group", SLOTS);
+  });
 
   it("should render", async () => {
     const page = await newE2EPage();

src/components/pick-list-item/pick-list-item.e2e.ts

@@ -33,7 +33,9 @@ describe("calcite-pick-list-item", () => {
     `);
   });
 
-  it("has slots", () => slots("calcite-pick-list-item", SLOTS));
+  describe("slots", () => {
+    slots("calcite-pick-list-item", SLOTS);
+  });
 
   it("can be disabled", async () => disabled("calcite-pick-list-item"));
 

src/components/shell-center-row/shell-center-row.e2e.ts

@@ -29,7 +29,9 @@ describe("calcite-shell-center-row", () => {
     ]);
   });
 
-  it("has slots", () => slots("calcite-shell-center-row", SLOTS));
+  describe("slots", () => {
+    slots("calcite-shell-center-row", SLOTS);
+  });
 
   it("should not render action bar container when there is no action-bar", async () => {
     const page = await newE2EPage();

src/components/shell-panel/shell-panel.e2e.ts

@@ -35,7 +35,9 @@ describe("calcite-shell-panel", () => {
     ]);
   });
 
-  it("has slots", () => slots("calcite-shell-panel", SLOTS));
+  describe("slots", () => {
+    slots("calcite-shell-panel", SLOTS);
+  });
 
   it("has a slot", async () => {
     const page = await newE2EPage();

src/components/shell/shell.e2e.ts

@@ -12,7 +12,9 @@ describe("calcite-shell", () => {
     hidden("calcite-shell");
   });
 
-  it("has slots", () => slots("calcite-shell", SLOTS));
+  describe("slots", () => {
+    slots("calcite-shell", SLOTS);
+  });
 
   it("content node should always be present", async () => {
     const page = await newE2EPage();

src/components/stack/stack.e2e.ts

@@ -19,5 +19,7 @@ describe("calcite-stack", () => {
     hidden("calcite-stack");
   });
 
-  it("has slots", () => slots("calcite-stack", SLOTS));
+  describe("slots", () => {
+    slots("calcite-stack", SLOTS);
+  });
 });

src/components/tile/tile.e2e.ts

@@ -24,7 +24,9 @@ describe("calcite-tile", () => {
     ]);
   });
 
-  it("has slots", async () => slots("calcite-tile", SLOTS));
+  describe("slots", () => {
+    slots("calcite-tile", SLOTS);
+  });
 
   describe("reflects", () => {
     reflects("calcite-tile", [

src/components/tip/tip.e2e.ts

@@ -24,7 +24,9 @@ describe("calcite-tip", () => {
     accessible(`<calcite-tip heading="sample"><p>not dismissible</p></calcite-tip>`);
   });
 
-  it("has slots", () => slots("calcite-tip", SLOTS));
+  describe("slots", () => {
+    slots("calcite-tip", SLOTS);
+  });
 
   it("should remove the closeButton if closeDisabled prop is true", async () => {
     const page = await newE2EPage();

src/components/tree-item/tree-item.e2e.ts

@@ -58,7 +58,9 @@ describe("calcite-tree-item", () => {
     ]);
   });
 
-  it("has slots", () => slots("calcite-tree-item", SLOTS));
+  describe("slots", () => {
+    slots("calcite-tree-item", SLOTS);
+  });
 
   it("can be disabled (within a tree)", async () => {
     const page = await newE2EPage();

src/components/value-list-item/value-list-item.e2e.ts

@@ -27,7 +27,9 @@ describe("calcite-value-list-item", () => {
     `);
   });
 
-  it("has slots", () => slots("calcite-value-list-item", SLOTS));
+  describe("slots", () => {
+    slots("calcite-value-list-item", SLOTS);
+  });
 
   describe("is focusable", () => {
     focusable("calcite-value-list-item");

src/tests/commonTests.ts

@@ -306,64 +306,77 @@ export function focusable(componentTagOrHTML: TagOrHTML, options?: FocusableOpti
 /**
  * Helper for asserting slots.
  *
- * @param {string} componentTagOrHTML - the component tag or HTML markup to test against
- * @param slots - a component's SLOTS resource object or an array of slot names
- * @param includeDefaultSlot - when true, it will run assertions on the default slot
+ * Note that this helper should be used within a describe block.
+ *
+ * @example
+ * describe("slots", () => {
+ *    slots("calcite-stack", SLOTS)
+ * })
+ *
+ * @param {string} componentTagOrHTML - The component tag or HTML markup to test against.
+ * @param {Record<string, string> | string[]} slots - A component's SLOTS resource object or an array of slot names.
+ * @param {boolean} includeDefaultSlot - When true, it will run assertions on the default slot.
  */
-export async function slots(
+export function slots(
   componentTagOrHTML: TagOrHTML,
   slots: Record<string, string> | string[],
   includeDefaultSlot = false
-): Promise<void> {
-  const page = await simplePageSetup(componentTagOrHTML);
-  const tag = getTag(componentTagOrHTML);
-  const slotNames = Array.isArray(slots) ? slots : Object.values(slots);
+): void {
+  it("has slots", async () => {
+    const page = await simplePageSetup(componentTagOrHTML);
+    const tag = getTag(componentTagOrHTML);
+    const slotNames = Array.isArray(slots) ? slots : Object.values(slots);
 
-  await page.$eval(
-    tag,
-    async (component, slotNames: string[], includeDefaultSlot?: boolean) => {
-      async function slotTestElement(testClass: string, slotName?: string): Promise<void> {
-        const el = document.createElement("div"); // slotting a <div> will suffice for our purposes
-        el.classList.add(testClass);
+    await page.$eval(
+      tag,
+      async (component, slotNames: string[], includeDefaultSlot?: boolean) => {
+        async function slotTestElement(testClass: string, slotName?: string): Promise<void> {
+          const el = document.createElement("div"); // slotting a <div> will suffice for our purposes
+          el.classList.add(testClass);
 
-        if (slotName) {
-          el.slot = slotName;
-        }
+          if (slotName) {
+            el.slot = slotName;
+          }
 
-        component.append(el);
-        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
-      }
+          component.append(el);
+          await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+        }
 
-      for (let i = 0; i < slotNames.length; i++) {
-        await slotTestElement("slotted-into-named-slot", slotNames[i]);
-      }
+        for (let i = 0; i < slotNames.length; i++) {
+          await slotTestElement("slotted-into-named-slot", slotNames[i]);
+        }
 
-      if (includeDefaultSlot) {
-        await slotTestElement("slotted-into-default-slot");
-      }
-    },
-    slotNames,
-    includeDefaultSlot
-  );
+        if (includeDefaultSlot) {
+          await slotTestElement("slotted-into-default-slot");
+        }
+      },
+      slotNames,
+      includeDefaultSlot
+    );
 
-  await page.waitForChanges();
+    await page.waitForChanges();
 
-  const slotted = await page.evaluate(() =>
-    Array.from(document.querySelectorAll(".slotted-into-named-slot"))
-      .filter((slotted) => slotted.assignedSlot)
-      .map((slotted) => slotted.slot)
-  );
+    const slotted = await page.evaluate(() =>
+      Array.from(document.querySelectorAll(".slotted-into-named-slot"))
+        .filter((slotted) => slotted.assignedSlot)
+        .map((slotted) => slotted.slot)
+    );
 
-  expect(slotNames).toEqual(slotted);
+    expect(slotNames).toEqual(slotted);
 
-  if (includeDefaultSlot) {
-    const hasDefaultSlotted = await page.evaluate(() => {
-      const defaultSlotted = document.querySelector(".slotted-into-default-slot");
-      return defaultSlotted.assignedSlot?.name === "" && defaultSlotted.slot === "";
-    });
+    if (includeDefaultSlot) {
+      const hasDefaultSlotted = await page.evaluate(() => {
+        const defaultSlotted = document.querySelector(".slotted-into-default-slot");
+        return defaultSlotted.assignedSlot?.name === "" && defaultSlotted.slot === "";
+      });
 
-    expect(hasDefaultSlotted).toBe(true);
-  }
+      /* eslint-disable-next-line jest/no-conditional-expect --
+       * Conditional logic here is confined to a test helper and its purpose is to handle specific scenarios/variations in the test setup.
+       * The goal is to reduce duplication and strike a balance between test readability and maintainability.
+       **/
+      expect(hasDefaultSlotted).toBe(true);
+    }
+  });
 }
 
 async function assertLabelable({