diff --git a/packages/main/cypress/specs/DateTimePicker.cy.tsx b/packages/main/cypress/specs/DateTimePicker.cy.tsx index 9f38d3006608..7ff70cf8117d 100644 --- a/packages/main/cypress/specs/DateTimePicker.cy.tsx +++ b/packages/main/cypress/specs/DateTimePicker.cy.tsx @@ -146,7 +146,7 @@ describe("DateTimePicker general interaction", () => { }); // Unstable test, needs investigation => https://github.com/SAP/ui5-webcomponents/issues/11376 - it.skip("tests selection of new date without changing the time section", () => { + it("tests selection of new date without changing the time section", () => { setAnimationMode(AnimationMode.None); const PREVIOUS_VALUE = "14/04/2020, 02:14:19 PM"; @@ -233,6 +233,208 @@ describe("DateTimePicker general interaction", () => { setAnimationMode(AnimationMode.Full); }); + it("tests selection of new date without changing the time section v1", () => { + setAnimationMode(AnimationMode.None); + + const PREVIOUS_VALUE = "14/04/2020, 02:14:19 PM"; + const EXPECTED_VALUE = "15/04/2020, 02:14:19 PM"; + + cy.mount(); + + cy.get("[ui5-datetime-picker]") + .as("dtp"); + + cy.get("@dtp") + .shadow() + .find("[ui5-datetime-input]") + .should("have.value", PREVIOUS_VALUE); + + cy.get("@dtp") + .ui5DateTimePickerOpen(); + + cy.get("@dtp") + .ui5DateTimePickerGetPopover() + .within(() => { + cy.get("[ui5-calendar]") + .shadow() + .find("ui5-daypicker") + .shadow() + .as("daypicker"); + + cy.get("@daypicker") + .find('[data-sap-timestamp]') + .each(($el) => { + const timestamp = $el.attr("data-sap-timestamp"); + if (timestamp) { + const date = new Date(parseInt(timestamp) * 1000); + if (date.getDate() === 15 && date.getMonth() === 3 && date.getFullYear() === 2020) { + cy.wrap($el) + .should("exist") + .realClick() + .should("be.focused"); + return false; // break out of each loop + } + } + }); + }); + + cy.get("@dtp") + .ui5DateTimePickerGetSubmitButton() + .should("have.prop", "disabled", false) + .realClick(); + + cy.get("@dtp") + .ui5DateTimePickerExpectToBeClosed(); + + cy.get("@dtp") + .shadow() + .find("[ui5-datetime-input]") + .should("be.focused") + .should("have.attr", "value", EXPECTED_VALUE); + + setAnimationMode(AnimationMode.Full); + }); + + it("tests selection of new date without changing the time section v2", () => { + setAnimationMode(AnimationMode.None); + + const PREVIOUS_VALUE = "14/04/2020, 02:14:19 PM"; + const EXPECTED_VALUE = "15/04/2020, 02:14:19 PM"; + + cy.mount(); + + cy.get("[ui5-datetime-picker]") + .as("dtp"); + + cy.get("@dtp") + .ui5DateTimePickerOpen(); + + cy.get("@dtp") + .ui5DateTimePickerGetPopover() + .within(() => { + cy.get("[ui5-calendar]") + .shadow() + .find("ui5-daypicker") + .shadow() + .as("daypicker"); + + cy.get("@daypicker") + .find(".ui5-dp-item--selected") + .should("exist") + .should("be.focused") + .realClick(); + + cy.realPress("ArrowRight"); + + cy.realPress("Space"); + }); + + cy.get("@dtp") + .ui5DateTimePickerGetSubmitButton() + .should("have.prop", "disabled", false) + .realClick(); + + cy.get("@dtp") + .ui5DateTimePickerExpectToBeClosed(); + + cy.get("@dtp") + .shadow() + .find("[ui5-datetime-input]") + .should("be.focused") + .should("have.attr", "value", EXPECTED_VALUE); + + setAnimationMode(AnimationMode.Full); + }); + + it("tests selection of new date without changing the time section v3", () => { + setAnimationMode(AnimationMode.None); + + const PREVIOUS_VALUE = "14/04/2020, 02:14:19 PM"; + const EXPECTED_VALUE = "15/04/2020, 02:14:19 PM"; + + cy.mount(); + + cy.get("[ui5-datetime-picker]") + .as("dtp"); + + cy.get("@dtp") + .shadow() + .find("[ui5-datetime-input]") + .should("exist") + .should("have.value", PREVIOUS_VALUE); + + cy.get("@dtp") + .ui5DateTimePickerOpen(); + + cy.get("@dtp") + .ui5DateTimePickerGetPopover() + .should("be.visible"); + + cy.get("@dtp") + .ui5DateTimePickerGetPopover() + .within(() => { + cy.get("[ui5-calendar]") + .should("exist") + .shadow() + .find("ui5-daypicker") + .should("exist") + .shadow() + .as("daypicker"); + + cy.get("@daypicker") + .find('[data-sap-timestamp]') + .should("have.length.greaterThan", 0); + + cy.get("@daypicker") + .find('[data-sap-timestamp]') + .each(($el) => { + const timestamp = $el.attr("data-sap-timestamp"); + if (timestamp) { + const date = new Date(parseInt(timestamp) * 1000); + if (date.getDate() === 15 && date.getMonth() === 3 && date.getFullYear() === 2020) { + cy.wrap($el) + .should("be.visible") + .should("not.be.disabled") + .realClick() + .should("be.focused"); + return false; // break out of each loop + } + } + }); + }); + + cy.get("@dtp") + .ui5DateTimePickerGetSubmitButton() + .should("be.visible") + .should("have.prop", "disabled", false); + + cy.wait(150); + + cy.get("@dtp") + .ui5DateTimePickerGetSubmitButton() + .realClick(); + + cy.get("@dtp") + .ui5DateTimePickerExpectToBeClosed(); + + cy.get("@dtp") + .shadow() + .find("[ui5-datetime-input]") + .should("be.focused") + .should("have.attr", "value", EXPECTED_VALUE); + + setAnimationMode(AnimationMode.Full); + }); + it("tests time controls for dtSeconds picker", () => { const expectedClocksCount = 3; const expectedPeriodCount = 1;