feat(ui5-daterange-picker): two months mode is implemented

packages/main/cypress/specs/DateRangePicker.mobile.cy.tsx

@@ -0,0 +1,236 @@
+import DateRangePicker from "../../src/DateRangePicker.js";
+
+type DateTimePickerTemplateOptions = Partial<{
+	formatPattern: string;
+	delimiter: string;
+	onChange: () => void;
+	value: string;
+	minDate: string;
+	maxDate: string;
+}>
+
+function DateRangePickerTemplate(options: DateTimePickerTemplateOptions) {
+	return <DateRangePicker {...options} />
+}
+
+describe("DateRangePicker mobile footer interactions", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice("phone");
+	});
+
+	it("OK button is disabled when no dates are selected", () => {
+		cy.mount(<DateRangePickerTemplate formatPattern="dd/MM/yyyy" />);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.realClick()
+			.should("be.focused");
+
+		cy.realPress("F4");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerExpectToBeOpen();
+
+		// Get the responsive popover and look for the button in its light DOM
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerGetPopover()
+			.within(() => {
+				cy.get("#ok")
+					.should("exist")
+					.and("have.attr", "disabled");
+			});
+	});
+
+	it("OK button is disabled when only one date is selected", () => {
+		cy.mount(<DateRangePickerTemplate formatPattern="dd/MM/yyyy" />);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.realClick()
+			.should("be.focused");
+
+		cy.realPress("F4");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerExpectToBeOpen();
+
+		// Select first date
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerSelectRange(5);
+
+		// OK button should still be disabled
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerGetPopover()
+			.within(() => {
+				cy.get("#ok")
+					.should("exist")
+					.and("have.attr", "disabled");
+			});
+	});
+
+	it("OK button is enabled when two dates are selected", () => {
+		cy.mount(<DateRangePickerTemplate formatPattern="dd/MM/yyyy" />);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.realClick()
+			.should("be.focused");
+
+		cy.realPress("F4");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerExpectToBeOpen();
+
+		// Select date range
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerSelectRange(5, 15);
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerGetPopover()
+			.within(() => {
+				cy.get("#ok")
+					.should("exist")
+					.and("not.have.attr", "disabled");
+			});
+	});
+
+	it("OK button confirms the selection and closes the picker", () => {
+		cy.mount(<DateRangePickerTemplate formatPattern="dd/MM/yyyy" onChange={cy.stub().as("changeStub")} />);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.realClick()
+			.should("be.focused");
+
+		cy.realPress("F4");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerExpectToBeOpen();
+
+		// Select date range
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerSelectRange(5, 15);
+
+		// Click OK button
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerGetPopover()
+			.within(() => {
+				cy.get("#ok").realClick();
+			});
+
+		// Picker should be closed
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.should("have.prop", "open", false);
+
+		// Change event should be fired
+		cy.get("@changeStub")
+			.should("be.calledOnce");
+
+		// Value should be set
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.should("have.attr", "value")
+			.and("match", /\d{2}\/\d{2}\/\d{4} - \d{2}\/\d{2}\/\d{4}/);
+	});
+
+	it("Cancel button clears the selection and closes the picker", () => {
+		cy.mount(<DateRangePickerTemplate formatPattern="dd/MM/yyyy" value="01/01/2020 - 05/01/2020" />);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.realClick()
+			.should("be.focused");
+
+		cy.realPress("F4");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerExpectToBeOpen();
+
+		// Click Cancel button
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerGetPopover()
+			.within(() => {
+				cy.get("#cancel").realClick();
+			});
+
+		// Picker should be closed
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.should("have.prop", "open", false);
+
+		// Value should be cleared
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "");
+	});
+
+	it("Change event is not fired immediately on date selection in mobile mode", () => {
+		cy.mount(<DateRangePickerTemplate formatPattern="dd/MM/yyyy" onChange={cy.stub().as("changeStub")} />);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.realClick()
+			.should("be.focused");
+
+		cy.realPress("F4");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerExpectToBeOpen();
+
+		// Select date range
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerSelectRange(5, 15);
+
+		// Change event should not be fired yet (only value-changed is fired internally)
+		cy.get("@changeStub")
+			.should("not.be.called");
+
+		// Picker should still be open
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerExpectToBeOpen();
+	});
+
+	it("Change event is fired only after OK button click on mobile", () => {
+		cy.mount(<DateRangePickerTemplate formatPattern="dd/MM/yyyy" onChange={cy.stub().as("changeStub")} />);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("[ui5-datetime-input]")
+			.realClick()
+			.should("be.focused");
+
+		cy.realPress("F4");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerExpectToBeOpen();
+
+		// Select date range
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerSelectRange(5, 15);
+
+		// Change event should not be fired yet
+		cy.get("@changeStub")
+			.should("not.be.called");
+
+		// Click OK button
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.ui5DateRangePickerGetPopover()
+			.within(() => {
+				cy.get("#ok").realClick();
+			});
+
+		// Now change event should be fired
+		cy.get("@changeStub")
+			.should("be.calledOnce");
+	});
+});

