diff --git a/packages/calcite-components/src/components/action/action.e2e.ts b/packages/calcite-components/src/components/action/action.e2e.ts index 902614c8e90..41266274735 100755 --- a/packages/calcite-components/src/components/action/action.e2e.ts +++ b/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); diff --git a/packages/calcite-components/src/components/block/block.e2e.ts b/packages/calcite-components/src/components/block/block.e2e.ts index dd4934e0b42..1d0b9dc8954 100644 --- a/packages/calcite-components/src/components/block/block.e2e.ts +++ b/packages/calcite-components/src/components/block/block.e2e.ts @@ -43,8 +43,9 @@ describe("calcite-block", () => { `); }); - it("can be disabled", () => - disabled(html``)); + describe("disabled", () => { + disabled(html``); + }); it("has a loading state", async () => { const page = await newE2EPage({ diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts index d2f99543171..ddaf316512b 100644 --- a/packages/calcite-components/src/components/button/button.e2e.ts +++ b/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: `Continue` }); diff --git a/packages/calcite-components/src/components/checkbox/checkbox.e2e.ts b/packages/calcite-components/src/components/checkbox/checkbox.e2e.ts index c4b4a3f3312..6490f4c0556 100644 --- a/packages/calcite-components/src/components/checkbox/checkbox.e2e.ts +++ b/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(); diff --git a/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts b/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts index 8738b09b00b..f4ec65eec7d 100644 --- a/packages/calcite-components/src/components/chip-group/chip-group.e2e.ts +++ b/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("", { focusTarget: "child" - })); + }); + }); describe("is accessible in selection mode none (default)", () => { accessible( diff --git a/packages/calcite-components/src/components/chip/chip.e2e.ts b/packages/calcite-components/src/components/chip/chip.e2e.ts index ee6c5c4f047..0bea3df3d3b 100644 --- a/packages/calcite-components/src/components/chip/chip.e2e.ts +++ b/packages/calcite-components/src/components/chip/chip.e2e.ts @@ -23,7 +23,9 @@ describe("calcite-chip", () => { focusable("doritos"); }); - it("can be disabled when interactive", () => disabled("doritos")); + describe("can be disabled when interactive", () => { + disabled("doritos"); + }); it("should not emit event after the chip is clicked if interactive if not set", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts index d046834c932..cf722467fd7 100644 --- a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts +++ b/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("")); + describe("disabled", () => { + disabled(""); + }); describe("translation support", () => { t9n(""); diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts index ce5b722cc8c..6402ca27746 100644 --- a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts +++ b/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" }); + }); }); diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index ae7c5c293b7..60471a02faa 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/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({ diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.e2e.ts b/packages/calcite-components/src/components/date-picker-day/date-picker-day.e2e.ts index 4cde755b3b8..ff7f711402f 100644 --- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.e2e.ts +++ b/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", () => { diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts index 6bb6174ddf0..a0f123aa7e2 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts +++ b/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 { /** diff --git a/packages/calcite-components/src/components/fab/fab.e2e.ts b/packages/calcite-components/src/components/fab/fab.e2e.ts index 8ae872440ae..d632a981033 100755 --- a/packages/calcite-components/src/components/fab/fab.e2e.ts +++ b/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({ diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts index aec61bf27f3..3b728e43050 100644 --- a/packages/calcite-components/src/components/filter/filter.e2e.ts +++ b/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", [ diff --git a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts index e188802b69e..9a69c9c3461 100644 --- a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts +++ b/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(`scrolling content`)); + describe("disabled", () => { + disabled(`scrolling content`); + }); describe("accessible", () => { accessible(` diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts b/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts index 77ba9764afb..b18807ecbc5 100644 --- a/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts +++ b/packages/calcite-components/src/components/inline-editable/inline-editable.e2e.ts @@ -19,7 +19,7 @@ describe("calcite-inline-editable", () => { hidden("calcite-inline-editable"); }); - it("can be disabled", () => + describe("disabled", () => { disabled( html` @@ -27,7 +27,8 @@ describe("calcite-inline-editable", () => { `, { focusTarget: { tab: "calcite-inline-editable", click: "calcite-input" } } - )); + ); + }); describe("rendering permutations", () => { let page: E2EPage; diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts index 5c721ab68ee..a8df2a9f218 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts +++ b/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")); diff --git a/packages/calcite-components/src/components/input-number/input-number.e2e.ts b/packages/calcite-components/src/components/input-number/input-number.e2e.ts index 74b66aac61d..8a39db66f00 100644 --- a/packages/calcite-components/src/components/input-number/input-number.e2e.ts +++ b/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(); diff --git a/packages/calcite-components/src/components/input-text/input-text.e2e.ts b/packages/calcite-components/src/components/input-text/input-text.e2e.ts index 7222cbfa91c..7bd52a2b49e 100644 --- a/packages/calcite-components/src/components/input-text/input-text.e2e.ts +++ b/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(); diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts index 405aa452a00..dca309635f3 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts +++ b/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(); diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts index 0d488c59625..b7a67aaa485 100644 --- a/packages/calcite-components/src/components/input/input.e2e.ts +++ b/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(); diff --git a/packages/calcite-components/src/components/link/link.e2e.ts b/packages/calcite-components/src/components/link/link.e2e.ts index df1bf07e3e8..1a5577f70d3 100644 --- a/packages/calcite-components/src/components/link/link.e2e.ts +++ b/packages/calcite-components/src/components/link/link.e2e.ts @@ -25,7 +25,9 @@ describe("calcite-link", () => { accessible("Go"); }); - it("can be disabled", () => disabled(`link`)); + describe("disabled", () => { + disabled(`link`); + }); it("sets download attribute on internal anchor", async () => { const page = await newE2EPage(); 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 index 4aa916a33b3..ea54ae52403 100644 --- 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 @@ -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", [ diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts index db78530ddae..3f4561d505e 100755 --- a/packages/calcite-components/src/components/list-item/list-item.e2e.ts +++ b/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(``)); + describe("disabled", () => { + disabled(``); + }); it("renders content node when label is provided", async () => { const page = await newE2EPage({ html: `` }); diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index c05574f4285..09889c18a01 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -96,13 +96,14 @@ describe("calcite-list", () => { `); }); - it("can be disabled", () => + describe("disabled", () => { disabled( html` `, { focusTarget: "child" } - )); + ); + }); it.skip("navigating items after filtering", async () => { const page = await newE2EPage({ diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts index 6ede6820603..bd978bb66ce 100644 --- a/packages/calcite-components/src/components/panel/panel.e2e.ts +++ b/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(`scrolling content`)); + describe("disabled", () => { + disabled(`scrolling content`); + }); describe("translation support", () => { t9n("calcite-panel"); diff --git a/packages/calcite-components/src/components/pick-list-item/pick-list-item.e2e.ts b/packages/calcite-components/src/components/pick-list-item/pick-list-item.e2e.ts index 47953e9e91d..e167c9f70de 100644 --- a/packages/calcite-components/src/components/pick-list-item/pick-list-item.e2e.ts +++ b/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"); diff --git a/packages/calcite-components/src/components/pick-list/shared-list-tests.ts b/packages/calcite-components/src/components/pick-list/shared-list-tests.ts index df823dc3097..015a76bdf73 100644 --- a/packages/calcite-components/src/components/pick-list/shared-list-tests.ts +++ b/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` @@ -637,5 +638,6 @@ export function disabling(listType: ListType): void { { focusTarget: "child" } - )); + ); + }); } diff --git a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts b/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts index 0b62988f31b..912cc02b89b 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.e2e.ts +++ b/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(); diff --git a/packages/calcite-components/src/components/rating/rating.e2e.ts b/packages/calcite-components/src/components/rating/rating.e2e.ts index c6508350b65..953f8b26ded 100644 --- a/packages/calcite-components/src/components/rating/rating.e2e.ts +++ b/packages/calcite-components/src/components/rating/rating.e2e.ts @@ -28,7 +28,9 @@ describe("calcite-rating", () => { labelable("calcite-rating"); }); - it("can be disabled", () => disabled("")); + describe("disabled", () => { + disabled(""); + }); describe("translation support", () => { t9n("calcite-rating"); diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts b/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts index 7b755e62caf..a8ff7356ef5 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts @@ -22,7 +22,7 @@ describe("calcite-segmented-control", () => { ); }); - it("can be disabled", () => + describe("disabled", () => { disabled( html` @@ -30,7 +30,8 @@ describe("calcite-segmented-control", () => { `, { focusTarget: "child" } - )); + ); + }); it("sets value from selected item", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/select/select.e2e.ts b/packages/calcite-components/src/components/select/select.e2e.ts index 2afd6a0983d..76fae872e34 100644 --- a/packages/calcite-components/src/components/select/select.e2e.ts +++ b/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 () => { diff --git a/packages/calcite-components/src/components/slider/slider.e2e.ts b/packages/calcite-components/src/components/slider/slider.e2e.ts index 7e8ba27701c..ed8733a1bbc 100644 --- a/packages/calcite-components/src/components/slider/slider.e2e.ts +++ b/packages/calcite-components/src/components/slider/slider.e2e.ts @@ -64,7 +64,9 @@ describe("calcite-slider", () => { labelable("calcite-slider"); }); - it("can be disabled", () => disabled("calcite-slider")); + describe("disabled", () => { + disabled("calcite-slider"); + }); it("sets aria attributes properly for single value", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/sortable-list/sortable-list.e2e.ts b/packages/calcite-components/src/components/sortable-list/sortable-list.e2e.ts index da8767de49d..18e6b1a5806 100644 --- a/packages/calcite-components/src/components/sortable-list/sortable-list.e2e.ts +++ b/packages/calcite-components/src/components/sortable-list/sortable-list.e2e.ts @@ -16,7 +16,7 @@ describe("calcite-sortable-list", () => { accessible(``); }); - it("can be disabled", () => + describe("disabled", () => { disabled( html`
1
@@ -24,7 +24,8 @@ describe("calcite-sortable-list", () => {
3
`, { focusTarget: "child" } - )); + ); + }); const worksUsingMouse = async (page: E2EPage): Promise => { await dragAndDrop(page, `#one calcite-handle`, `#two calcite-handle`); diff --git a/packages/calcite-components/src/components/split-button/split-button.e2e.ts b/packages/calcite-components/src/components/split-button/split-button.e2e.ts index 1b7ea592b96..c0d04674a86 100644 --- a/packages/calcite-components/src/components/split-button/split-button.e2e.ts +++ b/packages/calcite-components/src/components/split-button/split-button.e2e.ts @@ -72,7 +72,9 @@ describe("calcite-split-button", () => { `); }); - it("can be disabled", () => disabled("calcite-split-button")); + describe("disabled", () => { + disabled("calcite-split-button"); + }); it("renders default props when none are provided", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts b/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts index eae8648d657..21241c2116d 100644 --- a/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts +++ b/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts @@ -9,5 +9,7 @@ describe("calcite-stepper-item", () => { hidden("calcite-stepper-item"); }); - it("can be disabled", () => disabled("calcite-stepper-item")); + describe("disabled", () => { + disabled("calcite-stepper-item"); + }); }); diff --git a/packages/calcite-components/src/components/switch/switch.e2e.ts b/packages/calcite-components/src/components/switch/switch.e2e.ts index c531fde612d..3d764bb6d1b 100644 --- a/packages/calcite-components/src/components/switch/switch.e2e.ts +++ b/packages/calcite-components/src/components/switch/switch.e2e.ts @@ -32,7 +32,9 @@ describe("calcite-switch", () => { formAssociated("calcite-switch", { testValue: true, inputType: "checkbox" }); }); - it("can be disabled", () => disabled("calcite-switch")); + describe("disabled", () => { + disabled("calcite-switch"); + }); it("toggles the checked attributes appropriately when clicked", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts index 2c14eba1d28..8b638df1ff3 100644 --- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts +++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts @@ -49,7 +49,9 @@ describe("calcite-tab-title", () => { hidden("calcite-tab-title"); }); - it("can be disabled", () => disabled("")); + describe("disabled", () => { + disabled(""); + }); it("renders with an icon-start", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/text-area/text-area.e2e.ts b/packages/calcite-components/src/components/text-area/text-area.e2e.ts index d941cb01bd9..2392840471c 100644 --- a/packages/calcite-components/src/components/text-area/text-area.e2e.ts +++ b/packages/calcite-components/src/components/text-area/text-area.e2e.ts @@ -40,7 +40,9 @@ describe("calcite-text-area", () => { labelable("calcite-text-area"); }); - it("can be disabled", () => disabled("calcite-text-area")); + describe("disabled", () => { + disabled("calcite-text-area"); + }); describe("reflects", () => { reflects("calcite-text-area", [ diff --git a/packages/calcite-components/src/components/tile-select-group/tile-select-group.e2e.ts b/packages/calcite-components/src/components/tile-select-group/tile-select-group.e2e.ts index d8b22202842..a5106244f86 100644 --- a/packages/calcite-components/src/components/tile-select-group/tile-select-group.e2e.ts +++ b/packages/calcite-components/src/components/tile-select-group/tile-select-group.e2e.ts @@ -22,7 +22,7 @@ describe("calcite-tile-select-group", () => { reflects("calcite-tile-select-group", [{ propertyName: "layout", value: "horizontal" }]); }); - it("can be disabled", () => + describe("disabled", () => { disabled( html` @@ -30,5 +30,6 @@ describe("calcite-tile-select-group", () => { `, { focusTarget: "child" } - )); + ); + }); }); diff --git a/packages/calcite-components/src/components/tile-select/tile-select.e2e.ts b/packages/calcite-components/src/components/tile-select/tile-select.e2e.ts index fafddbb6b07..39139bff133 100644 --- a/packages/calcite-components/src/components/tile-select/tile-select.e2e.ts +++ b/packages/calcite-components/src/components/tile-select/tile-select.e2e.ts @@ -40,13 +40,14 @@ describe("calcite-tile-select", () => { hidden("calcite-tile-select"); }); - it("can be disabled", () => + describe("disabled", () => { disabled( "calcite-tile-select", /* focusing on child since tile appends to light DOM */ { focusTarget: "child" } - )); + ); + }); it("renders a calcite-tile", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/tile/tile.e2e.ts b/packages/calcite-components/src/components/tile/tile.e2e.ts index dffa54de053..d95a7d81f02 100644 --- a/packages/calcite-components/src/components/tile/tile.e2e.ts +++ b/packages/calcite-components/src/components/tile/tile.e2e.ts @@ -39,7 +39,9 @@ describe("calcite-tile", () => { ]); }); - it("can be disabled", () => disabled("")); + describe("disabled", () => { + disabled(""); + }); it("renders without a link by default", async () => { const page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts index a577b9b3ec3..580a4c26b58 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts +++ b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts @@ -1,4 +1,4 @@ -import { newE2EPage } from "@stencil/core/testing"; +import { E2EPage, newE2EPage } from "@stencil/core/testing"; import { accessible, defaults, disabled, hidden, renders, slots } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { SLOTS } from "./resources"; @@ -62,13 +62,20 @@ describe("calcite-tree-item", () => { slots("calcite-tree-item", SLOTS); }); - it("can be disabled (within a tree)", async () => { - const page = await newE2EPage(); - await page.setContent(html` - 😃 - `); + describe("disabled within a tree", () => { + let page: E2EPage; + + beforeEach(async () => { + page = await newE2EPage(); + await page.setContent(html` + + 😃 + + `); + await page.waitForChanges(); + }); - await disabled({ page, tag: "calcite-tree-item" }); + disabled(() => ({ tag: "calcite-tree-item", page })); }); it("should expand/collapse children when the icon is clicked, but not select/deselect group", async () => { diff --git a/packages/calcite-components/src/components/value-list-item/value-list-item.e2e.ts b/packages/calcite-components/src/components/value-list-item/value-list-item.e2e.ts index e8a938cdc2e..85fc83bb115 100644 --- a/packages/calcite-components/src/components/value-list-item/value-list-item.e2e.ts +++ b/packages/calcite-components/src/components/value-list-item/value-list-item.e2e.ts @@ -35,7 +35,9 @@ describe("calcite-value-list-item", () => { focusable("calcite-value-list-item"); }); - it("can be disabled", async () => disabled("calcite-value-list-item")); + describe("disabled", () => { + disabled("calcite-value-list-item"); + }); it("should toggle selected attribute when clicked", async () => { const page = await newE2EPage({ html: `` }); diff --git a/packages/calcite-components/src/tests/commonTests.ts b/packages/calcite-components/src/tests/commonTests.ts index 7a09e36649a..c88d393ed79 100644 --- a/packages/calcite-components/src/tests/commonTests.ts +++ b/packages/calcite-components/src/tests/commonTests.ts @@ -1,4 +1,5 @@ -/* eslint-disable jest/no-export -- util functions are now imported to be used as `it` blocks within `describe` instead of assertions within `it` blocks */ +/* eslint-disable jest/no-conditional-expect -- Using conditional logic in a confined test helper to handle specific scenarios, reducing duplication, balancing test readability and maintainability. **/ +/* eslint-disable jest/no-export -- Util functions are now imported to be used as `it` blocks within `describe` instead of assertions within `it` blocks. */ import { E2EElement, E2EPage, EventSpy, newE2EPage } from "@stencil/core/testing"; import axe from "axe-core"; import { toHaveNoViolations } from "jest-axe"; @@ -159,13 +160,11 @@ export function reflects( element.setProperty(propertyName, negated); await page.waitForChanges(); - // eslint-disable-next-line jest/no-conditional-expect expect(element.getAttribute(attrName)).toBe(getExpectedValue(negated)); element.setProperty(propertyName, value); await page.waitForChanges(); - // eslint-disable-next-line jest/no-conditional-expect expect(element.getAttribute(attrName)).toBe(getExpectedValue(value)); } } @@ -284,7 +283,6 @@ export function focusable(componentTagOrHTML: TagOrHTML, options?: FocusableOpti 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, @@ -370,10 +368,6 @@ export function slots( return defaultSlotted.assignedSlot?.name === "" && defaultSlotted.slot === ""; }); - /* 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); } }); @@ -916,45 +910,39 @@ async function getTagAndPage(componentTestSetup: ComponentTestSetup): Promise { + * disabled("calcite-input") + * }); + * + * @param {ComponentTestSetup} componentTestSetup - A component tag, html, or the tag and e2e page for setting up a test. + * @param {DisabledOptions} [options={ focusTarget: "host" }] - Disabled options. */ -export async function disabled( +export function disabled( componentTestSetup: ComponentTestSetup, options: DisabledOptions = { focusTarget: "host" } -): Promise { - const { page, tag } = await getTagAndPage(componentTestSetup); - - const component = await page.find(tag); - await skipAnimations(page); - await page.$eval(tag, (el) => { - el.addEventListener( - "click", - (event) => { - const path = event.composedPath() as HTMLElement[]; - const anchor = path.find((el) => el?.tagName === "A"); - - if (anchor) { - // we prevent the default behavior to avoid a page redirect - anchor.addEventListener("click", (event) => event.preventDefault(), { once: true }); - } - }, - true - ); - }); - - // only testing events from https://github.com/web-platform-tests/wpt/blob/master/html/semantics/disabled-elements/event-propagate-disabled.tentative.html#L66 - const eventsExpectedToBubble = ["mousemove", "pointermove", "pointerdown", "pointerup"]; - const eventsExpectedToNotBubble = ["mousedown", "mouseup", "click"]; - const allExpectedEvents = [...eventsExpectedToBubble, ...eventsExpectedToNotBubble]; - - const eventSpies: EventSpy[] = []; - - for (const event of allExpectedEvents) { - eventSpies.push(await component.spyOnEvent(event)); - } +): void { + const addRedirectPrevention = async (page: E2EPage, tag: string): Promise => { + await page.$eval(tag, (el) => { + el.addEventListener( + "click", + (event) => { + const path = event.composedPath() as HTMLElement[]; + const anchor = path.find((el) => el?.tagName === "A"); + + if (anchor) { + // we prevent the default behavior to avoid a page redirect + anchor.addEventListener("click", (event) => event.preventDefault(), { once: true }); + } + }, + true + ); + }); + }; - async function expectToBeFocused(tag: string): Promise { + async function expectToBeFocused(page: E2EPage, tag: string): Promise { const focusedTag = await page.evaluate(() => document.activeElement?.tagName.toLowerCase()); expect(focusedTag).toBe(tag); } @@ -965,125 +953,158 @@ export async function disabled( } } - expect(component.getAttribute("aria-disabled")).toBeNull(); + // only testing events from https://github.com/web-platform-tests/wpt/blob/master/html/semantics/disabled-elements/event-propagate-disabled.tentative.html#L66 + const eventsExpectedToBubble = ["mousemove", "pointermove", "pointerdown", "pointerup"]; + const eventsExpectedToNotBubble = ["mousedown", "mouseup", "click"]; + const allExpectedEvents = [...eventsExpectedToBubble, ...eventsExpectedToNotBubble]; - if (options.focusTarget === "none") { - await page.click(tag); - await expectToBeFocused("body"); + const createEventSpiesForExpectedEvents = async (component: E2EElement): Promise => { + const eventSpies: EventSpy[] = []; - assertOnMouseAndPointerEvents(eventSpies, (spy) => expect(spy).toHaveReceivedEventTimes(1)); + for (const event of allExpectedEvents) { + eventSpies.push(await component.spyOnEvent(event)); + } - component.setProperty("disabled", true); - await page.waitForChanges(); + return eventSpies; + }; - expect(component.getAttribute("aria-disabled")).toBe("true"); + async function getFocusTarget(page: E2EPage, tag: string, focusTarget: FocusTarget): Promise { + return focusTarget === "host" ? tag : await page.evaluate(() => document.activeElement?.tagName.toLowerCase()); + } - await page.click(tag); - await expectToBeFocused("body"); + const getTabAndClickFocusTarget = async (page: E2EPage, tag: string): Promise => { + const focusTarget = options.focusTarget; + const focusTargetString = await getFocusTarget(page, tag, focusTarget as FocusTarget); - await component.callMethod("click"); - await expectToBeFocused("body"); + const [tabFocusTarget, clickFocusTarget] = + typeof focusTarget === "object" ? [focusTarget.tab, focusTarget.click] : [focusTargetString, focusTargetString]; - assertOnMouseAndPointerEvents(eventSpies, (spy) => - expect(spy).toHaveReceivedEventTimes(eventsExpectedToBubble.includes(spy.eventName) ? 2 : 1) - ); + return [tabFocusTarget, clickFocusTarget]; + }; - return; - } + const getShadowFocusableCenterCoordinates = async (page: E2EPage, tabFocusTarget: string): Promise => { + return await page.$eval(tabFocusTarget, (element: HTMLElement) => { + const focusTarget = element.shadowRoot.activeElement || element; + const rect = focusTarget.getBoundingClientRect(); - async function getFocusTarget(focusTarget: FocusTarget): Promise { - return focusTarget === "host" ? tag : await page.evaluate(() => document.activeElement?.tagName.toLowerCase()); - } + return [rect.x + rect.width / 2, rect.y + rect.height / 2]; + }); + }; - await page.keyboard.press("Tab"); + it("prevents focusing via keyboard and mouse", async () => { + const { page, tag } = await getTagAndPage(componentTestSetup); - let tabFocusTarget: string; - let clickFocusTarget: string; + const component = await page.find(tag); + await skipAnimations(page); + await addRedirectPrevention(page, tag); - if (typeof options.focusTarget === "object") { - tabFocusTarget = options.focusTarget.tab; - clickFocusTarget = options.focusTarget.click; - } else { - tabFocusTarget = clickFocusTarget = await getFocusTarget(options.focusTarget); - } + const eventSpies = await createEventSpiesForExpectedEvents(component); - expect(tabFocusTarget).not.toBe("body"); - await expectToBeFocused(tabFocusTarget); + expect(component.getAttribute("aria-disabled")).toBeNull(); - const [shadowFocusableCenterX, shadowFocusableCenterY] = await page.$eval(tabFocusTarget, (element: HTMLElement) => { - const focusTarget = element.shadowRoot.activeElement || element; - const rect = focusTarget.getBoundingClientRect(); + if (options.focusTarget === "none") { + await page.click(tag); + await expectToBeFocused(page, "body"); - return [rect.x + rect.width / 2, rect.y + rect.height / 2]; - }); + assertOnMouseAndPointerEvents(eventSpies, (spy) => expect(spy).toHaveReceivedEventTimes(1)); - async function resetFocusOrder(): Promise { - // test page has default margin, so clicking on 0,0 will not hit the test element - await page.mouse.click(0, 0); - } + component.setProperty("disabled", true); + await page.waitForChanges(); - await resetFocusOrder(); - await expectToBeFocused("body"); + expect(component.getAttribute("aria-disabled")).toBe("true"); - await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); - await expectToBeFocused(clickFocusTarget); + await page.click(tag); + await expectToBeFocused(page, "body"); - await component.callMethod("click"); - await expectToBeFocused(clickFocusTarget); + await component.callMethod("click"); + await expectToBeFocused(page, "body"); - assertOnMouseAndPointerEvents(eventSpies, (spy) => { - if (spy.eventName === "click") { - // some components emit more than one click event (e.g., from calling `click()`), - // so we check if at least one event is received - expect(spy.length).toBeGreaterThanOrEqual(2); - } else { - expect(spy).toHaveReceivedEventTimes(1); + assertOnMouseAndPointerEvents(eventSpies, (spy) => { + expect(spy).toHaveReceivedEventTimes(eventsExpectedToBubble.includes(spy.eventName) ? 2 : 1); + }); + + return; } - }); - component.setProperty("disabled", true); - await page.waitForChanges(); + await page.keyboard.press("Tab"); - expect(component.getAttribute("aria-disabled")).toBe("true"); + const [tabFocusTarget, clickFocusTarget] = await getTabAndClickFocusTarget(page, tag); - await resetFocusOrder(); - await page.keyboard.press("Tab"); - await expectToBeFocused("body"); + expect(tabFocusTarget).not.toBe("body"); + await expectToBeFocused(page, tabFocusTarget); - await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); - await expectToBeFocused("body"); + const [shadowFocusableCenterX, shadowFocusableCenterY] = await getShadowFocusableCenterCoordinates( + page, + tabFocusTarget + ); - assertOnMouseAndPointerEvents(eventSpies, (spy) => { - if (spy.eventName === "click") { - // some components emit more than one click event (e.g., from calling `click()`), - // so we check if at least one event is received - expect(spy.length).toBeGreaterThanOrEqual(2); - } else { - expect(spy).toHaveReceivedEventTimes(eventsExpectedToBubble.includes(spy.eventName) ? 2 : 1); + async function resetFocusOrder(): Promise { + // test page has default margin, so clicking on 0,0 will not hit the test element + await page.mouse.click(0, 0); } + + await resetFocusOrder(); + await expectToBeFocused(page, "body"); + + await page.mouse.click(shadowFocusableCenterX, shadowFocusableCenterY); + await expectToBeFocused(page, clickFocusTarget); + + await component.callMethod("click"); + await expectToBeFocused(page, clickFocusTarget); + + assertOnMouseAndPointerEvents(eventSpies, (spy) => { + if (spy.eventName === "click") { + // some components emit more than one click event (e.g., from calling `click()`), + // so we check if at least one event is received + expect(spy.length).toBeGreaterThanOrEqual(2); + } else { + expect(spy).toHaveReceivedEventTimes(1); + } + }); }); - // this needs to run in the browser context to ensure disabling and events fire immediately after being set - await page.$eval( - tag, - (component: InteractiveHTMLElement, allExpectedEvents: string[]) => { - component.disabled = false; - allExpectedEvents.forEach((event) => component.dispatchEvent(new MouseEvent(event))); - - component.disabled = true; - allExpectedEvents.forEach((event) => component.dispatchEvent(new MouseEvent(event))); - }, - allExpectedEvents - ); - - assertOnMouseAndPointerEvents(eventSpies, (spy) => { - if (spy.eventName === "click") { - // some components emit more than one click event (e.g., from calling `click()`), - // so we check if at least one event is received - expect(spy.length).toBeGreaterThanOrEqual(3); - } else { - expect(spy).toHaveReceivedEventTimes(eventsExpectedToBubble.includes(spy.eventName) ? 4 : 2); - } + it("events are no longer blocked right after enabling", async () => { + const { page, tag } = await getTagAndPage(componentTestSetup); + + const component = await page.find(tag); + await skipAnimations(page); + await addRedirectPrevention(page, tag); + + const eventSpies = await createEventSpiesForExpectedEvents(component); + + component.setProperty("disabled", true); + await page.waitForChanges(); + + expect(component.getAttribute("aria-disabled")).toBe("true"); + + await page.click(tag); + + assertOnMouseAndPointerEvents(eventSpies, (spy) => { + expect(spy).toHaveReceivedEventTimes(eventsExpectedToBubble.includes(spy.eventName) ? 1 : 0); + }); + + // this needs to run in the browser context to ensure disabling and events fire immediately after being set + await page.$eval( + tag, + (component: InteractiveHTMLElement, allExpectedEvents: string[]) => { + component.disabled = false; + allExpectedEvents.forEach((event) => component.dispatchEvent(new MouseEvent(event))); + + component.disabled = true; + allExpectedEvents.forEach((event) => component.dispatchEvent(new MouseEvent(event))); + }, + allExpectedEvents + ); + + assertOnMouseAndPointerEvents(eventSpies, (spy) => { + if (spy.eventName === "click") { + // some components emit more than one click event (e.g., from calling `click()`), + // so we check if at least one event is received + expect(spy.length).toBeGreaterThanOrEqual(1); + } else { + expect(spy).toHaveReceivedEventTimes(eventsExpectedToBubble.includes(spy.eventName) ? 3 : 1); + } + }); }); }