refactor: create a common resource to store debounce consts

Esri · Jul 22, 2024 · f97ca1f · f97ca1f
1 parent bacbd2e
commit f97ca1f
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 82 deletions.
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
@@ -12,8 +12,8 @@ import {
   t9n,
 } from "../../tests/commonTests";
 import { getFocusedElementProp } from "../../tests/utils";
+import { overflowActionsDebounceInMs, overflowActionsDebounceInMsExtended } from "../../utils/debounceValues";
 import { CSS, SLOTS } from "./resources";
-import { overflowActionsDebounceInMs } from "./utils";
 
 describe("calcite-action-bar", () => {
   describe("renders", () => {
@@ -423,7 +423,7 @@ describe("calcite-action-bar", () => {
           <calcite-action text="Table" icon="table"></calcite-action>`,
         );
       });
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(overflowActionsDebounceInMsExtended);
       await page.waitForChanges();
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
@@ -454,15 +454,15 @@ describe("calcite-action-bar", () => {
         </div>`,
       );
       await page.waitForChanges();
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(overflowActionsDebounceInMsExtended);
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
       expect(await page.findAll(slottedActionsSelector)).toHaveLength(0);
 
       const actionBar = await page.find("calcite-action-bar");
       actionBar.setProperty("overflowActionsDisabled", false);
       await page.waitForChanges();
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(overflowActionsDebounceInMsExtended);
 
       expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
       expect(await page.findAll(slottedActionsSelector)).toHaveLength(7);
@@ -490,7 +490,7 @@ describe("calcite-action-bar", () => {
           </calcite-action-bar>
         </div>`,
       });
-      await page.waitForTimeout(overflowActionsDebounceInMs + 10);
+      await page.waitForTimeout(overflowActionsDebounceInMsExtended);
 
       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(overflowActionsDebounceInMsExtended);
       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
@@ -40,15 +40,10 @@ import {
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
 import { Layout, Position, Scale } from "../interfaces";
 import { OverlayPositioning } from "../../utils/floating-ui";
+import { overflowActionsDebounceInMs } from "../../utils/debounceValues";
 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.

diff --git 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.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 { comboboxFilterDebounceInMs } from "../../utils/debounceValues";
 import {
   connectMessages,
   disconnectMessages,
@@ -1129,7 +1130,7 @@ export class Combobox
       if (emit) {
         this.calciteComboboxFilterChange.emit();
       }
-    }, 100);
+    }, comboboxFilterDebounceInMs);
   })();
 
   internalComboboxChangeEvent = (): void => {

diff --git 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 { filterDebounceInMs } from "../../utils/debounceValues";
 
 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(filterDebounceInMs);
       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(filterDebounceInMs);
       await page.waitForChanges();
 
       assertMatchingItems(await filter.getProperty("filteredItems"), ["jon"]);
@@ -274,15 +274,15 @@ describe("calcite-filter", () => {
 
     it("should return matching value", async () => {
       const filter = await page.find("calcite-filter");
-      await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+      await page.waitForTimeout(filterDebounceInMs);
       assertMatchingItems(await filter.getProperty("filteredItems"), ["harry"]);
     });
 
     it("should return no matching values", async () => {
       const filter = await page.find("calcite-filter");
       filter.setProperty("filterProps", ["description"]);
       await page.waitForChanges();
-      await page.waitForTimeout(DEBOUNCE_TIMEOUT);
+      await page.waitForTimeout(filterDebounceInMs);
       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
@@ -34,8 +34,9 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { Scale } from "../interfaces";
+import { filterDebounceInMs } from "../../utils/debounceValues";
 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,
+    filterDebounceInMs,
   );
 
   inputHandler = (event: CustomEvent): void => {

diff --git 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;