Skip to content

Commit

Permalink
feat(time-picker): expose calciteTimePickerChange event (#11214)
Browse files Browse the repository at this point in the history 
**Related Issue:** #10102 

## Summary

Exposes previously internal event.
  • Loading branch information
@jcfranco
jcfranco authored Jan 8, 2025
1 parent 3529d0c commit d33cb31
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 4 deletions.
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
39 changes: 39 additions & 0 deletions packages/calcite-components/src/components/time-picker/time-picker.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,7 @@ describe("calcite-time-picker", () => {
const page = await newE2EPage({
html: `<calcite-time-picker step="1" value="${originalValue}"></calcite-time-picker>`,
});
const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange");

const timePicker = await page.find("calcite-time-picker");
const hourEl = await page.find(`calcite-time-picker >>> .${CSS.hour}`);
Expand All @@ -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", () => {
Expand Down Expand Up @@ -835,6 +838,7 @@ describe("calcite-time-picker", () => {
const page = await newE2EPage({
html: `<calcite-time-picker value="00:00:00"></calcite-time-picker>`,
});
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}`);
Expand All @@ -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: `<calcite-time-picker value="00:00:00" step="1"></calcite-time-picker>`,
});
const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange");

const timePicker = await page.find(`calcite-time-picker`);
const hour = await page.find(`calcite-time-picker >>> .${CSS.hour}`);
Expand All @@ -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: `<calcite-time-picker lang="fr"></calcite-time-picker>`,
});
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}`);

Expand All @@ -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: `<calcite-time-picker lang="fr"></calcite-time-picker>`,
});
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}`);

Expand All @@ -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: `<calcite-time-picker></calcite-time-picker>`,
});
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}`);

Expand All @@ -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: `<calcite-time-picker></calcite-time-picker>`,
});
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}`);

Expand All @@ -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: `<calcite-time-picker></calcite-time-picker>`,
});
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}`);

Expand All @@ -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: `<calcite-time-picker></calcite-time-picker>`,
});
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}`);

Expand All @@ -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: `<calcite-time-picker step="1"></calcite-time-picker>`,
});
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}`);

Expand All @@ -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: `<calcite-time-picker step="1"></calcite-time-picker>`,
});
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}`);

Expand All @@ -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: `<calcite-time-picker></calcite-time-picker>`,
});
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}`);

Expand All @@ -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: `<calcite-time-picker></calcite-time-picker>`,
});
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}`);

Expand All @@ -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 () => {
Expand Down Expand Up @@ -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(`<calcite-time-picker step="0.01"></calcite-time-picker>`);
const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange");
const [buttonUpLocationX, buttonUpLocationY] = await getElementXY(
page,
"calcite-time-picker",
Expand All @@ -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(`<calcite-time-picker step="0.001"></calcite-time-picker>`);
const changeEventSpy = await page.spyOnEvent("calciteTimePickerChange");
const [buttonUpLocationX, buttonUpLocationY] = await getElementXY(
page,
"calcite-time-picker",
Expand All @@ -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);
});
});

Expand Down
5 changes: 2 additions & 3 deletions packages/calcite-components/src/components/time-picker/time-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,8 +164,7 @@ export class TimePicker extends LitElement implements LoadableComponent {

// #region Events

/** @private */
calciteInternalTimePickerChange = createEvent({ cancelable: false });
calciteTimePickerChange = createEvent({ cancelable: false });

// #endregion

Expand Down Expand Up @@ -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();
}
}

Expand Down

0 comments on commit d33cb31

Please sign in to comment.