From 2ba70341d1601b72f3ef82c1a86ae52fe3d538b5 Mon Sep 17 00:00:00 2001 From: Max Patiiuk Date: Wed, 18 Sep 2024 14:41:03 -0700 Subject: [PATCH 1/4] refactor(tests): reduce TypeScript errors --- .../src/components/chip-group/chip-group.e2e.ts | 8 ++++---- .../calcite-components/src/components/chip/chip.e2e.ts | 2 +- .../src/components/combobox/combobox.e2e.ts | 2 +- .../src/components/functional/XButton.tsx | 2 +- .../src/components/list-item-group/list-item-group.tsx | 2 +- .../src/components/list-item/list-item.tsx | 2 +- .../src/components/loader/loader.tsx | 6 +++--- .../segmented-control/segmented-control.e2e.ts | 2 +- .../calcite-components/src/components/table/table.tsx | 10 +++++----- .../src/components/text-area/text-area.e2e.ts | 2 +- .../src/components/time-picker/time-picker.tsx | 2 +- packages/calcite-components/src/utils/dom.spec.ts | 8 ++++---- packages/calcite-components/src/utils/interactive.tsx | 2 +- 13 files changed, 25 insertions(+), 25 deletions(-) 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 228904ca1d3..0349ca0640e 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 @@ -520,7 +520,7 @@ describe("calcite-chip-group", () => { expect(chipSelectSpy1).toHaveReceivedEventTimes(0); expect(chipSelectSpy2).toHaveReceivedEventTimes(0); - await chip5.setAttribute("selected", true); + await chip5.toggleAttribute("selected", true); await page.waitForChanges(); expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0); expect(chipSelectSpy1).toHaveReceivedEventTimes(0); @@ -569,7 +569,7 @@ describe("calcite-chip-group", () => { expect(await element.getProperty("selectedItems")).toHaveLength(0); await selectedItemAsserter([]); - chip5.setAttribute("selected", true); + chip5.toggleAttribute("selected", true); await page.waitForChanges(); expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0); expect(chipSelectSpy1).toHaveReceivedEventTimes(0); @@ -577,7 +577,7 @@ describe("calcite-chip-group", () => { expect(await element.getProperty("selectedItems")).toHaveLength(1); await selectedItemAsserter([chip5.id]); - chip4.setAttribute("selected", true); + chip4.toggleAttribute("selected", true); await page.waitForChanges(); expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0); expect(chipSelectSpy1).toHaveReceivedEventTimes(0); @@ -617,7 +617,7 @@ describe("calcite-chip-group", () => { expect(chipSelectSpy1).toHaveReceivedEventTimes(0); expect(chipSelectSpy2).toHaveReceivedEventTimes(0); - chip5.setAttribute("selected", true); + chip5.toggleAttribute("selected", true); await page.waitForChanges(); expect(chipGroupSelectSpy).toHaveReceivedEventTimes(0); expect(chipSelectSpy1).toHaveReceivedEventTimes(0); diff --git a/packages/calcite-components/src/components/chip/chip.e2e.ts b/packages/calcite-components/src/components/chip/chip.e2e.ts index 5288e6183da..4035db3dd65 100644 --- a/packages/calcite-components/src/components/chip/chip.e2e.ts +++ b/packages/calcite-components/src/components/chip/chip.e2e.ts @@ -214,7 +214,7 @@ describe("calcite-chip", () => { await page.setContent(`
${chipSnippet}
`); const chipEl = await page.find(`calcite-chip`); - chipEl.setAttribute("closed", true); + chipEl.toggleAttribute("closed", true); await page.waitForChanges(); expect(await chipEl.isVisible()).toBe(false); diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index 1ea369f9674..eec01ad1e14 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -1632,7 +1632,7 @@ describe("calcite-combobox", () => { let element: E2EElement; let comboboxItem: E2EElement; let itemNestedLi: E2EElement; - let closeEvent: Promise; + let closeEvent: Promise; beforeEach(async () => { page = await newE2EPage(); diff --git a/packages/calcite-components/src/components/functional/XButton.tsx b/packages/calcite-components/src/components/functional/XButton.tsx index ef331fc6ed4..1f566eedf19 100644 --- a/packages/calcite-components/src/components/functional/XButton.tsx +++ b/packages/calcite-components/src/components/functional/XButton.tsx @@ -3,7 +3,7 @@ import { JSXAttributes, JSXBase } from "@stencil/core/internal"; import { Scale } from "../interfaces"; import { getIconScale } from "../../utils/component"; -export interface XButtonProps extends JSXAttributes { +export interface XButtonProps extends JSXAttributes { disabled: boolean; label: string; scale: Scale; diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.tsx b/packages/calcite-components/src/components/list-item-group/list-item-group.tsx index f6a63735f4c..aa1034bab82 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.tsx +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.tsx @@ -49,7 +49,7 @@ export class ListItemGroup implements InteractiveComponent { * Fires when changes occur in the default slot, notifying parent lists of the changes. */ @Event({ cancelable: false }) - calciteInternalListItemGroupDefaultSlotChange: EventEmitter; + calciteInternalListItemGroupDefaultSlotChange: EventEmitter; // -------------------------------------------------------------------------- // diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index 8b0c1882166..347fff03af4 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -304,7 +304,7 @@ export class ListItem @Listen("calciteInternalListItemGroupDefaultSlotChange") @Listen("calciteInternalListDefaultSlotChange") - handleCalciteInternalListDefaultSlotChanges(event: CustomEvent): void { + handleCalciteInternalListDefaultSlotChanges(event: CustomEvent): void { event.stopPropagation(); this.handleOpenableChange(this.defaultSlotEl); } diff --git a/packages/calcite-components/src/components/loader/loader.tsx b/packages/calcite-components/src/components/loader/loader.tsx index 1957ee7be42..ef37a2521a5 100644 --- a/packages/calcite-components/src/components/loader/loader.tsx +++ b/packages/calcite-components/src/components/loader/loader.tsx @@ -90,9 +90,9 @@ export class Loader implements LocalizedComponent { return ( 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 d158d8a703f..6ab935ac255 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 @@ -292,7 +292,7 @@ describe("calcite-segmented-control", () => { async function cycleThroughItemsAndAssertValue(keys: "left-right" | "up-down"): Promise { const [moveBeforeArrowKey, moveAfterArrowKey] = - keys === "left-right" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"]; + keys === "left-right" ? (["ArrowLeft", "ArrowRight"] as const) : (["ArrowUp", "ArrowDown"] as const); await element.press(moveAfterArrowKey); await page.waitForChanges(); diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx index 14b4094d852..cde12c19056 100644 --- a/packages/calcite-components/src/components/table/table.tsx +++ b/packages/calcite-components/src/components/table/table.tsx @@ -250,11 +250,11 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen } @Listen("calciteInternalTableRowFocusRequest") - calciteInternalTableRowFocusEvent(event: TableRowFocusEvent): void { - const cellPosition = event["detail"].cellPosition; - const rowPos = event["detail"].rowPosition; - const destination = event["detail"].destination; - const lastCell = event["detail"].lastCell; + calciteInternalTableRowFocusEvent(event: CustomEvent): void { + const cellPosition = event.detail.cellPosition; + const rowPos = event.detail.rowPosition; + const destination = event.detail.destination; + const lastCell = event.detail.lastCell; const visibleBody = this.bodyRows?.filter((row) => !row.hidden); const visibleAll = this.allRows?.filter((row) => !row.hidden); 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 6af572942a7..dfacebe72fb 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 @@ -151,7 +151,7 @@ describe("calcite-text-area", () => { await page.setContent(""); const element = await page.find("calcite-text-area"); - element.setAttribute("max-length", 5); + element.setAttribute("max-length", "5"); await page.waitForChanges(); await page.keyboard.press("Tab"); diff --git a/packages/calcite-components/src/components/time-picker/time-picker.tsx b/packages/calcite-components/src/components/time-picker/time-picker.tsx index d65fcc42bd9..221e7564065 100644 --- a/packages/calcite-components/src/components/time-picker/time-picker.tsx +++ b/packages/calcite-components/src/components/time-picker/time-picker.tsx @@ -202,7 +202,7 @@ export class TimePicker /** * @internal */ - @Event({ cancelable: false }) calciteInternalTimePickerChange: EventEmitter; + @Event({ cancelable: false }) calciteInternalTimePickerChange: EventEmitter; //-------------------------------------------------------------------------- // diff --git a/packages/calcite-components/src/utils/dom.spec.ts b/packages/calcite-components/src/utils/dom.spec.ts index fbdd2fec1ce..1b21a39d995 100644 --- a/packages/calcite-components/src/utils/dom.spec.ts +++ b/packages/calcite-components/src/utils/dom.spec.ts @@ -665,8 +665,8 @@ describe("dom", () => { let element: HTMLDivElement; let dispatchTransitionEvent: TransitionEventDispatcher; - let onStartCallback: jest.Mock; - let onEndCallback: jest.Mock; + let onStartCallback: jest.Mock; + let onEndCallback: jest.Mock; beforeEach(() => { dispatchTransitionEvent = createTransitionEventDispatcher(); @@ -766,8 +766,8 @@ describe("dom", () => { let element: HTMLDivElement; let dispatchAnimationEvent: AnimationEventDispatcher; - let onStartCallback: jest.Mock; - let onEndCallback: jest.Mock; + let onStartCallback: jest.Mock; + let onEndCallback: jest.Mock; beforeEach(() => { dispatchAnimationEvent = createAnimationEventDispatcher(); diff --git a/packages/calcite-components/src/utils/interactive.tsx b/packages/calcite-components/src/utils/interactive.tsx index 4f3583cc570..208f4628cf2 100644 --- a/packages/calcite-components/src/utils/interactive.tsx +++ b/packages/calcite-components/src/utils/interactive.tsx @@ -111,7 +111,7 @@ function removeInteractionListeners(element: HTMLElement): void { ); } -export interface InteractiveContainerProps extends JSXAttributes { +export interface InteractiveContainerProps extends JSXAttributes { disabled: boolean; } From 93162293d1420ea7f562c23dce8086a95449725c Mon Sep 17 00:00:00 2001 From: Max Patiiuk Date: Wed, 18 Sep 2024 18:48:45 -0700 Subject: [PATCH 2/4] revert: undo loosening CustomEvent type --- .../calcite-components/src/components/list-item/list-item.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index 347fff03af4..6485bd03225 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -304,7 +304,7 @@ export class ListItem @Listen("calciteInternalListItemGroupDefaultSlotChange") @Listen("calciteInternalListDefaultSlotChange") - handleCalciteInternalListDefaultSlotChanges(event: CustomEvent): void { + handleCalciteInternalListDefaultSlotChanges(event: CustomEvent): void { event.stopPropagation(); this.handleOpenableChange(this.defaultSlotEl); } @@ -710,7 +710,7 @@ export class ListItem // // -------------------------------------------------------------------------- - private dragHandleSelectedChangeHandler = (event: CustomEvent): void => { + private dragHandleSelectedChangeHandler = (event: CustomEvent): void => { this.dragSelected = (event.target as HTMLCalciteHandleElement).selected; this.calciteListItemDragHandleChange.emit(); event.stopPropagation(); From 6e7d00a7bf688b15da6615935ae52e1e9d9f2e09 Mon Sep 17 00:00:00 2001 From: Max Patiiuk Date: Tue, 24 Sep 2024 11:59:47 -0700 Subject: [PATCH 3/4] refactor(functional): remove unused props --- .../src/components/functional/XButton.tsx | 6 +----- packages/calcite-components/src/utils/interactive.tsx | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/functional/XButton.tsx b/packages/calcite-components/src/components/functional/XButton.tsx index 1f566eedf19..1263a8020ea 100644 --- a/packages/calcite-components/src/components/functional/XButton.tsx +++ b/packages/calcite-components/src/components/functional/XButton.tsx @@ -3,7 +3,7 @@ import { JSXAttributes, JSXBase } from "@stencil/core/internal"; import { Scale } from "../interfaces"; import { getIconScale } from "../../utils/component"; -export interface XButtonProps extends JSXAttributes { +export interface XButtonProps extends JSXAttributes { disabled: boolean; label: string; scale: Scale; @@ -18,8 +18,6 @@ export const XButton: FunctionalComponent = ({ disabled, key, label, - onClick, - ref, scale, }): VNode => (