Skip to content

Commit

Permalink
fix(input-date-picker): ensure range input toggling is consistent (#8414
Browse files Browse the repository at this point in the history 
)

**Related Issue:** #6501 

## Summary

This fixes an issue where the start/end picker would not update after
being toggled and displayed on the toggled side.
  • Loading branch information
@jcfranco
jcfranco authored Dec 15, 2023
1 parent f5c28cc commit cd92586
Show file tree
Hide file tree
Showing 4 changed files with 314 additions and 67 deletions.
294 changes: 259 additions & 35 deletions packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,11 @@ describe("calcite-input-date-picker", () => {
await input.click();
await page.waitForChanges();
await page.waitForTimeout(animationDurationInMs);
const wrapper = await page.waitForFunction(() =>
document.querySelector("calcite-input-date-picker").shadowRoot.querySelector(".calendar-picker-wrapper")
const wrapper = await page.waitForFunction(
(calendarWrapperClass: string) =>
document.querySelector("calcite-input-date-picker").shadowRoot.querySelector(`.${calendarWrapperClass}`),
{},
CSS.calendarWrapper
);
expect(await wrapper.isIntersectingViewport()).toBe(true);

Expand Down Expand Up @@ -202,9 +205,13 @@ describe("calcite-input-date-picker", () => {
await page.waitForChanges();
await page.waitForTimeout(animationDurationInMs);

const wrapper = await page.waitForFunction(() =>
document.querySelector("calcite-input-date-picker").shadowRoot.querySelector(".calendar-picker-wrapper")
const wrapper = await page.waitForFunction(
(calendarWrapperClass: string) =>
document.querySelector("calcite-input-date-picker").shadowRoot.querySelector(`.${calendarWrapperClass}`),
{},
CSS.calendarWrapper
);

expect(await wrapper.isIntersectingViewport()).toBe(true);

const inputtedStartDate = "1/1/2020";
Expand Down Expand Up @@ -318,50 +325,267 @@ describe("calcite-input-date-picker", () => {
let page: E2EPage;
let inputDatePicker: E2EElement;

beforeEach(async () => {
page = await newE2EPage();
await page.setContent(html` <calcite-input-date-picker value="2000-11-27"></calcite-input-date-picker>`);
await skipAnimations(page);
await page.waitForChanges();
inputDatePicker = await page.find("calcite-input-date-picker");
});
describe("single value", () => {
beforeEach(async () => {
page = await newE2EPage();
await page.setContent(html` <calcite-input-date-picker value="2000-11-27"></calcite-input-date-picker>`);
await skipAnimations(page);
await page.waitForChanges();
inputDatePicker = await page.find("calcite-input-date-picker");
});

it("toggles the date picker when clicked", async () => {
let calendar = await page.find("calcite-input-date-picker >>> .calendar-picker-wrapper");
it("toggles the date picker when clicked", async () => {
let calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);

expect(await calendar.isVisible()).toBe(false);
expect(await calendar.isVisible()).toBe(false);

await inputDatePicker.click();
await page.waitForChanges();
calendar = await page.find("calcite-input-date-picker >>> .calendar-picker-wrapper");
await inputDatePicker.click();
await page.waitForChanges();
calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);

expect(await calendar.isVisible()).toBe(true);
expect(await calendar.isVisible()).toBe(true);

await inputDatePicker.click();
await page.waitForChanges();
calendar = await page.find("calcite-input-date-picker >>> .calendar-picker-wrapper");
await inputDatePicker.click();
await page.waitForChanges();
calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);

expect(await calendar.isVisible()).toBe(false);
});

it("toggles the date picker when using arrow down/escape key", async () => {
let calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);

expect(await calendar.isVisible()).toBe(false);

expect(await calendar.isVisible()).toBe(false);
await inputDatePicker.callMethod("setFocus");
await page.waitForChanges();
await page.keyboard.press("ArrowDown");
await page.waitForChanges();
calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);

expect(await calendar.isVisible()).toBe(true);

await page.keyboard.press("Escape");
await page.waitForChanges();
calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);

expect(await calendar.isVisible()).toBe(false);
});
});

it("toggles the date picker when using arrow down/escape key", async () => {
let calendar = await page.find("calcite-input-date-picker >>> .calendar-picker-wrapper");
describe("range", () => {
beforeEach(async () => {
page = await newE2EPage();
await page.setContent(html` <calcite-input-date-picker range></calcite-input-date-picker>`);
await skipAnimations(page);
await page.waitForChanges();
inputDatePicker = await page.find("calcite-input-date-picker");
});

expect(await calendar.isVisible()).toBe(false);
async function isCalendarVisible(calendar: E2EElement, type: "start" | "end"): Promise<boolean> {
const calendarPosition = calendar.classList.contains(CSS.calendarWrapperEnd) ? "end" : "start";
return (await calendar.isVisible()) && calendarPosition === type;
}

await inputDatePicker.callMethod("setFocus");
await page.waitForChanges();
await page.keyboard.press("ArrowDown");
await page.waitForChanges();
calendar = await page.find("calcite-input-date-picker >>> .calendar-picker-wrapper");
it("toggles the date picker when clicked", async () => {
const calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);

expect(await calendar.isVisible()).toBe(true);
expect(await isCalendarVisible(calendar, "start")).toBe(false);
expect(await isCalendarVisible(calendar, "end")).toBe(false);

await page.keyboard.press("Escape");
await page.waitForChanges();
calendar = await page.find("calcite-input-date-picker >>> .calendar-picker-wrapper");
const startInput = await page.find(
`calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="start"] calcite-input-text`
);
const startInputToggle = await page.find(
`calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="start"] .${CSS.toggleIcon}`
);

const endInput = await page.find(
`calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="end"] calcite-input-text`
);
const endInputToggle = await page.find(
`calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="end"] .${CSS.toggleIcon}`
);

// toggling via start date input

await startInput.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(true);

await startInput.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(false);

// toggling via start date toggle icon

await startInputToggle.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(true);

await startInputToggle.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(false);

// toggling via end date input

await endInput.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(true);

await endInput.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(false);

// toggling via end date toggle icon

await endInputToggle.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(true);

await endInputToggle.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(false);

// toggling via start date input and toggle icon

await startInput.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(true);

await startInputToggle.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(false);

expect(await calendar.isVisible()).toBe(false);
// toggling via start toggle icon and date input

await startInputToggle.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(true);

await startInput.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(false);

// toggling via end date input and toggle icon

await endInput.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(true);

await endInputToggle.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(false);

// toggling via end toggle icon and date input

await endInputToggle.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(true);

await endInput.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(false);

// toggling via start date input and end toggle icon

await startInput.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(true);

await endInputToggle.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(true);

// toggling via start toggle icon and date input

await startInputToggle.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(true);

await endInput.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(true);

// close
await endInput.click();
await page.waitForChanges();

// toggling via end date input and start toggle icon

await endInput.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(true);

await startInputToggle.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(true);

// toggling via end toggle icon and start date input

await endInputToggle.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(true);

await startInput.click();
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(true);
});

it("toggles the date picker when using arrow down/escape key", async () => {
const calendar = await page.find(`calcite-input-date-picker >>> .${CSS.calendarWrapper}`);

expect(await isCalendarVisible(calendar, "start")).toBe(false);
expect(await isCalendarVisible(calendar, "end")).toBe(false);

await inputDatePicker.callMethod("setFocus");
await page.waitForChanges();
await page.keyboard.press("ArrowDown");
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(true);

await page.keyboard.press("Escape");
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "start")).toBe(false);

await page.keyboard.press("Tab");

await page.keyboard.press("ArrowDown");
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(true);

await page.keyboard.press("Escape");
await page.waitForChanges();

expect(await isCalendarVisible(calendar, "end")).toBe(false);
});
});
});

Expand Down
4 changes: 2 additions & 2 deletions packages/calcite-components/src/components/input-date-picker/input-date-picker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@

@include disabled();

.calendar-picker-wrapper {
.calendar-wrapper {
@apply shadow-none;
transform: translate3d(0, 0, 0);
}
Expand Down Expand Up @@ -79,7 +79,7 @@
items-start;
}

.calendar-picker-wrapper--end {
.calendar-wrapper--end {
transform: translate3d(0, 0, 0);
}

Expand Down
Loading

0 comments on commit cd92586

Please sign in to comment.