diff --git a/src/components/action-bar/action-bar.e2e.ts b/src/components/action-bar/action-bar.e2e.ts index cf328a648e8..d2dfd55f156 100755 --- a/src/components/action-bar/action-bar.e2e.ts +++ b/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` @@ -244,7 +244,8 @@ describe("calcite-action-bar", () => { { focusTargetSelector: "calcite-action" } - )); + ); + }); it("has slots", () => slots("calcite-action-bar", SLOTS)); diff --git a/src/components/action-group/action-group.e2e.ts b/src/components/action-group/action-group.e2e.ts index d8f7dfd12f3..2c4c39aa0ac 100755 --- a/src/components/action-group/action-group.e2e.ts +++ b/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"); diff --git a/src/components/action-menu/action-menu.e2e.ts b/src/components/action-menu/action-menu.e2e.ts index 3ac34a2de02..9772822ddbc 100755 --- a/src/components/action-menu/action-menu.e2e.ts +++ b/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` @@ -108,7 +108,8 @@ describe("calcite-action-menu", () => { { focusTargetSelector: `#triggerAction` } - )); + ); + }); it("should close menu if clicked outside", async () => { const page = await newE2EPage({ diff --git a/src/components/action-pad/action-pad.e2e.ts b/src/components/action-pad/action-pad.e2e.ts index 1676346c575..cc24925e649 100755 --- a/src/components/action-pad/action-pad.e2e.ts +++ b/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` @@ -200,7 +200,8 @@ describe("calcite-action-pad", () => { { focusTargetSelector: "calcite-action" } - )); + ); + }); it("has slots", () => slots("calcite-action-pad", SLOTS)); diff --git a/src/components/checkbox/checkbox.e2e.ts b/src/components/checkbox/checkbox.e2e.ts index c6b83ce0cf3..bd7d6112962 100644 --- a/src/components/checkbox/checkbox.e2e.ts +++ b/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" - })); + }); + }); }); diff --git a/src/components/chip/chip.e2e.ts b/src/components/chip/chip.e2e.ts index e305797e8f5..3130f84083e 100644 --- a/src/components/chip/chip.e2e.ts +++ b/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("doritos")); + describe("is focusable when interactive", () => { + focusable("doritos"); + }); it("can be disabled when interactive", () => disabled("doritos")); diff --git a/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts b/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts index ebb2de11bc5..7ac9d33aaa5 100644 --- a/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts +++ b/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(); diff --git a/src/components/color-picker/color-picker.e2e.ts b/src/components/color-picker/color-picker.e2e.ts index ae513243d92..49f5b619849 100644 --- a/src/components/color-picker/color-picker.e2e.ts +++ b/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("", { - shadowFocusTargetSelector: `.${CSS.colorFieldScope}` - })); + describe("should focus scope by default", () => { + focusable("", { + shadowFocusTargetSelector: `.${CSS.colorFieldScope}` + }); }); describe("accessible", () => { diff --git a/src/components/date-picker/date-picker.e2e.ts b/src/components/date-picker/date-picker.e2e.ts index 1d497383dca..d0a55f5a143 100644 --- a/src/components/date-picker/date-picker.e2e.ts +++ b/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; diff --git a/src/components/dropdown-item/dropdown-item.e2e.ts b/src/components/dropdown-item/dropdown-item.e2e.ts index f5d7e26a5e0..c2a8e429233 100644 --- a/src/components/dropdown-item/dropdown-item.e2e.ts +++ b/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(); diff --git a/src/components/dropdown/dropdown.e2e.ts b/src/components/dropdown/dropdown.e2e.ts index 77aa784367e..03335a588a5 100644 --- a/src/components/dropdown/dropdown.e2e.ts +++ b/src/components/dropdown/dropdown.e2e.ts @@ -15,10 +15,11 @@ const simpleDropdownHTML = html` `; describe("calcite-dropdown", () => { - it("focusable", async () => + describe("focusable", () => { focusable(simpleDropdownHTML, { focusTargetSelector: '[slot="trigger"]' - })); + }); + }); describe("renders", () => { renders(simpleDropdownHTML, { display: "inline-flex" }); diff --git a/src/components/filter/filter.e2e.ts b/src/components/filter/filter.e2e.ts index 3bd4751d08b..16b52bc97be 100644 --- a/src/components/filter/filter.e2e.ts +++ b/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")); diff --git a/src/components/flow-item/flow-item.e2e.ts b/src/components/flow-item/flow-item.e2e.ts index a1363a304b3..41ea63c142d 100644 --- a/src/components/flow-item/flow-item.e2e.ts +++ b/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(`test`, { shadowFocusTargetSelector: "calcite-action" - })); + }); + }); it("supports translations", () => t9n("calcite-flow-item")); diff --git a/src/components/input-number/input-number.e2e.ts b/src/components/input-number/input-number.e2e.ts index 6257d8f9892..7fb13c6e0e2 100644 --- a/src/components/input-number/input-number.e2e.ts +++ b/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; diff --git a/src/components/input-text/input-text.e2e.ts b/src/components/input-text/input-text.e2e.ts index e31c002b9b4..62d56ec7926 100644 --- a/src/components/input-text/input-text.e2e.ts +++ b/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: "" }); diff --git a/src/components/input-time-picker/input-time-picker.e2e.ts b/src/components/input-time-picker/input-time-picker.e2e.ts index c687d16e62b..77ae7e1a7f6 100644 --- a/src/components/input-time-picker/input-time-picker.e2e.ts +++ b/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")); diff --git a/src/components/input/input.e2e.ts b/src/components/input/input.e2e.ts index c2503150215..06b9f173f29 100644 --- a/src/components/input/input.e2e.ts +++ b/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; diff --git a/src/components/list-item/list-item.e2e.ts b/src/components/list-item/list-item.e2e.ts index 9179943463b..7cbd722d687 100755 --- a/src/components/list-item/list-item.e2e.ts +++ b/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("", { shadowFocusTargetSelector: `.${CSS.container}` - })); + }); + }); describe("honors hidden attribute", () => { hidden("calcite-list-item"); diff --git a/src/components/list/list.e2e.ts b/src/components/list/list.e2e.ts index 6db5acd3047..212bee8cebd 100755 --- a/src/components/list/list.e2e.ts +++ b/src/components/list/list.e2e.ts @@ -66,7 +66,7 @@ describe("calcite-list", () => { renders("calcite-list", { display: "block" }); }); - it("is focusable", () => + describe("is focusable", () => { focusable( html` @@ -74,7 +74,8 @@ describe("calcite-list", () => { { focusTargetSelector: "calcite-list-item" } - )); + ); + }); describe("honors hidden attribute", () => { hidden("calcite-list"); diff --git a/src/components/modal/modal.e2e.ts b/src/components/modal/modal.e2e.ts index def740ec688..a61aab5e70a 100644 --- a/src/components/modal/modal.e2e.ts +++ b/src/components/modal/modal.e2e.ts @@ -403,15 +403,17 @@ describe("calcite-modal accessibility checks", () => { const focusableContentHTML = html`

Title

This is the content

`; - 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 () => { diff --git a/src/components/notice/notice.e2e.ts b/src/components/notice/notice.e2e.ts index 92839340f57..3899ab2e4bf 100644 --- a/src/components/notice/notice.e2e.ts +++ b/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` ${noticeContent}`, { focusTargetSelector: `calcite-link` - })); + }); + }); - it("when closable => focuses on close button", () => + describe("when closable => focuses on close button", () => { focusable( html`
Title Text
@@ -115,7 +116,8 @@ describe("calcite-notice", () => { { shadowFocusTargetSelector: `.${CSS.close}` } - )); + ); + }); }); it("supports translations", () => t9n("calcite-notice")); diff --git a/src/components/pagination/pagination.e2e.ts b/src/components/pagination/pagination.e2e.ts index abb71673f29..74df77d2910 100644 --- a/src/components/pagination/pagination.e2e.ts +++ b/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('', { 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('', { shadowFocusTargetSelector: `.${CSS.page}` - })); + }); + }); describe("honors hidden attribute", () => { hidden("calcite-pagination"); diff --git a/src/components/panel/panel.e2e.ts b/src/components/panel/panel.e2e.ts index 0c57dd1b691..63c3b1329e3 100644 --- a/src/components/panel/panel.e2e.ts +++ b/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(`test`, { shadowFocusTargetSelector: "calcite-action" - })); + }); + }); - it("should focus on container", async () => + describe("should focus on container", () => { focusable(`test`, { shadowFocusTargetSelector: "article" - })); + }); + }); it("honors calcitePanelScroll event", async () => { const page = await newE2EPage({ diff --git a/src/components/pick-list/shared-list-tests.ts b/src/components/pick-list/shared-list-tests.ts index 2d0608c7fe7..df823dc3097 100644 --- a/src/components/pick-list/shared-list-tests.ts +++ b/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` `, - { - focusId: "filter", - shadowFocusTargetSelector: "calcite-filter" - } - )); + { + focusId: "filter", + shadowFocusTargetSelector: "calcite-filter" + } + ); }); } diff --git a/src/components/popover/popover.e2e.ts b/src/components/popover/popover.e2e.ts index 9bc9b4944a1..69530d9155d 100644 --- a/src/components/popover/popover.e2e.ts +++ b/src/components/popover/popover.e2e.ts @@ -728,14 +728,16 @@ describe("calcite-popover", () => { const contentHTML = "Hello World!"; const buttonContentHTML = ``; - it("should focus content by default", async () => + describe("should focus content by default", () => { focusable(createPopoverHTML(buttonContentHTML), { focusTargetSelector: `.${contentButtonClass}` - })); + }); + }); - it.skip("should focus close button", async () => + describe.skip("should focus close button", () => { focusable(createPopoverHTML(contentHTML, "closable"), { shadowFocusTargetSelector: `.${CSS.closeButton}` - })); + }); + }); }); }); diff --git a/src/components/radio-button/radio-button.e2e.ts b/src/components/radio-button/radio-button.e2e.ts index f4a6d7b86be..4d3fed69233 100644 --- a/src/components/radio-button/radio-button.e2e.ts +++ b/src/components/radio-button/radio-button.e2e.ts @@ -58,10 +58,11 @@ describe("calcite-radio-button", () => { expect(value).toBe("third"); }); - it("is focusable", () => + describe("is focusable", () => { focusable("calcite-radio-button", { shadowFocusTargetSelector: ".container" - })); + }); + }); it("reflects", async () => reflects("calcite-radio-button", [ diff --git a/src/components/rating/rating.e2e.ts b/src/components/rating/rating.e2e.ts index 102736f4df0..23444118f36 100644 --- a/src/components/rating/rating.e2e.ts +++ b/src/components/rating/rating.e2e.ts @@ -30,10 +30,11 @@ describe("calcite-rating", () => { it("supports translations", () => t9n("calcite-rating")); - it("should focus input element in shadow DOM", () => + describe("should focus input element in shadow DOM", () => { focusable("calcite-rating", { shadowFocusTargetSelector: "input" - })); + }); + }); it("focuses the first star when the label is clicked and no-rating value exists", () => labelable("calcite-rating", { diff --git a/src/components/segmented-control/segmented-control.e2e.ts b/src/components/segmented-control/segmented-control.e2e.ts index 7bfd700c1f1..37276380dca 100644 --- a/src/components/segmented-control/segmented-control.e2e.ts +++ b/src/components/segmented-control/segmented-control.e2e.ts @@ -301,7 +301,7 @@ describe("calcite-segmented-control", () => { }); describe("setFocus()", () => { - it("focuses the first item if there is no selection", async () => + describe("focuses the first item if there is no selection", () => { focusable( html` @@ -313,9 +313,10 @@ describe("calcite-segmented-control", () => { { focusTargetSelector: "#child-1" } - )); + ); + }); - it("focuses the selected item", async () => + describe("focuses the selected item", () => { focusable( html` @@ -327,7 +328,8 @@ describe("calcite-segmented-control", () => { { focusTargetSelector: "#child-3" } - )); + ); + }); }); describe("is form-associated", () => { diff --git a/src/components/select/select.e2e.ts b/src/components/select/select.e2e.ts index d7dbff0a97f..81f6abc7b77 100644 --- a/src/components/select/select.e2e.ts +++ b/src/components/select/select.e2e.ts @@ -33,7 +33,9 @@ describe("calcite-select", () => { accessible(simpleTestMarkup); }); - it("is focusable", async () => focusable(simpleTestMarkup)); + describe("is focusable", () => { + focusable(simpleTestMarkup); + }); it("reflects", async () => reflects(simpleTestMarkup, [ diff --git a/src/components/split-button/split-button.e2e.ts b/src/components/split-button/split-button.e2e.ts index f1b1ef8554c..45cabf8ba23 100644 --- a/src/components/split-button/split-button.e2e.ts +++ b/src/components/split-button/split-button.e2e.ts @@ -26,15 +26,16 @@ describe("calcite-split-button", () => { hidden("calcite-split-button"); }); - it("focusable", async () => + describe("focusable", () => { focusable( ` - ${content} - `, + ${content} + `, { shadowFocusTargetSelector: "calcite-button" } - )); + ); + }); describe("accessible", () => { accessible(html` diff --git a/src/components/text-area/text-area.e2e.ts b/src/components/text-area/text-area.e2e.ts index 5ed49b46e57..46f30b8643e 100644 --- a/src/components/text-area/text-area.e2e.ts +++ b/src/components/text-area/text-area.e2e.ts @@ -62,7 +62,9 @@ describe("calcite-text-area", () => { `); }); - it("is focusable", () => focusable("calcite-text-area")); + describe("is focusable", () => { + focusable("calcite-text-area"); + }); describe("is form associated", () => { formAssociated("calcite-text-area", { diff --git a/src/components/tile-select/tile-select.e2e.ts b/src/components/tile-select/tile-select.e2e.ts index fc7edd870a9..23969099c63 100644 --- a/src/components/tile-select/tile-select.e2e.ts +++ b/src/components/tile-select/tile-select.e2e.ts @@ -117,15 +117,17 @@ describe("calcite-tile-select", () => { expect(firstRadioButton).toBeNull(); }); - it("focuses calcite-checkbox when setFocus method is called", async () => + describe("focuses calcite-checkbox when setFocus method is called", () => { focusable(html``, { focusTargetSelector: "calcite-checkbox" - })); + }); + }); - it("focuses calcite-radio-button when setFocus method is called", async () => + describe("focuses calcite-radio-button when setFocus method is called", () => { focusable(html``, { focusTargetSelector: "calcite-radio-button" - })); + }); + }); it("emits change event on checkbox toggle and suppresses internal checkbox change event", async () => { const page = await newE2EPage({ diff --git a/src/components/time-picker/time-picker.e2e.ts b/src/components/time-picker/time-picker.e2e.ts index d76a6ee1dc8..5a749f10053 100644 --- a/src/components/time-picker/time-picker.e2e.ts +++ b/src/components/time-picker/time-picker.e2e.ts @@ -57,15 +57,17 @@ describe("calcite-time-picker", () => { { propertyName: "step", defaultValue: 60 } ])); - it("should focus the first focusable element when setFocus is called (ltr)", async () => + describe("should focus the first focusable element when setFocus is called (ltr)", () => { focusable(`calcite-time-picker`, { shadowFocusTargetSelector: `.${CSS.buttonHourUp}` - })); + }); + }); - it("should focus the first focusable element when setFocus is called (rtl)", async () => + describe("should focus the first focusable element when setFocus is called (rtl)", () => { focusable(``, { shadowFocusTargetSelector: `.${CSS.buttonHourUp}` - })); + }); + }); it("value displays correctly when value is programmatically changed", async () => { const originalValue = "11:00:00"; diff --git a/src/components/value-list-item/value-list-item.e2e.ts b/src/components/value-list-item/value-list-item.e2e.ts index c7362d22bc0..fa2a1111dde 100644 --- a/src/components/value-list-item/value-list-item.e2e.ts +++ b/src/components/value-list-item/value-list-item.e2e.ts @@ -29,7 +29,9 @@ describe("calcite-value-list-item", () => { it("has slots", () => slots("calcite-value-list-item", SLOTS)); - it("is focusable", async () => focusable("calcite-value-list-item")); + describe("is focusable", () => { + focusable("calcite-value-list-item"); + }); it("can be disabled", async () => disabled("calcite-value-list-item")); diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts index 2e1ab6e6e12..bdbef0025e1 100644 --- a/src/tests/commonTests.ts +++ b/src/tests/commonTests.ts @@ -180,7 +180,7 @@ export async function defaults( /** * Helper for asserting that a component is not visible when hidden * - * Note that this helper should be used within a describe block + * Note that this helper should be used within a describe block. * * describe("honors hidden attribute", () => { * hidden("calcite-accordion") @@ -222,30 +222,41 @@ interface FocusableOptions { /** * Helper for asserting that a component is focusable * + * Note that this helper should be used within a describe block. + * + * describe("is focusable", () => { + * focusable(`calcite-input-number`, { shadowFocusTargetSelector: "input" }) + * }); + * * @param {string} componentTagOrHTML - the component tag or HTML markup to test against * @param {FocusableOptions} [options] - additional options for asserting focus */ -export async function focusable(componentTagOrHTML: TagOrHTML, options?: FocusableOptions): Promise { - const page = await simplePageSetup(componentTagOrHTML); - const tag = getTag(componentTagOrHTML); - const element = await page.find(tag); - const focusTargetSelector = options?.focusTargetSelector || tag; - await element.callMethod("setFocus", options?.focusId); // assumes element is FocusableElement - - if (options?.shadowFocusTargetSelector) { - expect( - await page.$eval( - tag, - (element: HTMLElement, selector: string) => element.shadowRoot.activeElement?.matches(selector), - options?.shadowFocusTargetSelector - ) - ).toBe(true); - } +export function focusable(componentTagOrHTML: TagOrHTML, options?: FocusableOptions): void { + it("is focusable", async () => { + const page = await simplePageSetup(componentTagOrHTML); + const tag = getTag(componentTagOrHTML); + const element = await page.find(tag); + const focusTargetSelector = options?.focusTargetSelector || tag; + await element.callMethod("setFocus", options?.focusId); // assumes element is FocusableElement + + if (options?.shadowFocusTargetSelector) { + // eslint-disable-next-line jest/no-conditional-expect + expect( + await page.$eval( + tag, + (element: HTMLElement, selector: string) => element.shadowRoot.activeElement?.matches(selector), + options?.shadowFocusTargetSelector + ) + ).toBe(true); + } - // wait for next frame before checking focus - await page.waitForTimeout(0); + // wait for next frame before checking focus + await page.waitForTimeout(0); - expect(await page.evaluate((selector) => document.activeElement?.matches(selector), focusTargetSelector)).toBe(true); + expect(await page.evaluate((selector) => document.activeElement?.matches(selector), focusTargetSelector)).toBe( + true + ); + }); } /**