@ui5/webcomponents 2.10.0-rc.1 → 2.10.0-rc.3

package/cypress/specs/DateTimePicker.cy.tsx

@@ -31,60 +31,66 @@ describe("DateTimePicker general interaction", () => {
 		const PREVIOUS_VALUE = "13/04/2020, 03:16:16 AM";
 
 		cy.mount(<DateTimePicker id="dtSeconds" formatPattern="dd/MM/yyyy, hh:mm:ss a" value={PREVIOUS_VALUE} />);
-		cy.ui5DateTimePickerOpen("#dtSeconds");
 
-		cy.get("#dtSeconds")
+		cy.get<DateTimePicker>("#dtSeconds")
+			.as("dtp")
+			.ui5DateTimePickerOpen();
+
+		cy.get("@dtp")
 			.shadow()
 			.find("ui5-datetime-input")
 			.should("have.value", PREVIOUS_VALUE);
 
-		cy.ui5DateTimePickerGetPopover("#dtSeconds").within(() => {
-			// Adjust hours:
-			cy.get("ui5-time-selection-clocks")
-				.shadow()
-				.as("clocks");
-
-			cy.get("@clocks")
-				.find(`ui5-toggle-spin-button[data-ui5-clock="hours"]`)
-				.realClick()
-				.should("be.focused");
-
-			cy.realPress("ArrowDown");
-			cy.realPress("Space");
-
-			// Adjust minutes.
-			cy.get("@clocks")
-				.find(`ui5-toggle-spin-button[data-ui5-clock="minutes"]`)
-				.realClick()
-				.should("be.focused");
-
-			cy.realPress("ArrowDown");
-			cy.realPress("ArrowDown");
-			cy.realPress("Space");
-
-			// Adjust seconds.
-			cy.get("@clocks")
-				.find(`ui5-toggle-spin-button[data-ui5-clock="seconds"]`)
-				.realClick()
-				.should("be.focused");
-
-			cy.realPress("ArrowUp");
-			cy.realPress("ArrowUp");
-			cy.realPress("ArrowUp");
-			cy.realType("p");
-
-			// Confirm.
-			cy.get("#ok").realClick();
-		});
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerGetPopover()
+			.within(() => {
+				// Adjust hours:
+				cy.get("[ui5-time-selection-clocks]")
+					.shadow()
+					.as("clocks");
+
+				cy.get("@clocks")
+					.find(`[ui5-toggle-spin-button][data-ui5-clock="hours"]`)
+					.realClick()
+					.should("be.focused");
+
+				cy.realPress("ArrowDown");
+				cy.realPress("Space");
+
+				// Adjust minutes.
+				cy.get("@clocks")
+					.find(`[ui5-toggle-spin-button][data-ui5-clock="minutes"]`)
+					.realClick()
+					.should("be.focused");
+
+				cy.realPress("ArrowDown");
+				cy.realPress("ArrowDown");
+				cy.realPress("Space");
+
+				// Adjust seconds.
+				cy.get("@clocks")
+					.find(`[ui5-toggle-spin-button][data-ui5-clock="seconds"]`)
+					.realClick()
+					.should("be.focused");
+
+				cy.realPress("ArrowUp");
+				cy.realPress("ArrowUp");
+				cy.realPress("ArrowUp");
+				cy.realType("p");
+
+				// Confirm.
+				cy.get("#ok").realClick();
+			});
 
 		// Only the time parts have been updated.
-		cy.get("#dtSeconds")
+		cy.get<DateTimePicker>("@dtp")
 			.shadow()
 			.find("ui5-datetime-input")
 			.should("be.focused")
 			.should("have.attr", "value", "13/04/2020, 02:14:19 PM");
 
-		cy.ui5DateTimePickerIsOpen("#dtSeconds").should("equal", false);
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerExpectToBeClosed();
 
 		setAnimationMode(AnimationMode.Full);
 	});
