From e798db015550efd68d432677a6af003361bf1cda Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Fri, 28 Mar 2025 09:27:05 +0200 Subject: [PATCH 1/4] chore(ui5-datetime-picker): make tests stable --- .../main/cypress/specs/DateTimePicker.cy.tsx | 85 +++++++++++-------- 1 file changed, 48 insertions(+), 37 deletions(-) diff --git a/packages/main/cypress/specs/DateTimePicker.cy.tsx b/packages/main/cypress/specs/DateTimePicker.cy.tsx index b60ffc6afab4..1459001def78 100644 --- a/packages/main/cypress/specs/DateTimePicker.cy.tsx +++ b/packages/main/cypress/specs/DateTimePicker.cy.tsx @@ -34,6 +34,54 @@ describe("DateTimePicker general interaction", () => { cy.ui5DateTimePickerIsOpen("#dt").should("equal", false); }); + it("tests change event is prevented on submit when prevent default is called", () => { + cy.mount(); + + // Prevent default behavior of ui5-change event. + cy.get("[ui5-datetime-picker]") + .as("dtp") + + cy.get("@dtp") + .then($el => { + $el[0].addEventListener("ui5-change", (ev: Event) => { + ev.preventDefault(); + }); + }); + + cy.ui5DateTimePickerOpen("#dt"); + + cy.ui5DateTimePickerGetPopover("#dt").within(() => { + // Click the focused day and confirm the selection. + cy.get("ui5-calendar") + .shadow() + .as("calendar"); + + cy.get("@calendar") + .find("ui5-daypicker") + .shadow() + .as("daypicker"); + + cy.get("@daypicker") + .find("[data-sap-focus-ref]") + .should("be.focused") + .realClick(); + + cy.get("#ok").realClick(); + }); + + cy.get("@dtp") + .should("not.have.attr", "open", ""); + + cy.get("@dtp") + .shadow() + .find("ui5-input") + .as("input"); + + cy.get("@input") + .should("be.focused") + .should("have.attr", "value", ""); + }); + // Unstable but valid test, needs to be individually observed it.skip("tests selection of new date", () => { setAnimationMode(AnimationMode.None); @@ -327,43 +375,6 @@ describe("DateTimePicker general interaction", () => { setAnimationMode(AnimationMode.Full); }); - it("tests change event is prevented on submit when prevent default is called", () => { - cy.mount(); - - // Prevent default behavior of ui5-change event. - cy.get("#dt").then($el => { - $el[0].addEventListener("ui5-change", (ev: Event) => { - ev.preventDefault(); - }); - }); - - cy.ui5DateTimePickerOpen("#dt"); - - cy.ui5DateTimePickerGetPopover("#dt").within(() => { - // Click the focused day and confirm the selection. - cy.get("ui5-calendar") - .shadow() - .as("calendar"); - - cy.get("@calendar") - .find("ui5-daypicker") - .shadow() - .as("daypicker"); - - cy.get("@daypicker") - .find("[data-sap-focus-ref]") - .should("be.focused") - .realClick(); - cy.get("#ok").realClick(); - }); - - cy.get("#dt") - .shadow() - .find("ui5-input") - .should("be.focused") - .should("have.attr", "value", ""); - }); - it("Min and max dates are set, with no format pattern provided, using valid ISO format", () => { cy.mount( Date: Fri, 28 Mar 2025 11:25:17 +0200 Subject: [PATCH 2/4] fix(ui5-datetime-picker): reverse reorder --- .../main/cypress/specs/DateTimePicker.cy.tsx | 96 +++++++++---------- 1 file changed, 48 insertions(+), 48 deletions(-) diff --git a/packages/main/cypress/specs/DateTimePicker.cy.tsx b/packages/main/cypress/specs/DateTimePicker.cy.tsx index 34b2ec38e41e..8c69ab4d88dc 100644 --- a/packages/main/cypress/specs/DateTimePicker.cy.tsx +++ b/packages/main/cypress/specs/DateTimePicker.cy.tsx @@ -34,54 +34,6 @@ describe("DateTimePicker general interaction", () => { cy.ui5DateTimePickerIsOpen("#dt").should("equal", false); }); - it("tests change event is prevented on submit when prevent default is called", () => { - cy.mount(); - - // Prevent default behavior of ui5-change event. - cy.get("[ui5-datetime-picker]") - .as("dtp") - - cy.get("@dtp") - .then($el => { - $el[0].addEventListener("ui5-change", (ev: Event) => { - ev.preventDefault(); - }); - }); - - cy.ui5DateTimePickerOpen("#dt"); - - cy.ui5DateTimePickerGetPopover("#dt").within(() => { - // Click the focused day and confirm the selection. - cy.get("ui5-calendar") - .shadow() - .as("calendar"); - - cy.get("@calendar") - .find("ui5-daypicker") - .shadow() - .as("daypicker"); - - cy.get("@daypicker") - .find("[data-sap-focus-ref]") - .should("be.focused") - .realClick(); - - cy.get("#ok").realClick(); - }); - - cy.get("@dtp") - .should("not.have.attr", "open", ""); - - cy.get("@dtp") - .shadow() - .find("ui5-input") - .as("input"); - - cy.get("@input") - .should("be.focused") - .should("have.attr", "value", ""); - }); - // Unstable but valid test, needs to be individually observed it.skip("tests selection of new date", () => { setAnimationMode(AnimationMode.None); @@ -433,6 +385,54 @@ describe("DateTimePicker general interaction", () => { setAnimationMode(AnimationMode.Full); }); + it("tests change event is prevented on submit when prevent default is called", () => { + cy.mount(); + + // Prevent default behavior of ui5-change event. + cy.get("[ui5-datetime-picker]") + .as("dtp") + + cy.get("@dtp") + .then($el => { + $el[0].addEventListener("ui5-change", (ev: Event) => { + ev.preventDefault(); + }); + }); + + cy.ui5DateTimePickerOpen("#dt"); + + cy.ui5DateTimePickerGetPopover("#dt").within(() => { + // Click the focused day and confirm the selection. + cy.get("ui5-calendar") + .shadow() + .as("calendar"); + + cy.get("@calendar") + .find("ui5-daypicker") + .shadow() + .as("daypicker"); + + cy.get("@daypicker") + .find("[data-sap-focus-ref]") + .should("be.focused") + .realClick(); + + cy.get("#ok").realClick(); + }); + + cy.get("@dtp") + .should("not.have.attr", "open", ""); + + cy.get("@dtp") + .shadow() + .find("ui5-input") + .as("input"); + + cy.get("@input") + .should("be.focused") + .should("have.attr", "value", ""); + }); + it("Min and max dates are set, with no format pattern provided, using valid ISO format", () => { cy.mount( Date: Fri, 28 Mar 2025 11:30:58 +0200 Subject: [PATCH 3/4] fix(ui5-datetime-picker): reverse reorder --- .../main/cypress/specs/DateTimePicker.cy.tsx | 58 ------------------- 1 file changed, 58 deletions(-) diff --git a/packages/main/cypress/specs/DateTimePicker.cy.tsx b/packages/main/cypress/specs/DateTimePicker.cy.tsx index 8c69ab4d88dc..41d414d5ad3b 100644 --- a/packages/main/cypress/specs/DateTimePicker.cy.tsx +++ b/packages/main/cypress/specs/DateTimePicker.cy.tsx @@ -25,64 +25,6 @@ function DateTimePickerWithSeconds({ initialValue }: { initialValue?: string }) ); } describe("DateTimePicker general interaction", () => { - it("tests picker opens/closes programmatically", () => { - cy.mount(); - - cy.ui5DateTimePickerOpen("#dt"); - cy.ui5DateTimePickerIsOpen("#dt").should("equal", true); - cy.ui5DateTimePickerClose("#dt"); - cy.ui5DateTimePickerIsOpen("#dt").should("equal", false); - }); - - // Unstable but valid test, needs to be individually observed - it.skip("tests selection of new date", () => { - setAnimationMode(AnimationMode.None); - const PREVIOUS_VALUE = "13/04/2020, 03:16:16 AM"; - - cy.mount(); - cy.ui5DateTimePickerOpen("#dtSeconds"); - - cy.get("#dtSeconds") - .shadow() - .as("DateTimePicker"); - - cy.get("@DateTimePicker") - .find("ui5-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("@calendar") - .find("ui5-daypicker") - .shadow() - .as("daypicker") - - cy.get("@daypicker") - .find(".ui5-dp-item--selected") - .realClick() - .should("be.focused"); - - cy.realPress("ArrowRight"); - cy.realPress("Space"); - - // Confirm the change. - cy.get("#ok").realClick(); - }); - - // Only the date has changed; the time remains the same. - cy.get("@DateTimePicker") - .find("ui5-input") - .should("be.focused") - .should("have.attr", "value", "14/04/2020, 03:16:16 AM"); - - cy.ui5DateTimePickerIsOpen("#dtSeconds").should("equal", false); - setAnimationMode(AnimationMode.Full); - }); - it("tests time controls adjustments", () => { setAnimationMode(AnimationMode.None); const PREVIOUS_VALUE = "13/04/2020, 03:16:16 AM"; From 162dccba447033e88dfb0c81ecad579a43ab5d0b Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Mon, 31 Mar 2025 13:58:56 +0300 Subject: [PATCH 4/4] fix(ui5-date-time-picker): improve validation --- packages/main/cypress/specs/DateTimePicker.cy.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/main/cypress/specs/DateTimePicker.cy.tsx b/packages/main/cypress/specs/DateTimePicker.cy.tsx index 41d414d5ad3b..4ae4d7cbc18a 100644 --- a/packages/main/cypress/specs/DateTimePicker.cy.tsx +++ b/packages/main/cypress/specs/DateTimePicker.cy.tsx @@ -363,11 +363,16 @@ describe("DateTimePicker general interaction", () => { }); cy.get("@dtp") - .should("not.have.attr", "open", ""); - + .shadow() + .find("[ui5-responsive-popover]") + .should($rp => { + expect($rp.is(":popover-open")).to.be.false; + }) + .and("not.have.attr", "open"); + cy.get("@dtp") .shadow() - .find("ui5-input") + .find("[ui5-datetime-input]") .as("input"); cy.get("@input")