diff --git a/packages/main/cypress/specs/DynamicDateRange.cy.tsx b/packages/main/cypress/specs/DynamicDateRange.cy.tsx index 47974c128fa3..f3c90c5f075f 100644 --- a/packages/main/cypress/specs/DynamicDateRange.cy.tsx +++ b/packages/main/cypress/specs/DynamicDateRange.cy.tsx @@ -75,36 +75,122 @@ describe('DynamicDateRange Component', () => { cy.get("@input").should('have.value', 'Today'); }); - // Unstable test, needs investigation - it.skip('selects the Date option and updates the current value', () => { - cy.window().then((win) => { - cy.stub(win.Date, 'now').returns(new Date(2025, 4, 15).getTime()); - }); - cy.get('[ui5-dynamic-date-range]').as("ddr"); - cy.get("@ddr").shadow().find('[ui5-input]').as("input"); + it('selects the Date option and updates the current value', () => { + cy.get('[ui5-dynamic-date-range]') + .as("ddr"); + + cy.get("@ddr") + .shadow() + .find('[ui5-input]') + .as("input"); - cy.get("@input").should('exist'); + cy.get("@input") + .should('exist'); - cy.get("@input").find('[ui5-icon]').as("icon"); - cy.get("@icon").realClick(); - - cy.get("@ddr").shadow().find("[ui5-responsive-popover]").as("popover"); - cy.get("@popover").should('exist'); + cy.get("@input") + .find('[ui5-icon]') + .as("icon"); - cy.get("@popover").find("[ui5-list]").as("list"); - cy.get("@list").find("[ui5-li]").contains('Date').realClick(); + cy.get("@icon") + .realClick(); - cy.get("@popover").find("[ui5-calendar]").as("calendar"); - cy.get("@calendar").should('exist'); + cy.get("@ddr") + .shadow() + .find("[ui5-responsive-popover]") + .as("popover"); + + cy.get("@popover") + .should('exist'); + + cy.get("@popover") + .find("[ui5-list]") + .as("list"); + + cy.get("@list") + .find("[ui5-li]") + .contains('Date') + .realClick(); - cy.get("@calendar").shadow().find("ui5-daypicker").as("dayPicker"); - cy.get("@dayPicker").shadow().find("div[data-sap-timestamp='1747785600']").realClick(); + cy.get("@popover") + .find("[ui5-calendar]") + .as("calendar"); - cy.get("@popover").find("[ui5-button][design='Emphasized']").as("submitButton"); - cy.get("@submitButton").should('exist').realClick(); + cy.get("@calendar") + .should('exist'); - cy.get("@input").shadow().find("input").should('have.value', 'May 21, 2025'); + cy.realPress("Tab"); + cy.realPress("Tab"); + cy.realPress("Tab"); + + cy.get("@calendar") + .shadow() + .find("[data-ui5-cal-header-btn-year='true']") + .as("yearButton"); + + cy.get("@yearButton") + .should("be.focused"); + + cy.realPress("Space"); + + cy.get("@calendar") + .shadow() + .find("ui5-yearpicker") + .as("yearPicker"); + + cy.get("@yearPicker") + .shadow() + .find(".ui5-dp-yeartext") + .contains('2035') + .realClick(); + + cy.realPress("Tab"); + cy.realPress("Tab"); + + cy.get("@calendar") + .shadow() + .find("[data-ui5-cal-header-btn-month='true']") + .as("monthButton"); + + cy.get("@monthButton") + .should("be.focused"); + + cy.realPress("Space"); + + cy.get("@calendar") + .shadow() + .find("ui5-monthpicker") + .as("monthPicker"); + + cy.get("@monthPicker") + .shadow() + .find(".ui5-dp-monthtext") + .contains('May') + .realClick(); + + cy.get("@calendar") + .shadow() + .find("ui5-daypicker") + .as("dayPicker"); + + cy.get("@dayPicker") + .shadow() + .find(".ui5-dp-daytext") + .eq(22) // May 21, 2035 is the 21st day + .realClick(); + + cy.get("@popover") + .find("[ui5-button][design='Emphasized']") + .as("submitButton"); + + cy.get("@submitButton") + .should('exist') + .realClick(); + + cy.get("@input") + .shadow() + .find("input") + .should('have.value', 'May 21, 2035'); }); it('writes a date in the input and verifies it is selected in the calendar for the Date option', () => {