diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts index 5ab4d2a3967..3c307d25026 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts +++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts @@ -12,8 +12,8 @@ import { t9n, } from "../../tests/commonTests"; import { getFocusedElementProp } from "../../tests/utils"; +import { DEBOUNCE } from "../../utils/resources"; import { CSS, SLOTS } from "./resources"; -import { overflowActionsDebounceInMs } from "./utils"; describe("calcite-action-bar", () => { describe("renders", () => { @@ -406,7 +406,7 @@ describe("calcite-action-bar", () => { `, }); - await page.waitForTimeout(overflowActionsDebounceInMs); + await page.waitForTimeout(DEBOUNCE.resize); expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(2); expect(await page.findAll(slottedActionsSelector)).toHaveLength(0); @@ -423,7 +423,7 @@ describe("calcite-action-bar", () => { `, ); }); - await page.waitForTimeout(overflowActionsDebounceInMs + 10); + await page.waitForTimeout(DEBOUNCE.resize + 10); await page.waitForChanges(); expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8); @@ -454,7 +454,7 @@ describe("calcite-action-bar", () => { `, ); await page.waitForChanges(); - await page.waitForTimeout(overflowActionsDebounceInMs + 10); + await page.waitForTimeout(DEBOUNCE.resize + 10); expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8); expect(await page.findAll(slottedActionsSelector)).toHaveLength(0); @@ -462,7 +462,7 @@ describe("calcite-action-bar", () => { const actionBar = await page.find("calcite-action-bar"); actionBar.setProperty("overflowActionsDisabled", false); await page.waitForChanges(); - await page.waitForTimeout(overflowActionsDebounceInMs + 10); + await page.waitForTimeout(DEBOUNCE.resize + 10); expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8); expect(await page.findAll(slottedActionsSelector)).toHaveLength(7); @@ -490,7 +490,7 @@ describe("calcite-action-bar", () => { `, }); - await page.waitForTimeout(overflowActionsDebounceInMs + 10); + await page.waitForTimeout(DEBOUNCE.resize + 10); expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8); expect(await page.findAll(slottedActionsSelector)).toHaveLength(7); @@ -499,7 +499,7 @@ describe("calcite-action-bar", () => { element.style.height = "550px"; }); - await page.waitForTimeout(overflowActionsDebounceInMs + 10); + await page.waitForTimeout(DEBOUNCE.resize + 10); await page.waitForChanges(); expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8); diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 21e37492fb7..cac8a0e6794 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -40,15 +40,10 @@ import { import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle"; import { Layout, Position, Scale } from "../interfaces"; import { OverlayPositioning } from "../../utils/floating-ui"; +import { DEBOUNCE } from "../../utils/resources"; import { ActionBarMessages } from "./assets/action-bar/t9n"; import { CSS, SLOTS } from "./resources"; -import { - geActionDimensions, - getOverflowCount, - overflowActions, - overflowActionsDebounceInMs, - queryActions, -} from "./utils"; +import { geActionDimensions, getOverflowCount, overflowActions, queryActions } from "./utils"; /** * @slot - A slot for adding `calcite-action`s that will appear at the top of the component. @@ -342,7 +337,7 @@ export class ActionBar expanded, overflowCount, }); - }, overflowActionsDebounceInMs); + }, DEBOUNCE.resize); toggleExpand = (): void => { this.expanded = !this.expanded; diff --git a/packages/calcite-components/src/components/action-bar/utils.ts b/packages/calcite-components/src/components/action-bar/utils.ts index 3e1d00be951..b41e2994f6a 100644 --- a/packages/calcite-components/src/components/action-bar/utils.ts +++ b/packages/calcite-components/src/components/action-bar/utils.ts @@ -3,7 +3,6 @@ import { SLOTS as ACTION_GROUP_SLOTS } from "../action-group/resources"; import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources"; import { Layout } from "../interfaces"; -export const overflowActionsDebounceInMs = 150; const groupBufferPx = 2; const getAverage = (arr: number[]) => arr.reduce((p, c) => p + c, 0) / arr.length; diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index 3ed9429205e..477b553198e 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -17,6 +17,7 @@ import { CSS as ComboboxItemCSS } from "../combobox-item/resources"; import { CSS as XButtonCSS } from "../functional/XButton"; import { getElementXY, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils"; import { assertCaretPosition } from "../../tests/utils"; +import { DEBOUNCE } from "../../utils/resources"; import { CSS } from "./resources"; const selectionModes = ["single", "single-persist", "ancestors", "multiple"]; @@ -201,6 +202,7 @@ describe("calcite-combobox", () => { await combobox.type(text); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); expect(await combobox.getProperty("open")).toBe(true); @@ -209,6 +211,7 @@ describe("calcite-combobox", () => { } await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); expect(await combobox.getProperty("open")).toBe(false); }); @@ -256,6 +259,7 @@ describe("calcite-combobox", () => { await page.waitForChanges(); await input.type("undefined"); + await page.waitForTimeout(DEBOUNCE.filter); await page.waitForChanges(); expect(await items[0].isVisible()).toBe(false); @@ -287,6 +291,7 @@ describe("calcite-combobox", () => { await combobox.press("s"); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); expect(filterEventSpy).toHaveReceivedEventTimes(1); expect(await items[0].isVisible()).toBe(true); @@ -299,6 +304,7 @@ describe("calcite-combobox", () => { await combobox.press("i"); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); expect(filterEventSpy).toHaveReceivedEventTimes(2); expect(await items[0].isVisible()).toBe(true); @@ -311,6 +317,7 @@ describe("calcite-combobox", () => { await combobox.press("n"); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); expect(filterEventSpy).toHaveReceivedEventTimes(3); expect(await items[0].isVisible()).toBe(true); @@ -342,6 +349,7 @@ describe("calcite-combobox", () => { await page.waitForChanges(); await combobox.type("Algeria"); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); const [lastItemX, lastItemY] = await getElementXY(page, "#item-4"); @@ -369,6 +377,7 @@ describe("calcite-combobox", () => { await page.waitForChanges(); await combobox.type("two"); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); const one = await (await page.find("#one")).isVisible(); const two = await (await page.find("#two")).isVisible(); const three = await (await page.find("#three")).isVisible(); @@ -407,6 +416,7 @@ describe("calcite-combobox", () => { const page = await newE2EPage(); await page.setContent(html` ${nestedComboboxChildren} `); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); const visibleItemsAndGroups = await page.findAll( "calcite-combobox-item:not([hidden]), calcite-combobox-item-group:not([hidden])", @@ -434,6 +444,7 @@ describe("calcite-combobox", () => { const combobox = await page.find("calcite-combobox"); combobox.setProperty("filterText", "1.2"); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); const filteredItemsAndGroups = await page.findAll( "calcite-combobox-item:not([hidden]), calcite-combobox-item-group:not([hidden])", @@ -454,6 +465,7 @@ describe("calcite-combobox", () => { combobox.setProperty("filterText", ""); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); const allVisibleItemAndGroups = await page.findAll( "calcite-combobox-item:not([hidden]), calcite-combobox-item-group:not([hidden])", @@ -500,10 +512,13 @@ describe("calcite-combobox", () => { }); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); const combobox = await page.find("calcite-combobox"); combobox.setProperty("filterText", "foo"); + await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); const visibleItems = await page.findAll("calcite-combobox-item:not([hidden])"); @@ -1733,11 +1748,27 @@ describe("calcite-combobox", () => { const button = await page.find("button"); await input.click(); await input.press("o"); + + await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); + await input.press("Tab"); + + await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); + let chips = await page.findAll("calcite-combobox >>> calcite-chip"); expect(chips.length).toBe(1); await input.press("j"); + + await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); + await button.click(); + + await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); + chips = await page.findAll("calcite-combobox >>> calcite-chip"); expect(chips.length).toBe(2); }); diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 4a1cbbd715f..d25b899523d 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -56,6 +56,7 @@ import { import { connectLocalized, disconnectLocalized } from "../../utils/locale"; import { createObserver } from "../../utils/observers"; import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent"; +import { DEBOUNCE } from "../../utils/resources"; import { connectMessages, disconnectMessages, @@ -1128,7 +1129,7 @@ export class Combobox if (emit) { this.calciteComboboxFilterChange.emit(); } - }, 100); + }, DEBOUNCE.filter); })(); internalComboboxChangeEvent = (): void => { diff --git a/packages/calcite-components/src/components/filter/filter.e2e.ts b/packages/calcite-components/src/components/filter/filter.e2e.ts index 45d9961c93e..3a76f81fd33 100644 --- a/packages/calcite-components/src/components/filter/filter.e2e.ts +++ b/packages/calcite-components/src/components/filter/filter.e2e.ts @@ -1,7 +1,7 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing"; import { accessible, defaults, disabled, focusable, hidden, reflects, renders, t9n } from "../../tests/commonTests"; import { CSS as INPUT_CSS } from "../input/resources"; -import { DEBOUNCE_TIMEOUT } from "./resources"; +import { DEBOUNCE } from "../../utils/resources"; describe("calcite-filter", () => { describe("renders", () => { @@ -190,7 +190,7 @@ describe("calcite-filter", () => { it("updates filtered items after filtering", async () => { const filter = await page.find("calcite-filter"); const filterChangeSpy = await page.spyOnEvent("calciteFilterChange"); - await page.waitForTimeout(DEBOUNCE_TIMEOUT); + await page.waitForTimeout(DEBOUNCE.filter); await page.waitForChanges(); expect(filterChangeSpy).toHaveReceivedEventTimes(0); @@ -215,7 +215,7 @@ describe("calcite-filter", () => { await page.$eval("calcite-filter", (filter: HTMLCalciteFilterElement): void => { filter.items = filter.items.slice(3); }); - await page.waitForTimeout(DEBOUNCE_TIMEOUT); + await page.waitForTimeout(DEBOUNCE.filter); await page.waitForChanges(); assertMatchingItems(await filter.getProperty("filteredItems"), ["jon"]); @@ -274,7 +274,7 @@ describe("calcite-filter", () => { it("should return matching value", async () => { const filter = await page.find("calcite-filter"); - await page.waitForTimeout(DEBOUNCE_TIMEOUT); + await page.waitForTimeout(DEBOUNCE.filter); assertMatchingItems(await filter.getProperty("filteredItems"), ["harry"]); }); @@ -282,7 +282,7 @@ describe("calcite-filter", () => { const filter = await page.find("calcite-filter"); filter.setProperty("filterProps", ["description"]); await page.waitForChanges(); - await page.waitForTimeout(DEBOUNCE_TIMEOUT); + await page.waitForTimeout(DEBOUNCE.filter); assertMatchingItems(await filter.getProperty("filteredItems"), []); }); }); diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx index 9635f41daad..fd07e46c181 100644 --- a/packages/calcite-components/src/components/filter/filter.tsx +++ b/packages/calcite-components/src/components/filter/filter.tsx @@ -34,8 +34,9 @@ import { updateMessages, } from "../../utils/t9n"; import { Scale } from "../interfaces"; +import { DEBOUNCE } from "../../utils/resources"; import { FilterMessages } from "./assets/filter/t9n"; -import { CSS, DEBOUNCE_TIMEOUT, ICONS } from "./resources"; +import { CSS, ICONS } from "./resources"; @Component({ tag: "calcite-filter", @@ -235,7 +236,7 @@ export class Filter (value: string, emit = false, onFilter?: () => void): void => this.items.length && this.updateFiltered(filter(this.items, value, this.filterProps), emit, onFilter), - DEBOUNCE_TIMEOUT, + DEBOUNCE.filter, ); inputHandler = (event: CustomEvent): void => { diff --git a/packages/calcite-components/src/components/filter/resources.ts b/packages/calcite-components/src/components/filter/resources.ts index 0adab7cd3b8..cf06f61b465 100644 --- a/packages/calcite-components/src/components/filter/resources.ts +++ b/packages/calcite-components/src/components/filter/resources.ts @@ -7,5 +7,3 @@ export const ICONS = { search: "search", close: "x", } as const; - -export const DEBOUNCE_TIMEOUT = 250; diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts index ffbaad12b96..d2a0feb9cd5 100644 --- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts +++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts @@ -13,6 +13,7 @@ import { t9n, } from "../../tests/commonTests"; import { TagAndPage } from "../../tests/commonTests/interfaces"; +import { DEBOUNCE } from "../../utils/resources"; import { toUserFriendlyName } from "./utils"; /* @@ -227,6 +228,7 @@ describe("calcite-input-time-zone", () => { await input.click(); await input.type(searchTerms[0]); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); matchedTimeZoneItems = await page.findAll("calcite-input-time-zone >>> calcite-combobox-item:not([hidden])"); @@ -235,6 +237,7 @@ describe("calcite-input-time-zone", () => { await clearSearchTerm(searchTerms[0]); await input.type(searchTerms[1]); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); matchedTimeZoneItems = await page.findAll("calcite-input-time-zone >>> calcite-combobox-item:not([hidden])"); @@ -243,6 +246,7 @@ describe("calcite-input-time-zone", () => { await clearSearchTerm(searchTerms[1]); await input.type(searchTerms[2]); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); matchedTimeZoneItems = await page.findAll("calcite-input-time-zone >>> calcite-combobox-item:not([hidden])"); @@ -250,6 +254,7 @@ describe("calcite-input-time-zone", () => { await clearSearchTerm(searchTerms[1]); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); matchedTimeZoneItems = await page.findAll("calcite-input-time-zone >>> calcite-combobox-item:not([hidden])"); @@ -448,6 +453,7 @@ describe("calcite-input-time-zone", () => { await page.waitForChanges(); await input.type("(GMT-6)"); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); const sharedOffsetTimeZoneItems = await page.findAll( "calcite-input-time-zone >>> calcite-combobox-item:not([hidden])", @@ -456,6 +462,7 @@ describe("calcite-input-time-zone", () => { await sharedOffsetTimeZoneItems[1].click(); await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); const selectedTimeZoneItem = await page.find("calcite-input-time-zone >>> calcite-combobox-item[selected]"); const expectedTimeZoneItem = testTimeZoneItems[3]; diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts index 10169f764d3..6e70e5c8cf7 100644 --- a/packages/calcite-components/src/components/input/input.e2e.ts +++ b/packages/calcite-components/src/components/input/input.e2e.ts @@ -15,6 +15,7 @@ import { html } from "../../../support/formatting"; import { letterKeys, numberKeys } from "../../utils/key"; import { locales, numberStringFormatter } from "../../utils/locale"; import { getElementRect, getElementXY, selectText } from "../../tests/utils"; +import { DEBOUNCE } from "../../utils/resources"; import { assertCaretPosition } from "../../tests/utils"; import { testHiddenInputSyncing, testPostValidationFocusing, testWorkaroundForGlobalPropRemoval } from "./common/tests"; @@ -809,6 +810,10 @@ describe("calcite-input", () => { await element.callMethod("setFocus"); await page.waitForChanges(); await typeNumberValue(page, inputFirstPart); + + await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); + expect(await element.getProperty("value")).toBe(inputFirstPart); expect(calciteInputInput).toHaveReceivedEventTimes(5); expect(calciteInputChange).toHaveReceivedEventTimes(0); @@ -829,6 +834,10 @@ describe("calcite-input", () => { await element.callMethod("setFocus"); await page.waitForChanges(); await typeNumberValue(page, textSecondPart); + + await page.waitForChanges(); + await page.waitForTimeout(DEBOUNCE.filter); + expect(calciteInputInput).toHaveReceivedEventTimes(10); expect(calciteInputChange).toHaveReceivedEventTimes(1); diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index eb5e128e9dc..18d0953e8ec 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -3,9 +3,8 @@ import { accessible, hidden, renders, focusable, disabled, defaults, t9n } from import { placeholderImage } from "../../../.storybook/placeholderImage"; import { html } from "../../../support/formatting"; import { CSS as ListItemCSS, activeCellTestAttribute } from "../list-item/resources"; -import { DEBOUNCE_TIMEOUT as FILTER_DEBOUNCE_TIMEOUT } from "../filter/resources"; import { GlobalTestProps, dragAndDrop, isElementFocused, getFocusedElementProp } from "../../tests/utils"; -import { debounceTimeout } from "./resources"; +import { DEBOUNCE } from "../../utils/resources"; import { ListDragDetail } from "./interfaces"; const placeholder = placeholderImage({ @@ -13,8 +12,6 @@ const placeholder = placeholderImage({ height: 100, }); -const listDebounceTimeout = debounceTimeout + FILTER_DEBOUNCE_TIMEOUT; - describe("calcite-list", () => { describe("defaults", () => { defaults("calcite-list", [ @@ -154,7 +151,7 @@ describe("calcite-list", () => { ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); let dragHandleValues = [true, false, true, true, false, true, true]; @@ -170,7 +167,7 @@ describe("calcite-list", () => { rootList.setProperty("dragEnabled", false); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); dragHandleValues = [false, false, true, true, false, false, false]; @@ -210,7 +207,7 @@ describe("calcite-list", () => { ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); let dragHandleValues = [true, false, true, true, false, true, true]; @@ -226,7 +223,7 @@ describe("calcite-list", () => { rootList.setProperty("dragEnabled", false); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); dragHandleValues = [false, false, true, true, false, false, false]; @@ -341,7 +338,7 @@ describe("calcite-list", () => { await page.waitForChanges(); const list = await page.find("calcite-list"); const filter = await page.find(`calcite-list >>> calcite-filter`); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(await list.getProperty("filteredItems")).toHaveLength(2); expect(await list.getProperty("filteredData")).toHaveLength(2); expect(await list.getProperty("filterText")).toBeUndefined(); @@ -352,7 +349,7 @@ describe("calcite-list", () => { const calciteListFilterEvent = list.waitForEvent("calciteListFilter"); await page.keyboard.type("one"); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); await calciteListFilterEvent; expect(await list.getProperty("filteredItems")).toHaveLength(1); expect(await list.getProperty("filteredData")).toHaveLength(1); @@ -366,7 +363,7 @@ describe("calcite-list", () => { const calciteListFilterEvent2 = list.waitForEvent("calciteListFilter"); await page.keyboard.type("two"); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); await calciteListFilterEvent2; expect(await list.getProperty("filteredItems")).toHaveLength(1); expect(await list.getProperty("filteredData")).toHaveLength(1); @@ -375,7 +372,7 @@ describe("calcite-list", () => { const calciteListFilterEvent3 = list.waitForEvent("calciteListFilter"); await page.keyboard.type(" blah"); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); await calciteListFilterEvent3; expect(await list.getProperty("filteredItems")).toHaveLength(0); expect(await list.getProperty("filteredData")).toHaveLength(0); @@ -401,14 +398,14 @@ describe("calcite-list", () => { const list = await page.find("calcite-list"); const listItems = await page.findAll("calcite-list-item"); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(await list.getProperty("filteredItems")).toHaveLength(3); expect(await list.getProperty("filteredData")).toHaveLength(3); expect(await list.getProperty("filterText")).toBeUndefined(); listItems[0].setProperty("selected", true); list.setProperty("filterText", "two"); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); await page.waitForChanges(); let selectedItemValues = await getSelectedItemValues(); expect(selectedItemValues).toHaveLength(1); @@ -423,7 +420,7 @@ describe("calcite-list", () => { list.setProperty("filterText", "three"); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); listItems[2].setProperty("selected", true); await page.waitForChanges(); selectedItemValues = await getSelectedItemValues(); @@ -473,7 +470,7 @@ describe("calcite-list", () => { await page.waitForChanges(); const list = await page.find("calcite-list"); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(await list.getProperty("filteredItems")).toHaveLength(3); expect(await list.getProperty("filteredData")).toHaveLength(3); @@ -518,7 +515,7 @@ describe("calcite-list", () => { const list = await page.find("calcite-list"); list.setProperty("filterProps", ["label", "description"]); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(await list.getProperty("filteredItems")).toHaveLength(2); expect(await list.getProperty("filteredData")).toHaveLength(2); @@ -543,7 +540,7 @@ describe("calcite-list", () => { `, ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); const list = await page.find("calcite-list"); const items = await page.findAll("calcite-list-item"); @@ -558,7 +555,7 @@ describe("calcite-list", () => { await items[0].click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(eventSpy).toHaveReceivedEventTimes(1); expect(await list.getProperty("selectedItems")).toHaveLength(1); @@ -569,7 +566,7 @@ describe("calcite-list", () => { await page.$eval("#item-4", clickItemContent, `.${ListItemCSS.contentContainer}`); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(eventSpy).toHaveReceivedEventTimes(2); expect(await list.getProperty("selectedItems")).toHaveLength(4); @@ -581,7 +578,7 @@ describe("calcite-list", () => { await items[3].click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(eventSpy).toHaveReceivedEventTimes(3); expect(await list.getProperty("selectedItems")).toHaveLength(3); @@ -592,7 +589,7 @@ describe("calcite-list", () => { await page.$eval("#item-1", clickItemContent, `.${ListItemCSS.contentContainer}`); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(eventSpy).toHaveReceivedEventTimes(4); expect(await list.getProperty("selectedItems")).toHaveLength(0); @@ -612,7 +609,7 @@ describe("calcite-list", () => { `, ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); const list = await page.find("calcite-list"); const items = await page.findAll("calcite-list-item"); @@ -626,7 +623,7 @@ describe("calcite-list", () => { await items[1].click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(eventSpy).toHaveReceivedEventTimes(1); expect(await items[0].getProperty("active")).toBe(false); @@ -645,7 +642,7 @@ describe("calcite-list", () => { ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); const items = await page.findAll("calcite-list-item"); @@ -658,7 +655,7 @@ describe("calcite-list", () => { await items[2].click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(eventSpy).toHaveReceivedEventTimes(1); expect(await items[0].getProperty("selected")).toBe(false); @@ -677,7 +674,7 @@ describe("calcite-list", () => { ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); const items = await page.findAll("calcite-list-item"); @@ -690,7 +687,7 @@ describe("calcite-list", () => { await items[2].click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(eventSpy).toHaveReceivedEventTimes(1); expect(await items[0].getProperty("selected")).toBe(false); @@ -700,7 +697,7 @@ describe("calcite-list", () => { await items[0].click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(eventSpy).toHaveReceivedEventTimes(2); expect(await items[0].getProperty("selected")).toBe(true); @@ -738,13 +735,13 @@ describe("calcite-list", () => { listItemOne.setProperty("selected", true); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(await listItemOne.getProperty("selected")).toBe(true); expect(await list.getProperty("selectedItems")).toHaveLength(1); listItemOne.setProperty("selected", false); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(await listItemOne.getProperty("selected")).toBe(false); expect(await list.getProperty("selectedItems")).toHaveLength(0); }); @@ -829,7 +826,7 @@ describe("calcite-list", () => { const listItemThree = await page.find("#three"); listItemThree.setProperty("disabled", false); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(calciteListChange).toHaveReceivedEventTimes(0); await list.press("ArrowDown"); @@ -839,7 +836,7 @@ describe("calcite-list", () => { const listItemFour = await page.find("#four"); listItemFour.setProperty("closed", false); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(calciteListChange).toHaveReceivedEventTimes(0); await list.press("ArrowDown"); @@ -869,7 +866,7 @@ describe("calcite-list", () => { `); await page.waitForChanges(); const list = await page.find("calcite-list"); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); await list.callMethod("setFocus"); await page.waitForChanges(); @@ -1111,7 +1108,7 @@ describe("calcite-list", () => { await secondDragHandle.click(); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); expect(await items[0].getProperty("active")).toBe(false); expect(await items[1].getProperty("active")).toBe(true); @@ -1131,7 +1128,7 @@ describe("calcite-list", () => { `, ); await page.waitForChanges(); - await page.waitForTimeout(listDebounceTimeout); + await page.waitForTimeout(DEBOUNCE.filter); return page; } @@ -1448,7 +1445,7 @@ describe("calcite-list", () => { await page.keyboard.press("ArrowDown"); await page.waitForChanges(); expect(await handle.getProperty("selected")).toBe(true); - await page.waitForTimeout(debounceTimeout); + await page.waitForTimeout(DEBOUNCE.nextTick); startIndex += 1; const changeHandleLabel = await getAriaLabel(); diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts index 8562a9f99f9..ec7109968c0 100644 --- a/packages/calcite-components/src/utils/floating-ui.spec.ts +++ b/packages/calcite-components/src/utils/floating-ui.spec.ts @@ -1,4 +1,5 @@ import { waitForAnimationFrame } from "../tests/utils"; +import { DEBOUNCE } from "./resources"; import * as floatingUI from "./floating-ui"; import { FloatingUIComponent } from "./floating-ui"; @@ -13,7 +14,6 @@ const { placements, positionFloatingUI, reposition, - repositionDebounceTimeout, } = floatingUI; it("should set calcite placement to FloatingUI placement", () => { @@ -122,7 +122,7 @@ describe("repositioning", () => { assertPreOpenPositioning(floatingEl); - await new Promise((resolve) => setTimeout(resolve, repositionDebounceTimeout)); + await new Promise((resolve) => setTimeout(resolve, DEBOUNCE.reposition)); assertOpenPositioning(floatingEl); }); @@ -139,7 +139,7 @@ describe("repositioning", () => { floatingUI.reposition(anotherFakeFloatingUiComponent, positionOptions, true); expect(positionSpy).toHaveBeenCalledTimes(2); - await new Promise((resolve) => setTimeout(resolve, repositionDebounceTimeout)); + await new Promise((resolve) => setTimeout(resolve, DEBOUNCE.reposition)); expect(positionSpy).toHaveBeenCalledTimes(2); }); }); diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index 00275044003..532fcd2a0d2 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -18,6 +18,7 @@ import { Build } from "@stencil/core"; import { debounce, DebouncedFunc } from "lodash-es"; import { offsetParent } from "composed-offset-position"; import { Layout } from "../components/interfaces"; +import { DEBOUNCE } from "./resources"; import { getElementDir } from "./dom"; (function setUpFloatingUiForShadowDomPositioning(): void { @@ -167,11 +168,6 @@ export const positionFloatingUI = */ export const placementDataAttribute = "data-placement"; -/** - * Exported for testing purposes only - */ -export const repositionDebounceTimeout = 100; - export type ReferenceElement = VirtualElement | Element; type UIType = "menu" | "tooltip" | "popover"; @@ -457,9 +453,9 @@ function getDebouncedReposition(component: FloatingUIComponent): DebouncedFunc