test: set up disabled helper to run a test per use case

packages/calcite-components/src/components/action/action.e2e.ts

@@ -48,7 +48,9 @@ describe("calcite-action", () => {
     hidden("calcite-action");
   });
 
-  it("can be disabled", () => disabled("calcite-action"));
+  describe("disabled", () => {
+    disabled("calcite-action");
+  });
 
   describe("slots", () => {
     slots("calcite-action", SLOTS);

packages/calcite-components/src/components/block/block.e2e.ts

@@ -43,8 +43,9 @@ describe("calcite-block", () => {
     `);
   });
 
-  it("can be disabled", () =>
-    disabled(html`<calcite-block heading="heading" description="description" collapsible></calcite-block>`));
+  describe("disabled", () => {
+    disabled(html`<calcite-block heading="heading" description="description" collapsible></calcite-block>`);
+  });
 
   it("has a loading state", async () => {
     const page = await newE2EPage({

packages/calcite-components/src/components/button/button.e2e.ts

@@ -139,7 +139,9 @@ describe("calcite-button", () => {
     labelable("calcite-button");
   });
 
-  it("can be disabled", () => disabled("calcite-button"));
+  describe("disabled", () => {
+    disabled("calcite-button");
+  });
 
   it("should update childElType when href changes", async () => {
     const page = await newE2EPage({ html: `<calcite-button>Continue</calcite-button>` });

packages/calcite-components/src/components/checkbox/checkbox.e2e.ts

@@ -32,7 +32,9 @@ describe("calcite-checkbox", () => {
     formAssociated("calcite-checkbox", { testValue: true, inputType: "checkbox" });
   });
 
-  it("can be disabled", () => disabled("calcite-checkbox"));
+  describe("disabled", () => {
+    disabled("calcite-checkbox");
+  });
 
   it("renders with correct default attributes", async () => {
     const page = await newE2EPage();

packages/calcite-components/src/components/chip-group/chip-group.e2e.ts

@@ -15,10 +15,11 @@ describe("calcite-chip-group", () => {
     hidden("calcite-chip-group");
   });
 
-  it("can be disabled", () =>
+  describe("disabled", () => {
     disabled("<calcite-chip-group><calcite-chip></calcite-chip></calcite-chip-group>", {
       focusTarget: "child"
-    }));
+    });
+  });
 
   describe("is accessible in selection mode none (default)", () => {
     accessible(

packages/calcite-components/src/components/chip/chip.e2e.ts

@@ -23,7 +23,9 @@ describe("calcite-chip", () => {
     focusable("<calcite-chip interactive>doritos</calcite-chip>");
   });
 
-  it("can be disabled when interactive", () => disabled("<calcite-chip interactive>doritos</calcite-chip>"));
+  describe("can be disabled when interactive", () => {
+    disabled("<calcite-chip interactive>doritos</calcite-chip>");
+  });
 
   it("should not emit event after the chip is clicked if interactive if not set", async () => {
     const page = await newE2EPage();

packages/calcite-components/src/components/color-picker/color-picker.e2e.ts

@@ -109,7 +109,9 @@ describe("calcite-color-picker", () => {
   });
 
   // #408047 is a color in the middle of the color field
-  it("can be disabled", () => disabled("<calcite-color-picker value='#408047'></calcite-color-picker>"));
+  describe("disabled", () => {
+    disabled("<calcite-color-picker value='#408047'></calcite-color-picker>");
+  });
 
   describe("translation support", () => {
     t9n("<calcite-color-picker></calcite-color-picker>");

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

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

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -131,7 +131,9 @@ describe("calcite-combobox", () => {
     labelable("calcite-combobox");
   });
 
-  it("can be disabled", () => disabled("calcite-combobox"));
+  describe("disabled", () => {
+    disabled("calcite-combobox");
+  });
 
   it("filtering does not match property with value of undefined", async () => {
     const page = await newE2EPage({

packages/calcite-components/src/components/date-picker-day/date-picker-day.e2e.ts

@@ -1,21 +1,26 @@
+import { E2EPage } from "@stencil/core/testing";
 import { disabled } from "../../tests/commonTests";
 import { newProgrammaticE2EPage } from "../../tests/utils";
 import { DATE_PICKER_FORMAT_OPTIONS } from "../date-picker/resources";
 import { Serializable } from "puppeteer";
 
 describe("calcite-date-picker-day", () => {
-  it("can be disabled", async () => {
-    const page = await newProgrammaticE2EPage();
-    await page.evaluate(() => {
-      const dateEl = document.createElement("calcite-date-picker-day") as HTMLCalciteDatePickerDayElement;
-      dateEl.active = true;
-      dateEl.dateTimeFormat = new Intl.DateTimeFormat("en"); // options not needed as this is only needed for rendering
-      dateEl.day = 3;
-      document.body.append(dateEl);
+  describe("disabled within a tree", () => {
+    let page: E2EPage;
+
+    beforeEach(async () => {
+      page = await newProgrammaticE2EPage();
+      await page.evaluate(() => {
+        const dateEl = document.createElement("calcite-date-picker-day") as HTMLCalciteDatePickerDayElement;
+        dateEl.active = true;
+        dateEl.dateTimeFormat = new Intl.DateTimeFormat("en"); // options not needed as this is only needed for rendering
+        dateEl.day = 3;
+        document.body.append(dateEl);
+      });
+      await page.waitForChanges();
     });
-    await page.waitForChanges();
 
-    return disabled({ tag: "calcite-date-picker-day", page });
+    disabled(() => ({ tag: "calcite-date-picker-day", page }));
   });
 
   describe("accessibility", () => {

packages/calcite-components/src/components/dropdown/dropdown.e2e.ts

@@ -42,7 +42,9 @@ describe("calcite-dropdown", () => {
     ]);
   });
 
-  it("can be disabled", () => disabled(simpleDropdownHTML, { focusTarget: "child" }));
+  describe("disabled", () => {
+    disabled(simpleDropdownHTML, { focusTarget: "child" });
+  });
 
   interface SelectedItemsAssertionOptions {
     /**

packages/calcite-components/src/components/fab/fab.e2e.ts

@@ -24,7 +24,9 @@ describe("calcite-fab", () => {
     ]);
   });
 
-  it("can be disabled", () => disabled("calcite-fab"));
+  describe("disabled", () => {
+    disabled("calcite-fab");
+  });
 
   it(`should set all internal calcite-button types to 'button'`, async () => {
     const page = await newE2EPage({

packages/calcite-components/src/components/filter/filter.e2e.ts

@@ -20,7 +20,9 @@ describe("calcite-filter", () => {
     focusable("calcite-filter");
   });
 
-  it("can be disabled", () => disabled("calcite-filter"));
+  describe("disabled", () => {
+    disabled("calcite-filter");
+  });
 
   describe("reflects", () => {
     reflects("calcite-filter", [

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

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

packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts

@@ -19,15 +19,16 @@ describe("calcite-inline-editable", () => {
     hidden("calcite-inline-editable");
   });
 
-  it("can be disabled", () =>
+  describe("disabled", () => {
     disabled(
       html`
         <calcite-inline-editable>
           <calcite-input />
         </calcite-inline-editable>
       `,
       { focusTarget: { tab: "calcite-inline-editable", click: "calcite-input" } }
-    ));
+    );
+  });
 
   describe("rendering permutations", () => {
     let page: E2EPage;

packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts

@@ -51,7 +51,9 @@ describe("calcite-input-date-picker", () => {
     labelable("calcite-input-date-picker");
   });
 
-  it("can be disabled", () => disabled("calcite-input-date-picker"));
+  describe("disabled", () => {
+    disabled("calcite-input-date-picker");
+  });
 
   it.skip("supports t9n", () => t9n("calcite-input-date-picker"));
 

packages/calcite-components/src/components/input-number/input-number.e2e.ts

@@ -87,7 +87,9 @@ describe("calcite-input-number", () => {
     ]);
   });
 
-  it("can be disabled", () => disabled("calcite-input-number"));
+  describe("disabled", () => {
+    disabled("calcite-input-number");
+  });
 
   it("when disabled, spinner buttons  should not be interactive/should not nudge the number", async () => {
     const page = await newE2EPage();

packages/calcite-components/src/components/input-text/input-text.e2e.ts

@@ -64,7 +64,9 @@ describe("calcite-input-text", () => {
     ]);
   });
 
-  it("can be disabled", () => disabled("calcite-input-text"));
+  describe("disabled", () => {
+    disabled("calcite-input-text");
+  });
 
   it("renders an icon when explicit Calcite UI is requested, and is a type without a default icon", async () => {
     const page = await newE2EPage();

packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts

@@ -86,7 +86,9 @@ describe("calcite-input-time-picker", () => {
     });
   });
 
-  it("can be disabled", () => disabled("calcite-input-time-picker"));
+  describe("disabled", () => {
+    disabled("calcite-input-time-picker");
+  });
 
   it("when set to readOnly, element still focusable but won't display the controls or allow for changing the value", async () => {
     const page = await newE2EPage();

packages/calcite-components/src/components/input/input.e2e.ts

@@ -95,7 +95,9 @@ describe("calcite-input", () => {
     ]);
   });
 
-  it("can be disabled", () => disabled("calcite-input"));
+  describe("disabled", () => {
+    disabled("calcite-input");
+  });
 
   it("spinner buttons on disabled number input should not be interactive/should not nudge the number", async () => {
     const page = await newE2EPage();

packages/calcite-components/src/components/link/link.e2e.ts

@@ -25,7 +25,9 @@ describe("calcite-link", () => {
     accessible("<calcite-link icon-start='plus' icon-end='plus' href='/'>Go</calcite-link>");
   });
 
-  it("can be disabled", () => disabled(`<calcite-link href='/'>link</calcite-link>`));
+  describe("disabled", () => {
+    disabled(`<calcite-link href='/'>link</calcite-link>`);
+  });
 
   it("sets download attribute on internal anchor", async () => {
     const page = await newE2EPage();

packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts

@@ -9,7 +9,9 @@ describe("calcite-list-item-group", () => {
     hidden("calcite-list-item-group");
   });
 
-  it("can be disabled", () => disabled("calcite-list-item-group", { focusTarget: "none" }));
+  describe("disabled", () => {
+    disabled("calcite-list-item-group", { focusTarget: "none" });
+  });
 
   describe("defaults", () => {
     defaults("calcite-list-item-group", [

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

@@ -50,7 +50,9 @@ describe("calcite-list-item", () => {
     slots("calcite-list-item", SLOTS);
   });
 
-  it("can be disabled", () => disabled(`<calcite-list-item label="test" active></calcite-list-item>`));
+  describe("disabled", () => {
+    disabled(`<calcite-list-item label="test" active></calcite-list-item>`);
+  });
 
   it("renders content node when label is provided", async () => {
     const page = await newE2EPage({ html: `<calcite-list-item label="test"></calcite-list-item>` });

packages/calcite-components/src/components/list/list.e2e.ts

@@ -96,13 +96,14 @@ describe("calcite-list", () => {
     </calcite-list>`);
   });
 
-  it("can be disabled", () =>
+  describe("disabled", () => {
     disabled(
       html`<calcite-list>
         <calcite-list-item label="test" description="hello world"></calcite-list-item>
       </calcite-list>`,
       { focusTarget: "child" }
-    ));
+    );
+  });
 
   it.skip("navigating items after filtering", async () => {
     const page = await newE2EPage({

packages/calcite-components/src/components/panel/panel.e2e.ts

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

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

@@ -37,7 +37,9 @@ describe("calcite-pick-list-item", () => {
     slots("calcite-pick-list-item", SLOTS);
   });
 
-  it("can be disabled", async () => disabled("calcite-pick-list-item"));
+  describe("disabled", () => {
+    disabled("calcite-pick-list-item");
+  });
 
   describe("translation support", () => {
     t9n("calcite-pick-list-item");

packages/calcite-components/src/components/pick-list/shared-list-tests.ts

@@ -626,8 +626,9 @@ export function focusing(listType: ListType): void {
   });
 }
 
+/* eslint-disable-next-line jest/no-export  -- util functions are now imported to be used as `it` blocks within `describe` instead of assertions within `it` blocks */
 export function disabling(listType: ListType): void {
-  it("can be disabled", () =>
+  describe("disabled", () => {
     disabled(
       html`
       <calcite-${listType}-list>
@@ -637,5 +638,6 @@ export function disabling(listType: ListType): void {
       {
         focusTarget: "child"
       }
-    ));
+    );
+  });
 }

packages/calcite-components/src/components/radio-button/radio-button.e2e.ts

@@ -43,7 +43,9 @@ describe("calcite-radio-button", () => {
     });
   });
 
-  it("can be disabled", () => disabled("calcite-radio-button"));
+  describe("disabled", () => {
+    disabled("calcite-radio-button");
+  });
 
   it("focusing skips over hidden radio-buttons", async () => {
     const page = await newE2EPage();

packages/calcite-components/src/components/rating/rating.e2e.ts

@@ -28,7 +28,9 @@ describe("calcite-rating", () => {
       labelable("calcite-rating");
     });
 
-    it("can be disabled", () => disabled("<calcite-rating value='3'></calcite-rating>"));
+    describe("disabled", () => {
+      disabled("<calcite-rating value='3'></calcite-rating>");
+    });
 
     describe("translation support", () => {
       t9n("calcite-rating");

packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts

@@ -22,15 +22,16 @@ describe("calcite-segmented-control", () => {
     );
   });
 
-  it("can be disabled", () =>
+  describe("disabled", () => {
     disabled(
       html`<calcite-segmented-control>
         <calcite-segmented-control-item value="1"></calcite-segmented-control-item>
         <calcite-segmented-control-item value="2"></calcite-segmented-control-item>
         <calcite-segmented-control-item value="3"></calcite-segmented-control-item>
       </calcite-segmented-control>`,
       { focusTarget: "child" }
-    ));
+    );
+  });
 
   it("sets value from selected item", async () => {
     const page = await newE2EPage();

packages/calcite-components/src/components/select/select.e2e.ts

@@ -63,7 +63,9 @@ describe("calcite-select", () => {
     labelable("calcite-select");
   });
 
-  it("can be disabled", () => disabled("calcite-select"));
+  describe("disabled", () => {
+    disabled("calcite-select");
+  });
 
   describe("flat options", () => {
     it("allows selecting items", async () => {