From d33cb313131c91555b385ce1555ba5272f375508 Mon Sep 17 00:00:00 2001 From: JC Franco Date: Wed, 8 Jan 2025 11:20:55 -0800 Subject: [PATCH] feat(time-picker): expose `calciteTimePickerChange` event (#11214) **Related Issue:** #10102 ## Summary Exposes previously internal event. --- .../input-time-picker/input-time-picker.tsx | 2 +- .../components/time-picker/time-picker.e2e.ts | 39 +++++++++++++++++++ .../components/time-picker/time-picker.tsx | 5 +-- 3 files changed, 42 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx index 2e5ae465bda..ea8359533c5 100644 --- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx +++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx @@ -1092,7 +1092,7 @@ export class InputTimePicker lang={this.messages._lang} messageOverrides={this.messageOverrides} numberingSystem={this.numberingSystem} - oncalciteInternalTimePickerChange={this.timePickerChangeHandler} + oncalciteTimePickerChange={this.timePickerChangeHandler} ref={this.setCalciteTimePickerEl} scale={this.scale} step={this.step} diff --git a/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts b/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts index 91712f48885..ca6c46bed19 100644 --- a/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts +++ b/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts @@ -315,6 +315,7 @@ describe("calcite-time-picker", () => { const page = await newE2EPage({ html: ``, }); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const timePicker = await page.find("calcite-time-picker"); const hourEl = await page.find(`calcite-time-picker >>> .${CSS.hour}`); @@ -336,6 +337,8 @@ describe("calcite-time-picker", () => { expect(minuteEl.textContent).toBe("30"); expect(secondEl.textContent).toBe("40"); expect(meridiemEl.textContent).toBe("PM"); + + expect(changeEventSpy).toHaveReceivedEventTimes(0); }); describe("keyboard accessibility", () => { @@ -835,6 +838,7 @@ describe("calcite-time-picker", () => { const page = await newE2EPage({ html: ``, }); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); const meridiem = await page.find(`calcite-time-picker >>> .${CSS.meridiem}`); @@ -853,12 +857,15 @@ describe("calcite-time-picker", () => { expect(hour.textContent).toBe("12"); expect(meridiem.textContent).toBe("AM"); + + expect(changeEventSpy).toHaveReceivedEventTimes(2); }); it("changing AM/PM updates value property correctly for en lang (12-hour)", async () => { const page = await newE2EPage({ html: ``, }); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const timePicker = await page.find(`calcite-time-picker`); const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); @@ -880,12 +887,15 @@ describe("calcite-time-picker", () => { expect(hour.textContent).toBe("12"); expect(meridiem.textContent).toBe("AM"); expect(await timePicker.getProperty("value")).toBe("00:00:00"); + + expect(changeEventSpy).toHaveReceivedEventTimes(2); }); it("hour-up button increments hour property and display hour correctly for fr lang (24-hour)", async () => { const page = await newE2EPage({ html: ``, }); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); const hourUp = await page.find(`calcite-time-picker >>> .${CSS.buttonHourUp}`); @@ -900,12 +910,14 @@ describe("calcite-time-picker", () => { await page.waitForChanges(); expect(hour.textContent).toBe("00"); + expect(changeEventSpy).toHaveReceivedEventTimes(24); }); it("hour-down button decrements hour property and display hour correctly for fr lang (24-hour)", async () => { const page = await newE2EPage({ html: ``, }); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); const hourDown = await page.find(`calcite-time-picker >>> .${CSS.buttonHourDown}`); @@ -920,12 +932,15 @@ describe("calcite-time-picker", () => { expect(hour.textContent).toBe(formatTimePart(i)); } + + expect(changeEventSpy).toHaveReceivedEventTimes(24); }); it("hour-up button increments hour property and display hour correctly for en lang (12-hour)", async () => { const page = await newE2EPage({ html: ``, }); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); const hourUp = await page.find(`calcite-time-picker >>> .${CSS.buttonHourUp}`); @@ -935,12 +950,15 @@ describe("calcite-time-picker", () => { expect(hour.textContent).toBe(i > 12 ? formatTimePart(i - 12) : formatTimePart(i)); } + + expect(changeEventSpy).toHaveReceivedEventTimes(24); }); it("hour-down button decrements hour property and display hour correctly for en lang (12-hour)", async () => { const page = await newE2EPage({ html: ``, }); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`); const hourDown = await page.find(`calcite-time-picker >>> .${CSS.buttonHourDown}`); @@ -955,12 +973,15 @@ describe("calcite-time-picker", () => { expect(hour.textContent).toBe(i > 12 ? formatTimePart(i - 12) : formatTimePart(i)); } + + expect(changeEventSpy).toHaveReceivedEventTimes(24); }); it("minute-up button increments minute property correctly", async () => { const page = await newE2EPage({ html: ``, }); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const minute = await page.find(`calcite-time-picker >>> .${CSS.minute}`); const minuteUp = await page.find(`calcite-time-picker >>> .${CSS.buttonMinuteUp}`); @@ -975,12 +996,14 @@ describe("calcite-time-picker", () => { await page.waitForChanges(); expect(minute.textContent).toBe("00"); + expect(changeEventSpy).toHaveReceivedEventTimes(61); }); it("minute-down button decrements minute property correctly", async () => { const page = await newE2EPage({ html: ``, }); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const minute = await page.find(`calcite-time-picker >>> .${CSS.minute}`); const minuteDown = await page.find(`calcite-time-picker >>> .${CSS.buttonMinuteDown}`); @@ -995,12 +1018,14 @@ describe("calcite-time-picker", () => { await page.waitForChanges(); expect(minute.textContent).toBe("59"); + expect(changeEventSpy).toHaveReceivedEventTimes(61); }); it("second-up button increments second property correctly", async () => { const page = await newE2EPage({ html: ``, }); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const second = await page.find(`calcite-time-picker >>> .${CSS.second}`); const secondUp = await page.find(`calcite-time-picker >>> .${CSS.buttonSecondUp}`); @@ -1015,12 +1040,14 @@ describe("calcite-time-picker", () => { await page.waitForChanges(); expect(second.textContent).toBe("00"); + expect(changeEventSpy).toHaveReceivedEventTimes(61); }); it("second-down button decrements second property correctly", async () => { const page = await newE2EPage({ html: ``, }); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const second = await page.find(`calcite-time-picker >>> .${CSS.second}`); const secondDown = await page.find(`calcite-time-picker >>> .${CSS.buttonSecondDown}`); @@ -1031,16 +1058,19 @@ describe("calcite-time-picker", () => { expect(second.textContent).toBe(`${formatTimePart(i)}`); } + await secondDown.click(); await page.waitForChanges(); expect(second.textContent).toBe("59"); + expect(changeEventSpy).toHaveReceivedEventTimes(61); }); it("meridiem-up button increments meridiem property correctly", async () => { const page = await newE2EPage({ html: ``, }); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const meridiem = await page.find(`calcite-time-picker >>> .${CSS.meridiem}`); const meridiemUp = await page.find(`calcite-time-picker >>> .${CSS.buttonMeridiemUp}`); @@ -1058,12 +1088,15 @@ describe("calcite-time-picker", () => { await page.waitForChanges(); expect(meridiem.textContent).toBe("AM"); + + expect(changeEventSpy).toHaveReceivedEventTimes(3); }); it("meridiem-down button decrements meridiem property correctly", async () => { const page = await newE2EPage({ html: ``, }); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const meridiem = await page.find(`calcite-time-picker >>> .${CSS.meridiem}`); const meridiemDown = await page.find(`calcite-time-picker >>> .${CSS.buttonMeridiemDown}`); @@ -1081,6 +1114,8 @@ describe("calcite-time-picker", () => { await page.waitForChanges(); expect(meridiem.textContent).toBe("PM"); + + expect(changeEventSpy).toHaveReceivedEventTimes(3); }); it("time picker container direction is ltr when set to rtl on host", async () => { @@ -1152,6 +1187,7 @@ describe("calcite-time-picker", () => { it("upward nudge of empty fractional second sets to 00 for step=0.01", async () => { const page = await newE2EPage(); await page.setContent(``); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const [buttonUpLocationX, buttonUpLocationY] = await getElementXY( page, "calcite-time-picker", @@ -1161,11 +1197,13 @@ describe("calcite-time-picker", () => { await page.waitForChanges(); const fractionalSecondEl = await page.find(`calcite-time-picker >>> .input.fractionalSecond`); expect(fractionalSecondEl.textContent).toEqual("00"); + expect(changeEventSpy).toHaveReceivedEventTimes(1); }); it("upward nudge of empty fractional second sets to 000 for step=0.001", async () => { const page = await newE2EPage(); await page.setContent(``); + const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange"); const [buttonUpLocationX, buttonUpLocationY] = await getElementXY( page, "calcite-time-picker", @@ -1175,6 +1213,7 @@ describe("calcite-time-picker", () => { await page.waitForChanges(); const fractionalSecondEl = await page.find(`calcite-time-picker >>> .input.fractionalSecond`); expect(fractionalSecondEl.textContent).toEqual("000"); + expect(changeEventSpy).toHaveReceivedEventTimes(1); }); }); 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 0861ca6a8e6..8c96d1cede6 100644 --- a/packages/calcite-components/src/components/time-picker/time-picker.tsx +++ b/packages/calcite-components/src/components/time-picker/time-picker.tsx @@ -164,8 +164,7 @@ export class TimePicker extends LitElement implements LoadableComponent { // #region Events - /** @private */ - calciteInternalTimePickerChange = createEvent({ cancelable: false }); + calciteTimePickerChange = createEvent({ cancelable: false }); // #endregion @@ -853,7 +852,7 @@ export class TimePicker extends LitElement implements LoadableComponent { })?.localizedMeridiem || null : localizeTimePart({ value: this.meridiem, part: "meridiem", locale, numberingSystem }); if (emit) { - this.calciteInternalTimePickerChange.emit(); + this.calciteTimePickerChange.emit(); } }