packages/main/cypress/support/commands/DateRangePicker.commands.ts

@@ -7,14 +7,108 @@ Cypress.Commands.add("ui5DateRangePickerOpen", { prevSubject: true }, (subject:
 	cy.wrap(subject).ui5DateRangePickerExpectToBeOpen()
 });
 
+Cypress.Commands.add("ui5DateRangePickerGetPopover", { prevSubject: true }, (subject: JQuery<DateRangePicker>) => {
+	return cy.wrap(subject)
+		.shadow()
+		.find<ResponsivePopover>("[ui5-responsive-popover]");
+});
+
 Cypress.Commands.add("ui5DateRangePickerExpectToBeOpen", { prevSubject: true }, (subject: JQuery<DateRangePicker>) => {
 	cy.wrap(subject)
 		.should("have.prop", "open", true);
 
 	cy.wrap(subject)
-		.shadow()
-		.find<ResponsivePopover>("[ui5-responsive-popover]")
+		.ui5DateRangePickerGetPopover()
 		.ui5ResponsivePopoverOpened();
+
+	return cy.wrap(subject);
+});
+
+Cypress.Commands.add("ui5DateRangePickerSelectRange", { prevSubject: true }, (subject: JQuery<DateRangePicker>, startIndex: number, endIndex?: number) => {
+	cy.wrap(subject)
+		.shadow()
+		.find("[ui5-calendar]")
+		.shadow()
+		.find("[ui5-daypicker]")
+		.shadow()
+		.find(".ui5-dp-root .ui5-dp-content div > .ui5-dp-item")
+		.as("dateItems");
+
+	cy.get("@dateItems")
+		.eq(startIndex)
+		.realClick();
+
+	if (endIndex) {
+		cy.get("@dateItems")
+		.eq(endIndex)
+		.realClick();
+	}
+});
+
+Cypress.Commands.add("ui5DateRangePickerGetCalendar", { prevSubject: true }, (subject: JQuery<DateRangePicker>) => {
+	return cy.wrap(subject)
+		.shadow()
+		.find("[ui5-calendar]");
+});
+
+Cypress.Commands.add("ui5DateRangePickerGetMonthContainers", { prevSubject: true }, (subject: JQuery<DateRangePicker>) => {
+	return cy.wrap(subject)
+		.ui5DateRangePickerGetCalendar()
+		.shadow()
+		.find(".ui5-cal-month-container");
+});
+
+Cypress.Commands.add("ui5DateRangePickerExpectMonthContainerCount", { prevSubject: true }, (subject: JQuery<DateRangePicker>, count: number) => {
+	cy.wrap(subject)
+		.ui5DateRangePickerGetMonthContainers()
+		.should("have.length", count);
+});
+
+Cypress.Commands.add("ui5DateRangePickerGetDayPicker", { prevSubject: true }, (subject: JQuery<DateRangePicker>, index: number) => {
+	return cy.wrap(subject)
+		.ui5DateRangePickerGetMonthContainers()
+		.eq(index)
+		.find(`[id$='-daypicker-${index}']`);
+});
+
+Cypress.Commands.add("ui5DateRangePickerGetCalendarHeaders", { prevSubject: true }, (subject: JQuery<DateRangePicker>) => {
+	return cy.wrap(subject)
+		.ui5DateRangePickerGetCalendar()
+		.shadow()
+		.find(".ui5-calheader");
+});
+
+Cypress.Commands.add("ui5DateRangePickerClickDateInCalendar", { prevSubject: true }, (subject: JQuery<DateRangePicker>, calendarIndex: number, dateIndex: number) => {
+	cy.wrap(subject)
+		.ui5DateRangePickerGetDayPicker(calendarIndex)
+		.shadow()
+		.find("[data-sap-timestamp]")
+		.eq(dateIndex)
+		.realClick();
+});
+
+Cypress.Commands.add("ui5DateRangePickerVerifySelectedDatesInCalendar", { prevSubject: true }, (subject: JQuery<DateRangePicker>, calendarIndex: number) => {
+	cy.wrap(subject)
+		.ui5DateRangePickerGetDayPicker(calendarIndex)
+		.shadow()
+		.find(".ui5-dp-item--selected")
+		.should("exist");
+});
+
+Cypress.Commands.add("ui5DateRangePickerClickNavigationButton", { prevSubject: true }, (subject: JQuery<DateRangePicker>, button: "next" | "prev") => {
+	cy.wrap(subject)
+		.ui5DateRangePickerGetCalendar()
+		.shadow()
+		.find(`[data-ui5-cal-header-btn-${button}]`)
+		.realClick();
+});
+
+Cypress.Commands.add("ui5DateRangePickerVerifyMonthText", { prevSubject: true }, (subject: JQuery<DateRangePicker>, headerIndex: number, expectedText: string) => {
+	cy.wrap(subject)
+		.ui5DateRangePickerGetCalendarHeaders()
+		.eq(headerIndex)
+		.find("[data-ui5-cal-header-btn-month]")
+		.should("contain.text", expectedText);
 });
 
 declare global {
@@ -23,8 +117,51 @@ declare global {
 			ui5DateRangePickerOpen(
 				this: Chainable<JQuery<DateRangePicker>>,
 			): Chainable<void>;
+			ui5DateRangePickerGetPopover(
+				this: Chainable<JQuery<DateRangePicker>>,
+			): Chainable<JQuery<ResponsivePopover>>;
 			ui5DateRangePickerExpectToBeOpen(
 				this: Chainable<JQuery<DateRangePicker>>,
+			): Chainable<JQuery<DateRangePicker>>;
+			ui5DateRangePickerSelectRange(
+				this: Chainable<JQuery<DateRangePicker>>,
+				startIndex: number,
+				endIndex?: number,
+			): Chainable<void>;
+			ui5DateRangePickerGetCalendar(
+				this: Chainable<JQuery<DateRangePicker>>,
+			): Chainable<JQuery<HTMLElement>>;
+			ui5DateRangePickerGetMonthContainers(
+				this: Chainable<JQuery<DateRangePicker>>,
+			): Chainable<JQuery<HTMLElement>>;
+			ui5DateRangePickerExpectMonthContainerCount(
+				this: Chainable<JQuery<DateRangePicker>>,
+				count: number,
+			): Chainable<void>;
+			ui5DateRangePickerGetDayPicker(
+				this: Chainable<JQuery<DateRangePicker>>,
+				index: number,
+			): Chainable<JQuery<HTMLElement>>;
+			ui5DateRangePickerGetCalendarHeaders(
+				this: Chainable<JQuery<DateRangePicker>>,
+			): Chainable<JQuery<HTMLElement>>;
+			ui5DateRangePickerClickDateInCalendar(
+				this: Chainable<JQuery<DateRangePicker>>,
+				calendarIndex: number,
+				dateIndex: number,
+			): Chainable<void>;
+			ui5DateRangePickerVerifySelectedDatesInCalendar(
+				this: Chainable<JQuery<DateRangePicker>>,
+				calendarIndex: number,
+			): Chainable<void>;
+			ui5DateRangePickerClickNavigationButton(
+				this: Chainable<JQuery<DateRangePicker>>,
+				button: "next" | "prev",
+			): Chainable<void>;
+			ui5DateRangePickerVerifyMonthText(
+				this: Chainable<JQuery<DateRangePicker>>,
+				headerIndex: number,
+				expectedText: string,
 			): Chainable<void>;
 		}
 	}