test: set up focusable test helper to run a test per use case (#6934)

**Related Issue:** # N/A

## Summary

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

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

@@ -232,7 +232,7 @@ describe("calcite-action-bar", () => {
     `);
   });
 
-  it("should focus on toggle button", async () =>
+  describe("should focus on toggle button", () => {
     focusable(
       html`
         <calcite-action-bar>
@@ -244,7 +244,8 @@ describe("calcite-action-bar", () => {
       {
         focusTargetSelector: "calcite-action"
       }
-    ));
+    );
+  });
 
   it("has slots", () => slots("calcite-action-bar", SLOTS));
 

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

@@ -20,7 +20,9 @@ describe("calcite-action-group", () => {
     renders("calcite-action-group", { display: "flex" });
   });
 
-  it("focusable", async () => focusable(actionGroupHTML, { shadowFocusTargetSelector: "calcite-action" }));
+  describe("focusable", () => {
+    focusable(actionGroupHTML, { shadowFocusTargetSelector: "calcite-action" });
+  });
 
   describe("honors hidden attribute", () => {
     hidden("calcite-action-group");

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

@@ -96,7 +96,7 @@ describe("calcite-action-menu", () => {
     expect(clickSpy).toHaveReceivedEventTimes(1);
   });
 
-  it("should focus on menu button", async () =>
+  describe("should focus on menu button", () => {
     focusable(
       html`
         <calcite-action-menu>
@@ -108,7 +108,8 @@ describe("calcite-action-menu", () => {
       {
         focusTargetSelector: `#triggerAction`
       }
-    ));
+    );
+  });
 
   it("should close menu if clicked outside", async () => {
     const page = await newE2EPage({

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

@@ -188,7 +188,7 @@ describe("calcite-action-pad", () => {
     `);
   });
 
-  it("should focus on toggle button", async () =>
+  describe("should focus on toggle button", () => {
     focusable(
       html`
         <calcite-action-pad>
@@ -200,7 +200,8 @@ describe("calcite-action-pad", () => {
       {
         focusTargetSelector: "calcite-action"
       }
-    ));
+    );
+  });
 
   it("has slots", () => slots("calcite-action-pad", SLOTS));
 

src/components/checkbox/checkbox.e2e.ts

@@ -159,8 +159,9 @@ describe("calcite-checkbox", () => {
     expect(await checked.getProperty("checked")).toBe(true);
   });
 
-  it("is focusable", () =>
+  describe("is focusable", () => {
     focusable("calcite-checkbox", {
       shadowFocusTargetSelector: ".toggle"
-    }));
+    });
+  });
 });

src/components/chip/chip.e2e.ts

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

src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts

@@ -43,7 +43,9 @@ describe("calcite-color-picker-hex-input", () => {
       }
     ]));
 