@@ -92,58 +98,74 @@ describe("DateTimePicker general interaction", () => {
 	it("tests picker opens/closes programmatically", () => {
 		cy.mount(<DefaultDateTimePicker />);
 
-		cy.ui5DateTimePickerOpen("#dt");
-		cy.ui5DateTimePickerIsOpen("#dt").should("equal", true);
-		cy.ui5DateTimePickerClose("#dt");
-		cy.ui5DateTimePickerIsOpen("#dt").should("equal", false);
+		cy.get<DateTimePicker>("#dt")
+			.as("dtp")
+			.ui5DateTimePickerOpen();
+
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerExpectToBeOpen();
+
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerClose();
+
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerExpectToBeClosed();
 	});
 
 	// Unstable but valid test, needs to be individually observed
-	it.skip("tests selection of new date", () => {
+	it("tests selection of new date", () => {
 		setAnimationMode(AnimationMode.None);
 		const PREVIOUS_VALUE = "13/04/2020, 03:16:16 AM";
 
 		cy.mount(<DateTimePicker id="dtSeconds" formatPattern="dd/MM/yyyy, hh:mm:ss a" value={PREVIOUS_VALUE} />);
-		cy.ui5DateTimePickerOpen("#dtSeconds");
+
+		cy.get<DateTimePicker>("#dtSeconds")
+			.as("dtp")
+			.ui5DateTimePickerOpen();
 
 		cy.get("#dtSeconds")
 			.shadow()
 			.as("DateTimePicker");
 
-		cy.get("@DateTimePicker")
+		cy.get("@dtp")
+			.shadow()
 			.find("ui5-datetime-input")
 			.should("have.value", PREVIOUS_VALUE);
 
-		cy.ui5DateTimePickerGetPopover("#dtSeconds").within(() => {
-			// Click the currently selected day and then move to the next day.
-			cy.get("ui5-calendar")
-				.shadow()
-				.as("calendar");
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerGetPopover()
+			.within(() => {
+				// Click the currently selected day and then move to the next day.
+				cy.get("[ui5-calendar]")
+					.shadow()
+					.as("calendar");
 
-			cy.get("@calendar")
-				.find("ui5-daypicker")
-				.shadow()
-				.as("daypicker")
+				cy.get("@calendar")
+					.find("ui5-daypicker")
+					.shadow()
+					.as("daypicker")
 
-			cy.get("@daypicker")
-				.find(".ui5-dp-item--selected")
-				.realClick()
-				.should("be.focused");
+				cy.get("@daypicker")
+					.find(".ui5-dp-item--selected")
+					.realClick()
+					.should("be.focused");
 
-			cy.realPress("ArrowRight");
-			cy.realPress("Space");
+				cy.realPress("ArrowRight");
+				cy.realPress("Space");
 
-			// Confirm the change.
-			cy.get("#ok").realClick();
-		});
+				// Confirm the change.
+				cy.get("#ok").realClick();
+			});
 
 		// Only the date has changed; the time remains the same.
-		cy.get("@DateTimePicker")
+		cy.get("@dtp")
+			.shadow()
 			.find("ui5-datetime-input")
 			.should("be.focused")
 			.should("have.attr", "value", "14/04/2020, 03:16:16 AM");
 
-		cy.ui5DateTimePickerIsOpen("#dtSeconds").should("equal", false);
+		cy.get<DateTimePicker>("@dtp").ui5DateTimePickerExpectToBeClosed();
+
 		setAnimationMode(AnimationMode.Full);
 	});
 
@@ -152,57 +174,81 @@ describe("DateTimePicker general interaction", () => {
 		setAnimationMode(AnimationMode.None);
 
 		const PREVIOUS_VALUE = "14/04/2020, 02:14:19 PM";
-		cy.mount(<DateTimePickerWithSeconds initialValue={PREVIOUS_VALUE} />);
+		cy.mount(<>
+			<button>before</button>
+			<DateTimePickerWithSeconds initialValue={PREVIOUS_VALUE} />
+		</>);
 
 		cy.get("#dtSeconds")
+			.as("dtp")
 			.shadow()
-			.find("ui5-datetime-input")
+			.find("[ui5-datetime-input]")
 			.should("have.value", PREVIOUS_VALUE);
 
-		// Simulate keyboard interactions
+		cy.get("button")
+			.contains("before")
+			.realClick();
+
+		cy.get("button")
+			.contains("before")
+			.should("be.focused");
+
 		cy.realPress("Tab");
-		cy.realPress(["Shift", "Tab"]);
-		cy.realPress("Backspace");
-		cy.get("#dtSeconds")
+
+		// Simulate keyboard interactions
+		cy.get("@dtp")
 			.shadow()
-			.find("ui5-datetime-input")
-			.realClick()
+			.find("[ui5-datetime-input]")
 			.should("be.focused");
+
+		cy.realPress("Backspace");
 		cy.realType("wrongtext");
 		cy.realPress("Tab");
 
-		cy.ui5DateTimePickerOpen("#dtSeconds");
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerOpen();
+
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerExpectToBeOpen();
 
-		// Act
 		let selectedDate = "";
-		cy.ui5DateTimePickerGetPopover("#dtSeconds").within(() => {
-			cy.get("ui5-calendar")
-				.shadow()
-				.as("calendar");
-
-			cy.get("@calendar")
-				.find("ui5-daypicker")
-				.shadow()
-				.as("daypicker");
-
-			cy.get("@daypicker")
-				.find(".ui5-dp-item--now")
-				.should("be.focused")
-				.then($el => {
-					const timestamp = $el.attr("data-sap-timestamp") || "";
-					const date = new Date(parseInt(timestamp) * 1000);
-					selectedDate = `${String(date.getDate()).padStart(2, "0")}/${String(date.getMonth() + 1).padStart(2, "0")}/${date.getFullYear()}`;
-				})
-				.realClick();
-
-			cy.get("#ok").realClick();
-		});
 
-		cy.get("#dtSeconds")
-			.shadow()
-			.find("ui5-datetime-input")
-			.should("be.focused")
-			.should("have.attr", "value", selectedDate + ", 02:14:19 PM");
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerGetPopover()
+			.within(() => {
+				cy.get("[ui5-calendar]")
+					.shadow()
+					.as("calendar");
+
+				cy.get("@calendar")
+					.find("ui5-daypicker")
+					.shadow()
+					.as("daypicker");
+
+				cy.get("@daypicker")
+					.find(".ui5-dp-item--now")
+					.realClick();
+
+				cy.get("@daypicker")
+					.find(".ui5-dp-item--now")
+					.should("be.focused")
+					.then($el => {
+						const timestamp = $el.attr("data-sap-timestamp") || "";
+						const date = new Date(parseInt(timestamp) * 1000);
+						selectedDate = `${String(date.getDate()).padStart(2, "0")}/${String(date.getMonth() + 1).padStart(2, "0")}/${date.getFullYear()}`;
+					})
+			})
+			.then(() => {
+				cy.get<DateTimePicker>("@dtp")
+					.ui5DateTimePickerGetSubmitButton()
+					.realClick();
+
+				cy.get("#dtSeconds")
+					.shadow()
+					.find("ui5-datetime-input")
+					.should("be.focused")
+					.and("have.attr", "value", selectedDate + ", 02:14:19 PM");
+			});
 
 		setAnimationMode(AnimationMode.Full);
 	});
@@ -213,19 +259,21 @@ describe("DateTimePicker general interaction", () => {
 
 		cy.mount(<DateTimePickerWithSeconds />);
 
-		cy.ui5DateTimePickerOpen("#dtSeconds");
+		cy.get<DateTimePicker>("#dtSeconds")
+			.as("dtp")
+			.ui5DateTimePickerOpen();
+
 
-		cy.ui5DateTimePickerTimeSelectionClocksCount("#dtSeconds").then(clocksCount => {
-			expect(clocksCount).to.equal(expectedClocksCount,
-				"The picker should display 3 clocks for hours, minutes and seconds.");
-		});
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerTimeSelectionClocksCount()
+			.should("be.equal", expectedClocksCount)
 
-		cy.ui5DateTimePickerPeriodSegmentedButtonCount("#dtSeconds").then(periodCount => {
-			expect(periodCount).to.equal(expectedPeriodCount,
-				"The picker should display 1 period selector.");
-		});
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerPeriodSegmentedButtonCount()
+			.should("be.equal", expectedPeriodCount)
 
-		cy.ui5DateTimePickerClose("#dtSeconds");
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerClose();
 	});
 
 	it("tests time controls for dtMinutes picker", () => {
@@ -234,51 +282,66 @@ describe("DateTimePicker general interaction", () => {
 
 		cy.mount(<DateTimePickerWithMinutes />);
 
-		cy.ui5DateTimePickerOpen("#dtMinutes");
+		cy.get<DateTimePicker>("#dtMinutes")
+			.as("dtp")
+			.ui5DateTimePickerOpen();
+
 
-		cy.ui5DateTimePickerTimeSelectionClocksCount("#dtMinutes").then(clocksCount => {
-			expect(clocksCount).to.equal(expectedClocksCount,
-				"The picker should display 2 clocks for hours and minutes.");
-		});
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerTimeSelectionClocksCount()
+			.should("be.equal", expectedClocksCount)
 
-		cy.ui5DateTimePickerPeriodSegmentedButtonCount("#dtMinutes").then(periodCount => {
-			expect(periodCount).to.equal(expectedPeriodCount,
-				"The picker should display 1 period selector.");
-		});
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerPeriodSegmentedButtonCount()
+			.should("be.equal", expectedPeriodCount)
 
-		cy.ui5DateTimePickerClose("#dtMinutes");
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerClose();
 	});
 
 	it("tests hours clock is active on picker open", () => {
 		cy.mount(<DefaultDateTimePicker />);
-		cy.ui5DateTimePickerOpen("#dt");
 
-		cy.ui5DateTimePickerGetPopover("#dt").within(() => {
-			cy.get("ui5-time-selection-clocks")
-				.shadow()
-				.as("clocks");
+		cy.get<DateTimePicker>("#dt")
+			.as("dtp")
+			.ui5DateTimePickerOpen();
 
-			cy.get("@clocks")
-				.find(`ui5-time-picker-clock[data-ui5-clock="hours"]`)
-				.should("have.attr", "active", "");
-		});
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerGetPopover()
+			.within(() => {
+				cy.get("[ui5-time-selection-clocks]")
+					.shadow()
+					.as("clocks");
+
+				cy.get("@clocks")
+					.find(`[ui5-time-picker-clock][data-ui5-clock="hours"]`)
+					.should("have.attr", "active", "");
+			});
 
-		cy.ui5DateTimePickerClose("#dt");
-		cy.ui5DateTimePickerIsOpen("#dt").should("equal", false);
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerClose();
+
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerExpectToBeClosed();
 	});
 
 	// Unstable test, needs investigation
-	it.skip("tests selection of 12:34:56 AM", () => {
+	it("tests selection of 12:34:56 AM", () => {
 		setAnimationMode(AnimationMode.None);
 
 		cy.mount(<DateTimePickerWithSeconds />);
 
-		cy.ui5DateTimePickerOpen("#dtSeconds");
-		cy.ui5DateTimePickerIsOpen("#dtSeconds").should("equal", true);
+		cy.get<DateTimePicker>("#dtSeconds")
+			.as("dtp")
+			.ui5DateTimePickerOpen();
+
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerExpectToBeOpen();
 
-		cy.ui5DateTimePickerGetPopover("#dtSeconds")
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerGetPopover()
 			.within(() => {
-				cy.get("ui5-calendar")
+				cy.get("[ui5-calendar]")
 					.shadow()
 					.as("calendar");
 
@@ -292,38 +355,39 @@ describe("DateTimePicker general interaction", () => {
 					.should("be.focused")
 					.realClick();
 
-				cy.get("ui5-time-selection-clocks")
+				cy.get("[ui5-time-selection-clocks]")
 					.shadow()
 					.as("clocks");
 
 				cy.get("@clocks")
-					.find(`ui5-toggle-spin-button[data-ui5-clock="hours"]`)
+					.find(`[ui5-toggle-spin-button][data-ui5-clock="hours"]`)
 					.realClick()
-					.should("be.focused")
-					.realType("1")
-					.realType("2");
+					.should("be.focused");
+
+				cy.realType("12")
 
 				cy.get("@clocks")
-					.find(`ui5-toggle-spin-button[data-ui5-clock="minutes"]`)
-					.should("be.focused")
-					.realType("3")
-					.realType("4");
+					.find(`[ui5-toggle-spin-button][data-ui5-clock="minutes"]`)
+					.should("be.focused");
+
+				cy.realType("34");
 
 				cy.get("@clocks")
-					.find(`ui5-toggle-spin-button[data-ui5-clock="seconds"]`)
+					.find(`[ui5-toggle-spin-button][data-ui5-clock="seconds"]`)
 					.should("be.focused")
-					.realType("5")
-					.realType("6")
-					.realType("a");
 
-				cy.get("#ok").realClick();
+				cy.realType("56a")
 			});
 
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerGetSubmitButton()
+			.realClick();
+
 		cy.get("#dtSeconds")
 			.shadow()
 			.find("ui5-datetime-input")
 			.should("be.focused")
-			.should("have.attr", "value", "13/04/2020, 12:34:56 AM");
+			.and("have.attr", "value", "13/04/2020, 12:34:56 AM");
 
 		setAnimationMode(AnimationMode.Full);
 	});
@@ -331,22 +395,22 @@ describe("DateTimePicker general interaction", () => {
 	it("tests change event is prevented on submit when prevent default is called", () => {
 		cy.mount(<DefaultDateTimePicker />);
 
-		cy.get("[ui5-datetime-picker]")
+		cy.get<DateTimePicker>("[ui5-datetime-picker]")
 			.as("dtp")
 
-		cy.get("@dtp")
+		cy.get<DateTimePicker>("@dtp")
 			.shadow()
 			.find("[ui5-datetime-input]")
 			.as("input");
 
-		cy.get("@dtp")
+		cy.get<DateTimePicker>("@dtp")
 			.shadow()
 			.find("ui5-responsive-popover ui5-calendar")
 			.shadow()
 			.find("ui5-daypicker")
 			.as("daypicker");
 
-		cy.get("@dtp")
+		cy.get<DateTimePicker>("@dtp")
 			.then($el => {
 				$el[0].addEventListener("ui5-change", (ev: Event) => {
 					ev.preventDefault();
@@ -354,7 +418,8 @@ describe("DateTimePicker general interaction", () => {
 			});
 
 		// act: open the picker
-		cy.ui5DateTimePickerOpen("#dt");
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerOpen();
 
 		// act: click today's date
 		cy.get("@daypicker")
@@ -364,16 +429,15 @@ describe("DateTimePicker general interaction", () => {
 			.realClick();
 
 		// act: confirm selection
-		cy.get("@dtp")
-			.shadow()
-			.find("ui5-responsive-popover #ok")
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerGetSubmitButton()
 			.realClick();
 
 		// assert: the picker is closed
 		cy.get("@dtp")
 			.shadow()
-			.find("ui5-responsive-popover")
-			.should("exist").and("not.be.visible");
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverClosed();
 
 		// assert: the value is not changed
 		cy.get("@input")
@@ -390,45 +454,52 @@ describe("DateTimePicker general interaction", () => {
 			></DateTimePicker>
 		);
 
-		cy.ui5DateTimePickerOpen("#dtMinMaxDatesISO");
+		cy.get<DateTimePicker>("#dtMinMaxDatesISO")
+			.as("dtp")
+
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerOpen();
 
-		cy.ui5DateTimePickerGetPopover("#dtMinMaxDatesISO").within(() => {
-			cy.get("ui5-calendar")
-				.shadow()
-				.find(".ui5-calheader")
-				.as("calHeader");
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerGetPopover()
+			.within(() => {
+				cy.get("[ui5-calendar]")
+					.shadow()
+					.find(".ui5-calheader")
+					.as("calHeader");
 
-			cy.get("@calHeader")
-				.find("div[data-ui5-cal-header-btn-prev]")
-				.should("have.class", "ui5-calheader-arrowbtn-disabled");
+				cy.get("@calHeader")
+					.find("div[data-ui5-cal-header-btn-prev]")
+					.should("have.class", "ui5-calheader-arrowbtn-disabled");
 
-			cy.get("@calHeader")
-				.find("div[data-ui5-cal-header-btn-next]")
-				.should("have.class", "ui5-calheader-arrowbtn-disabled");
-		});
+				cy.get("@calHeader")
+					.find("div[data-ui5-cal-header-btn-next]")
+					.should("have.class", "ui5-calheader-arrowbtn-disabled");
+			});
 	});
 
 	it("picker popover should have accessible name", () => {
 		cy.mount(<DefaultDateTimePicker />);
-		cy.ui5DateTimePickerOpen("#dt");
 
-		cy.ui5DateTimePickerGetPopover("#dt")
+		cy.get<DateTimePicker>("#dt")
+			.ui5DateTimePickerGetPopover()
 			.should("have.attr", "accessible-name", "Choose Date and Time");
 	});
 
 	it("value state", () => {
 		cy.mount(<DateTimePicker id="dtpValueState" valueState="Negative"></DateTimePicker>);
 		cy.get("[ui5-datetime-picker]")
-			.as("dateTimePicker");
+			.as("dtp");
 
-		cy.get<DateTimePicker>("@dateTimePicker")
+		cy.get<DateTimePicker>("@dtp")
 			.shadow()
 			.find("ui5-datetime-input")
 			.should("have.attr", "value-state", "Negative");
 
-		cy.ui5DateTimePickerOpen("#dtpValueState");
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerOpen();
 
-		cy.get<DateTimePicker>("@dateTimePicker")
+		cy.get<DateTimePicker>("@dtp")
 			.shadow()
 			.find("[slot='header']")
 			.first()
@@ -436,46 +507,62 @@ describe("DateTimePicker general interaction", () => {
 	});
 
 	// Unstable test, needs investigation
-	it.skip("tests change event is fired on submit", () => {
+	it("tests change event is fired on submit", () => {
 		cy.mount(<DefaultDateTimePicker />);
 
 		const changeStub = cy.stub();
-		cy.get("#dt").then($el => {
-			$el[0].addEventListener("ui5-change", changeStub);
-		});
+
+		cy.get("#dt")
+			.as("dtp")
+			.then($el => {
+				$el[0].addEventListener("ui5-change", changeStub);
+			});
 
 		// Open the picker, select a date, and submit to fire the event
-		cy.ui5DateTimePickerOpen("#dt");
-		cy.ui5DateTimePickerGetPopover("#dt").within(() => {
-			cy.get("ui5-calendar")
-				.shadow()
-				.as("calendar");
-
-			cy.get("@calendar")
-				.find("ui5-daypicker")
-				.shadow()
-				.as("daypicker");
-
-			cy.get("@daypicker")
-				.find("[data-sap-focus-ref]")
-				.realClick()
-				.should("be.focused");
-			cy.get("#ok").realClick();
-		});
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerOpen();
+
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerExpectToBeOpen();
+
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerGetPopover()
+			.within(() => {
+				cy.get("[ui5-calendar]")
+					.shadow()
+					.as("calendar");
+
+				cy.get("@calendar")
+					.find("ui5-daypicker")
+					.shadow()
+					.as("daypicker");
+
+				cy.get("@daypicker")
+					.find("[data-sap-focus-ref]")
+					.realClick()
+					.should("be.focused");
+			});
+
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerGetSubmitButton()
+			.realClick();
 
 		// Assert the change event was fired once
 		cy.wrap(changeStub).should("have.been.calledOnce");
 
 		// Re-open the picker and submit without making a change
-		cy.ui5DateTimePickerOpen("#dt");
-		cy.ui5DateTimePickerGetPopover("#dt").within(() => {
-			cy.get("#ok").realClick();
-		});
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerOpen();
+
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerGetSubmitButton()
+			.realClick();
 
 		// The change event should not have been fired a second time.
 		cy.wrap(changeStub).should("have.been.calledOnce");
 
 		// Verify the picker is closed
-		cy.ui5DateTimePickerIsOpen("#dt").should("equal", false);
+		cy.get<DateTimePicker>("@dtp")
+			.ui5DateTimePickerExpectToBeClosed();
 	});
 });