-  it("can be focused", async () => focusable("calcite-color-picker-hex-input"));
+  describe("can be focused", () => {
+    focusable("calcite-color-picker-hex-input");
+  });
 
   it("supports no color", async () => {
     const page = await newE2EPage();

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

@@ -31,11 +31,10 @@ describe("calcite-color-picker", () => {
 
   afterEach(() => consoleSpy.mockClear());
 
-  describe("is focusable", () => {
-    it("should focus scope by default", async () =>
-      focusable("<calcite-color-picker></calcite-color-picker>", {
-        shadowFocusTargetSelector: `.${CSS.colorFieldScope}`
-      }));
+  describe("should focus scope by default", () => {
+    focusable("<calcite-color-picker></calcite-color-picker>", {
+      shadowFocusTargetSelector: `.${CSS.colorFieldScope}`
+    });
   });
 
   describe("accessible", () => {

src/components/date-picker/date-picker.e2e.ts

@@ -21,10 +21,11 @@ describe("calcite-date-picker", () => {
       }
     ]));
 
-  it("focusable", async () =>
+  describe("focusable", () => {
     focusable("calcite-date-picker", {
       shadowFocusTargetSelector: "calcite-date-picker-month-header"
-    }));
+    });
+  });
 
   const animationDurationInMs = 200;
 

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

@@ -10,7 +10,9 @@ describe("calcite-dropdown-item", () => {
     hidden("calcite-dropdown-item");
   });
 
-  it("can be focused", async () => focusable(`calcite-dropdown-item`));
+  describe("can be focused", () => {
+    focusable(`calcite-dropdown-item`);
+  });
 
   it("should emit calciteDropdownItemSelect", async () => {
     const page = await newE2EPage();

src/components/dropdown/dropdown.e2e.ts

@@ -15,10 +15,11 @@ const simpleDropdownHTML = html`<calcite-dropdown>
 </calcite-dropdown>`;
 
 describe("calcite-dropdown", () => {
-  it("focusable", async () =>
+  describe("focusable", () => {
     focusable(simpleDropdownHTML, {
       focusTargetSelector: '[slot="trigger"]'
-    }));
+    });
+  });
 
   describe("renders", () => {
     renders(simpleDropdownHTML, { display: "inline-flex" });

src/components/filter/filter.e2e.ts

@@ -16,7 +16,9 @@ describe("calcite-filter", () => {
     accessible("calcite-filter");
   });
 
-  it("is focusable", async () => focusable("calcite-filter"));
+  describe("is focused", () => {
+    focusable("calcite-filter");
+  });
 
   it("can be disabled", () => disabled("calcite-filter"));
 

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

@@ -57,10 +57,11 @@ describe("calcite-flow-item", () => {
     `);
   });
 
-  it("should focus on back button", async () =>
+  describe("should focus on back button", () => {
     focusable(`<calcite-flow-item show-back-button>test</calcite-flow-item>`, {
       shadowFocusTargetSelector: "calcite-action"
-    }));
+    });
+  });
 
   it("supports translations", () => t9n("calcite-flow-item"));
 

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

@@ -190,10 +190,11 @@ describe("calcite-input-number", () => {
     expect(numberHorizontalItemUp).toBeNull();
   });
 
-  it("is focusable", async () =>
+  describe("is focusable", () => {
     focusable(`calcite-input-number`, {
       shadowFocusTargetSelector: "input"
-    }));
+    });
+  });
 
   describe("increment/decrement functionality", () => {
     let page: E2EPage;

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

@@ -78,10 +78,11 @@ describe("calcite-input-text", () => {
     expect(icon).toBeNull();
   });
 
-  it("is focusable", async () =>
+  describe("is focusable", () => {
     focusable(`calcite-input-text`, {
       shadowFocusTargetSelector: "input"
-    }));
+    });
+  });
 
   it("does not fire any input or change events when a focused input is blurred after its value is set directly", async () => {
     const page = await newE2EPage({ html: "<calcite-input-text></calcite-input-text>" });

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

@@ -52,10 +52,11 @@ describe("calcite-input-time-picker", () => {
 
   it("is labelable", async () => labelable("calcite-input-time-picker"));
 
-  it("should focus the input when setFocus is called", async () =>
+  describe("should focus the input when setFocus is called", () => {
     focusable(`calcite-input-time-picker`, {
       shadowFocusTargetSelector: "calcite-input"
-    }));
+    });
+  });
 
   it("can be disabled", () => disabled("calcite-input-time-picker"));
 

src/components/input/input.e2e.ts

@@ -214,10 +214,11 @@ describe("calcite-input", () => {
     expect(numberHorizontalItemUp).toBeNull();
   });
 
-  it("is focusable", async () =>
+  describe("is focusable", () => {
     focusable(`calcite-input`, {
       shadowFocusTargetSelector: "input"
-    }));
+    });
+  });
 
   describe("input type number increment/decrement functionality", () => {
     let page: E2EPage;

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

@@ -7,10 +7,11 @@ describe("calcite-list-item", () => {
     renders("calcite-list-item", { display: "flex" });
   });
 
-  it("is focusable", () =>
+  describe("is focusable", () => {
     focusable("<calcite-list-item active></calcite-list-item>", {
       shadowFocusTargetSelector: `.${CSS.container}`
-    }));
+    });
+  });
 
   describe("honors hidden attribute", () => {
     hidden("calcite-list-item");

src/components/list/list.e2e.ts

@@ -66,15 +66,16 @@ describe("calcite-list", () => {
     renders("calcite-list", { display: "block" });
   });
 
-  it("is focusable", () =>
+  describe("is focusable", () => {
     focusable(
       html`<calcite-list>
         <calcite-list-item active label="test" description="hello world"></calcite-list-item>
       </calcite-list>`,
       {
         focusTargetSelector: "calcite-list-item"
       }
-    ));
+    );
+  });
 
   describe("honors hidden attribute", () => {
     hidden("calcite-list");

src/components/modal/modal.e2e.ts

@@ -403,15 +403,17 @@ describe("calcite-modal accessibility checks", () => {
     const focusableContentHTML = html`<h3 slot="header">Title</h3>
       <p slot="content">This is the content <button class=${focusableContentTargetClass}>test</button></p>`;
 
-    it("focuses close button by default", async () =>
+    describe("focuses close button by default", () => {
       focusable(createModalHTML(focusableContentHTML), {
         shadowFocusTargetSelector: closeButtonTargetSelector
-      }));
+      });
+    });
 
-    it("focuses content if there is no close button", async () =>
+    describe("focuses content if there is no close button", () => {
       focusable(createModalHTML(focusableContentHTML, "close-button-disabled"), {
         focusTargetSelector: `.${focusableContentTargetClass}`
-      }));
+      });
+    });
   });
 
   it("has correct aria role/attribute", async () => {

src/components/notice/notice.e2e.ts

@@ -101,12 +101,13 @@ describe("calcite-notice", () => {
   });
 
   describe("focusable", () => {
-    it("with link and closable => focuses on link", () =>
+    describe("with link and closable => focuses on link", () => {
       focusable(html` <calcite-notice id="notice-1" open closable> ${noticeContent}</calcite-notice>`, {
         focusTargetSelector: `calcite-link`
-      }));
+      });
+    });
 
-    it("when closable => focuses on close button", () =>
+    describe("when closable => focuses on close button", () => {
       focusable(
         html` <calcite-notice id="notice-1" open closable>
           <div slot="title">Title Text</div>
@@ -115,7 +116,8 @@ describe("calcite-notice", () => {
         {
           shadowFocusTargetSelector: `.${CSS.close}`
         }
-      ));
+      );
+    });
   });
 
   it("supports translations", () => t9n("calcite-notice"));

src/components/pagination/pagination.e2e.ts

@@ -8,15 +8,17 @@ describe("calcite-pagination", () => {
     renders("calcite-pagination", { display: "flex" });
   });
 
-  it("focuses previous button when not on the first page", async () =>
+  describe("focuses previous button when not on the first page", () => {
     focusable('<calcite-pagination page-size="1" start-item="2" total-items="10"></calcite-pagination>', {
       shadowFocusTargetSelector: `.${CSS.previous}`
-    }));
+    });
+  });
 
-  it("focuses page number 1 when on the first page", async () =>
+  describe("focuses page number 1 when on the first page", () => {
     focusable('<calcite-pagination page-size="1" start-item="1" total-items="10"></calcite-pagination>', {
       shadowFocusTargetSelector: `.${CSS.page}`
-    }));
+    });
+  });
 
   describe("honors hidden attribute", () => {
     hidden("calcite-pagination");

src/components/panel/panel.e2e.ts

@@ -92,15 +92,17 @@ describe("calcite-panel", () => {
     `);
   });
 
-  it("should focus on close button )", async () =>
+  describe("should focus on close button", () => {
     focusable(`<calcite-panel closable>test</calcite-panel>`, {
       shadowFocusTargetSelector: "calcite-action"
-    }));
+    });
+  });
 
-  it("should focus on container", async () =>
+  describe("should focus on container", () => {
     focusable(`<calcite-panel>test</calcite-panel>`, {
       shadowFocusTargetSelector: "article"
-    }));
+    });
+  });
 
   it("honors calcitePanelScroll event", async () => {
     const page = await newE2EPage({

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

@@ -609,20 +609,20 @@ export function itemRemoval(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 focusing(listType: ListType): void {
-  describe("when setFocus method is called", () => {
-    it("should focus filter", () =>
-      focusable(
-        html`
+  describe("should focus filter when setFocus method is called", () => {
+    focusable(
+      html`
         <calcite-${listType}-list filter-enabled>
           <calcite-${listType}-list-item label="Sample" value="one"></calcite-${listType}-list-item>
         </calcite-${listType}-list>
       `,
-        {
-          focusId: "filter",
-          shadowFocusTargetSelector: "calcite-filter"
-        }
-      ));
+      {
+        focusId: "filter",
+        shadowFocusTargetSelector: "calcite-filter"
+      }
+    );
   });
 }