From 81bfe2c540776d4d11eefbe08c0f9d8eed6158ec Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Mon, 27 Oct 2025 16:06:37 +0200 Subject: [PATCH 1/5] test(ui5-dynamic-date-range): uncomment test --- .../cypress/specs/DynamicDateRange.cy.tsx | 90 +++++++++---------- .../commands/DynamicDateRange.commands.ts | 3 + 2 files changed, 47 insertions(+), 46 deletions(-) diff --git a/packages/main/cypress/specs/DynamicDateRange.cy.tsx b/packages/main/cypress/specs/DynamicDateRange.cy.tsx index 7e5bedf4c97d..f66e8d298f03 100644 --- a/packages/main/cypress/specs/DynamicDateRange.cy.tsx +++ b/packages/main/cypress/specs/DynamicDateRange.cy.tsx @@ -333,58 +333,58 @@ describe('DynamicDateRange Last/Next Options', () => { .should('have.value', 'Last 7 Days'); }); - // it('handles Next X Weeks option and verifies date range calculation', () => { - // new LastOptions(); - // new NextOptions(); + it('handles Next X Weeks option and verifies date range calculation', () => { + new LastOptions(); + new NextOptions(); - // cy.window().then((win) => { - // cy.stub(win.Date, 'now').returns(new Date(2025, 5, 15).getTime()); // June 15, 2025 - // }); + cy.window().then((win) => { + cy.stub(win.Date, 'now').returns(new Date(2025, 5, 15).getTime()); // June 15, 2025 + }); - // cy.get('[ui5-dynamic-date-range]') - // .as("ddr"); + cy.get('[ui5-dynamic-date-range]') + .as("ddr"); - // cy.get("@ddr") - // .ui5DynamicDateRangeOpen() - // .ui5DynamicDateRangeGetOptionsList() - // .as("listItems"); + cy.get("@ddr") + .ui5DynamicDateRangeOpen() + .ui5DynamicDateRangeGetOptionsList() + .as("listItems"); - // cy.get("@listItems") - // .last() - // .realClick(); + cy.get("@listItems") + .last() + .realClick(); - // cy.get("@popover") - // .find("[slot='header']") - // .should('contain.text', 'Next X'); + cy.get("@popover") + .find("[slot='header']") + .should('contain.text', 'Next X'); - // cy.get("@popover") - // .find("[ui5-step-input]") - // .as("stepInput"); + cy.get("@popover") + .find("[ui5-step-input]") + .as("stepInput"); - // cy.get("@stepInput") - // .shadow() - // .find("[ui5-input]") - // .shadow() - // .find("input") - // .as("stepInputInner"); + cy.get("@stepInput") + .shadow() + .find("[ui5-input]") + .shadow() + .find("input") + .as("stepInputInner"); - // cy.get("@stepInputInner") - // .clear() - // .realType('3'); + cy.get("@stepInputInner") + .clear() + .realType('3'); - // cy.get("@stepInputInner") - // .realPress("Enter"); + cy.get("@stepInputInner") + .realPress("Enter"); - // cy.get("@popover") - // .find(".ui5-ddr-current-value") - // .should('contain.text', 'Selected:'); + cy.get("@popover") + .find(".ui5-ddr-current-value") + .should('contain.text', 'Selected:'); - // cy.get("@ddr") - // .ui5DynamicDateRangeSubmit(); + cy.get("@ddr") + .ui5DynamicDateRangeSubmit(); - // cy.get("@innerInput") - // .should('have.value', 'Next 3 Weeks'); - // }); + cy.get("@innerInput") + .should('have.value', 'Next 3 Weeks'); + }); it('validates text input for Last X Months and parses correctly', () => { cy.get('[ui5-dynamic-date-range]') @@ -534,14 +534,12 @@ describe('FromDateTime Option', () => { cy.get("@ddr") .ui5DynamicDateRangeSubmit(); - cy.get("@input") - .shadow() - .find("input") - .should('contain.value', 'From'); + cy.get("@ddr") + .shadow() + .find("[ui5-input]") + .as("input"); cy.get("@input") - .shadow() - .find("input") .should('contain.value', 'From Oct 13, 2025'); }); }); diff --git a/packages/main/cypress/support/commands/DynamicDateRange.commands.ts b/packages/main/cypress/support/commands/DynamicDateRange.commands.ts index 3bbab0dc9b09..00e9f8ffb09f 100644 --- a/packages/main/cypress/support/commands/DynamicDateRange.commands.ts +++ b/packages/main/cypress/support/commands/DynamicDateRange.commands.ts @@ -118,6 +118,9 @@ Cypress.Commands.add("ui5DynamicDateRangeSubmit", { prevSubject: true }, (prevSu .as("submitButton"); cy.get("@submitButton") + .should("have.text", "Submit") + .should("be.visible") + .should("not.be.disabled") .realClick(); }); From 7b6eef621583eb05c981f7a089d44d70c85b3f5a Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Mon, 27 Oct 2025 19:29:36 +0200 Subject: [PATCH 2/5] test: refactor --- .../cypress/specs/DynamicDateRange.cy.tsx | 186 +++++++++--------- .../commands/DynamicDateRange.commands.ts | 23 +++ 2 files changed, 117 insertions(+), 92 deletions(-) diff --git a/packages/main/cypress/specs/DynamicDateRange.cy.tsx b/packages/main/cypress/specs/DynamicDateRange.cy.tsx index f66e8d298f03..1d1dae887ed6 100644 --- a/packages/main/cypress/specs/DynamicDateRange.cy.tsx +++ b/packages/main/cypress/specs/DynamicDateRange.cy.tsx @@ -8,33 +8,33 @@ import DateTimeRange from '../../src/dynamic-date-range-options/DateTimeRange.js import FromDateTime from '../../src/dynamic-date-range-options/FromDateTime.js'; import ToDateTime from '../../src/dynamic-date-range-options/ToDateTime.js'; -describe('DynamicDateRange Component', () => { +describe("DynamicDateRange Component", () => { beforeEach(() => { cy.mount( ); }); - it('renders the DynamicDateRange component', () => { - cy.get('[ui5-dynamic-date-range]') + it("should render the DynamicDateRange component", () => { + cy.get("[ui5-dynamic-date-range]") .as("ddr"); cy.get("@ddr") .shadow() - .find('[ui5-input]') + .find("[ui5-input]") .as("input"); cy.get("@input") - .should('exist'); + .should("exist"); cy.get("@input") - .find('[ui5-icon]') + .find("[ui5-icon]") .as("icon"); cy.get("@icon") - .should('have.attr', 'name', 'appointment-2'); + .should("have.attr", "name", "appointment-2"); }); - it('displays all options correctly', () => { + it("should display all options correctly", () => { const mockOptions: Array = [ new Today(), new SingleDate(), @@ -42,7 +42,7 @@ describe('DynamicDateRange Component', () => { new DateTimeRange() ]; - cy.get('[ui5-dynamic-date-range]') + cy.get("[ui5-dynamic-date-range]") .as("ddr"); cy.get("@ddr") @@ -51,17 +51,17 @@ describe('DynamicDateRange Component', () => { .as("listItems"); cy.get("@listItems") - .should('have.length', mockOptions.length); + .should("have.length", mockOptions.length); mockOptions.forEach((option, index) => { - cy.get('@listItems') + cy.get("@listItems") .eq(index) - .should('contain.text', option.text); + .should("contain.text", option.text); }); }); - it('selects an option and updates the current value', () => { - cy.get('[ui5-dynamic-date-range]') + it("should select an option and update the current value", () => { + cy.get("[ui5-dynamic-date-range]") .as("ddr"); cy.get("@ddr") @@ -70,20 +70,20 @@ describe('DynamicDateRange Component', () => { .as("listItems"); cy.get("@listItems") - .contains('Today') + .contains("Today") .realClick(); cy.get("@input") - .should('have.value', 'Today'); + .should("have.value", "Today"); }); - it('handles selection change correctly', () => { - cy.get('[ui5-dynamic-date-range]') + it("should handle selection change correctly", () => { + cy.get("[ui5-dynamic-date-range]") .as("ddr"); cy.get("@ddr") .shadow() - .find('[ui5-input]') + .find("[ui5-input]") .as("input"); cy.get("@input") @@ -92,7 +92,7 @@ describe('DynamicDateRange Component', () => { .as("innerInput"); cy.get("@input") - .should('exist'); + .should("exist"); cy.get("@innerInput") .realClick(); @@ -104,24 +104,24 @@ describe('DynamicDateRange Component', () => { .realPress("Enter"); cy.get("@innerInput") - .should('have.value', 'Today'); + .should("have.value", "Today"); }); // Check why it fails remotely - it('selects the Date option and updates the current value', () => { - cy.get('[ui5-dynamic-date-range]') + it("should select the Date option and update the current value", () => { + cy.get("[ui5-dynamic-date-range]") .as("ddr"); cy.get("@ddr") .shadow() - .find('[ui5-input]') + .find("[ui5-input]") .as("input"); cy.get("@input") - .should('exist'); + .should("exist"); cy.get("@input") - .find('[ui5-icon]') + .find("[ui5-icon]") .as("icon"); cy.get("@icon") @@ -133,7 +133,7 @@ describe('DynamicDateRange Component', () => { .as("popover"); cy.get("@popover") - .should('exist'); + .should("exist"); cy.get("@popover") .find("[ui5-list]") @@ -141,7 +141,7 @@ describe('DynamicDateRange Component', () => { cy.get("@list") .find("[ui5-li]") - .contains('Date') + .contains("Date") .realClick(); cy.get("@popover") @@ -149,7 +149,7 @@ describe('DynamicDateRange Component', () => { .as("calendar"); cy.get("@calendar") - .should('exist'); + .should("exist"); cy.realPress("Tab"); cy.realPress("Tab"); @@ -173,7 +173,7 @@ describe('DynamicDateRange Component', () => { cy.get("@yearPicker") .shadow() .find(".ui5-dp-yeartext") - .contains('2035') + .contains("2035") .realClick(); cy.realPress("Tab"); @@ -196,7 +196,7 @@ describe('DynamicDateRange Component', () => { cy.get("@monthPicker") .shadow() .find(".ui5-dp-monthtext") - .contains('May') + .contains("May") .realClick(); cy.get("@calendar") @@ -216,27 +216,27 @@ describe('DynamicDateRange Component', () => { cy.get("@input") .shadow() .find("input") - .should('have.value', 'May 21, 2035'); + .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', () => { - cy.get('[ui5-dynamic-date-range]') + it("should write a date in the input and verify it is selected in the calendar for the Date option", () => { + cy.get("[ui5-dynamic-date-range]") .as("ddr"); cy.get("@ddr") .shadow() - .find('[ui5-input]') + .find("[ui5-input]") .as("input"); cy.get("@input") .shadow() .find("input") .clear() - .realType('May 15, 2025'); + .realType("May 15, 2025"); cy.realPress("Enter"); cy.get("@input") - .find('[ui5-icon]') + .find("[ui5-icon]") .as("icon"); cy.get("@icon") @@ -248,7 +248,7 @@ describe('DynamicDateRange Component', () => { .as("popover"); cy.get("@popover") - .should('exist'); + .should("exist"); cy.get("@popover") .find("[ui5-list]") @@ -256,7 +256,7 @@ describe('DynamicDateRange Component', () => { cy.get("@list") .find("[ui5-li]") - .contains('Date') + .contains("Date") .realClick(); cy.get("@popover") @@ -264,7 +264,7 @@ describe('DynamicDateRange Component', () => { .as("calendar"); cy.get("@calendar") - .should('exist'); + .should("exist"); cy.get("@calendar") .shadow() @@ -274,21 +274,21 @@ describe('DynamicDateRange Component', () => { cy.get("@dayPicker") .shadow() .find("div[data-sap-timestamp='1747267200']") - .should('have.class', 'ui5-dp-item--selected'); // Timestamp for May 15, 2025 + .should("have.class", "ui5-dp-item--selected"); // Timestamp for May 15, 2025 }); }); -describe('DynamicDateRange Last/Next Options', () => { +describe("DynamicDateRange Last/Next Options", () => { beforeEach(() => { cy.mount( ); }); - it('selects Last X Days option with custom number input', () => { + it("should select Last X Days option with custom number input", () => { new LastOptions(); new NextOptions(); - cy.get('[ui5-dynamic-date-range]') + cy.get("[ui5-dynamic-date-range]") .as("ddr"); cy.get("@ddr") @@ -297,7 +297,7 @@ describe('DynamicDateRange Last/Next Options', () => { .as("listItems"); cy.get("@listItems") - .should('have.length', 2); // Since we unified the options, we only have 2 options + .should("have.length", 2); // Since we unified the options, we only have 2 options // Select the first option (Last X Days / Months) cy.get("@listItems") @@ -306,14 +306,14 @@ describe('DynamicDateRange Last/Next Options', () => { cy.get("@popover") .find("[slot='header']") - .should('contain.text', 'Last X'); + .should("contain.text", "Last X"); cy.get("@popover") .find("[ui5-step-input]") .as("stepInput"); cy.get("@stepInput") - .should('exist'); + .should("exist"); cy.get("@stepInput") .shadow() @@ -324,24 +324,24 @@ describe('DynamicDateRange Last/Next Options', () => { cy.get("@stepInputInner") .clear() - .realType('7'); + .realType("7"); cy.get("@ddr") .ui5DynamicDateRangeSubmit(); cy.get("@innerInput") - .should('have.value', 'Last 7 Days'); + .should("have.value", "Last 7 Days"); }); - it('handles Next X Weeks option and verifies date range calculation', () => { + it("should handle Next X Weeks option and verify date range calculation", () => { new LastOptions(); new NextOptions(); cy.window().then((win) => { - cy.stub(win.Date, 'now').returns(new Date(2025, 5, 15).getTime()); // June 15, 2025 + cy.stub(win.Date, "now").returns(new Date(2025, 5, 15).getTime()); // June 15, 2025 }); - cy.get('[ui5-dynamic-date-range]') + cy.get("[ui5-dynamic-date-range]") .as("ddr"); cy.get("@ddr") @@ -355,7 +355,7 @@ describe('DynamicDateRange Last/Next Options', () => { cy.get("@popover") .find("[slot='header']") - .should('contain.text', 'Next X'); + .should("contain.text", "Next X"); cy.get("@popover") .find("[ui5-step-input]") @@ -370,29 +370,29 @@ describe('DynamicDateRange Last/Next Options', () => { cy.get("@stepInputInner") .clear() - .realType('3'); + .realType("3"); cy.get("@stepInputInner") .realPress("Enter"); cy.get("@popover") .find(".ui5-ddr-current-value") - .should('contain.text', 'Selected:'); + .should("contain.text", "Selected:"); cy.get("@ddr") .ui5DynamicDateRangeSubmit(); cy.get("@innerInput") - .should('have.value', 'Next 3 Weeks'); + .should("have.value", "Next 3 Weeks"); }); - it('validates text input for Last X Months and parses correctly', () => { - cy.get('[ui5-dynamic-date-range]') + it("should validate text input for Last X Months and parse it correctly", () => { + cy.get("[ui5-dynamic-date-range]") .as("ddr"); cy.get("@ddr") .shadow() - .find('[ui5-input]') + .find("[ui5-input]") .as("input"); cy.get("@input") @@ -402,16 +402,16 @@ describe('DynamicDateRange Last/Next Options', () => { cy.get("@innerInput") .clear() - .realType('Last 6 Days'); + .realType("Last 6 Days"); cy.get("@innerInput") .realPress("Enter"); cy.get("@innerInput") - .should('have.value', 'Last 6 Days'); + .should("have.value", "Last 6 Days"); cy.get("@input") - .find('[ui5-icon]') + .find("[ui5-icon]") .as("icon"); cy.get("@icon") @@ -429,17 +429,17 @@ describe('DynamicDateRange Last/Next Options', () => { cy.get("@list") .find("[ui5-li]") .contains("Last X Days / Months") - .should('have.attr', 'selected'); + .should("have.attr", "selected"); }); }); -describe('FromDateTime Option', () => { +describe("FromDateTime Option", () => { beforeEach(() => { cy.mount( ); }); - it('should select FromDateTime option and display date/time picker', () => { + it("should select FromDateTime option and display date/time picker", () => { const mockOptions: Array = [ new FromDateTime(), ]; @@ -455,18 +455,18 @@ describe('FromDateTime Option', () => { cy.get("@popover") .find(".ui5-dynamic-date-range-option-datetime-container") - .should('exist'); + .should("exist"); cy.get("@popover") .find("[ui5-segmented-button]") - .should('exist'); + .should("exist"); cy.get("@popover") .find("[ui5-segmented-button-item][data-ui5-key='Date']") - .should('have.attr', 'selected'); + .should("have.attr", "selected"); }); - it('should toggle between date and time views', () => { + it("should toggle between date and time views", () => { const mockOptions: Array = [ new FromDateTime(), ]; @@ -482,7 +482,7 @@ describe('FromDateTime Option', () => { cy.get("@popover") .find("[ui5-segmented-button-item][data-ui5-key='Date']") - .should('have.attr', 'selected'); + .should("have.attr", "selected"); cy.get("@popover") .find("[ui5-segmented-button-item][data-ui5-key='Time']") @@ -490,11 +490,11 @@ describe('FromDateTime Option', () => { cy.get("@popover") .find("[ui5-segmented-button-item][data-ui5-key='Time']") - .should('have.attr', 'selected'); + .should("have.attr", "selected"); cy.get("@popover") .find("[ui5-time-selection-clocks]") - .should('exist'); + .should("exist"); cy.get("@popover") .find("[ui5-segmented-button-item][data-ui5-key='Date']") @@ -502,16 +502,17 @@ describe('FromDateTime Option', () => { cy.get("@popover") .find("[ui5-segmented-button-item][data-ui5-key='Date']") - .should('have.attr', 'selected'); + .should("have.attr", "selected"); }); - it('should select a date and time, then submit the value', () => { + it.only("should select a date and time, then submit the value", () => { const mockOptions: Array = [ new FromDateTime(), ]; cy.get("[ui5-dynamic-date-range]") .as("ddr") .ui5DynamicDateRangeOpen() + .ui5DynamicDateRangeSetInput("Oct 1, 2025, 0:30:00 PM") .ui5DynamicDateRangeSelectOption(); cy.get("@ddr") @@ -540,17 +541,17 @@ describe('FromDateTime Option', () => { .as("input"); cy.get("@input") - .should('contain.value', 'From Oct 13, 2025'); + .should("contain.value", "From Oct 13, 2025"); }); }); -describe('ToDateTime Option', () => { +describe("ToDateTime Option", () => { beforeEach(() => { cy.mount( ); }); - it('should select FromDateTime option and display date/time picker', () => { + it("should select FromDateTime option and display date/time picker", () => { const mockOptions: Array = [ new ToDateTime(), ]; @@ -566,18 +567,18 @@ describe('ToDateTime Option', () => { cy.get("@popover") .find(".ui5-dynamic-date-range-option-datetime-container") - .should('exist'); + .should("exist"); cy.get("@popover") .find("[ui5-segmented-button]") - .should('exist'); + .should("exist"); cy.get("@popover") .find("[ui5-segmented-button-item][data-ui5-key='Date']") - .should('have.attr', 'selected'); + .should("have.attr", "selected"); }); - it('should toggle between date and time views', () => { + it("should toggle between date and time views", () => { const mockOptions: Array = [ new ToDateTime(), ]; @@ -593,7 +594,7 @@ describe('ToDateTime Option', () => { cy.get("@popover") .find("[ui5-segmented-button-item][data-ui5-key='Date']") - .should('have.attr', 'selected'); + .should("have.attr", "selected"); cy.get("@popover") .find("[ui5-segmented-button-item][data-ui5-key='Time']") @@ -601,11 +602,11 @@ describe('ToDateTime Option', () => { cy.get("@popover") .find("[ui5-segmented-button-item][data-ui5-key='Time']") - .should('have.attr', 'selected'); + .should("have.attr", "selected"); cy.get("@popover") .find("[ui5-time-selection-clocks]") - .should('exist'); + .should("exist"); cy.get("@popover") .find("[ui5-segmented-button-item][data-ui5-key='Date']") @@ -613,16 +614,17 @@ describe('ToDateTime Option', () => { cy.get("@popover") .find("[ui5-segmented-button-item][data-ui5-key='Date']") - .should('have.attr', 'selected'); + .should("have.attr", "selected"); }); - it('should select a date and time, then submit the value', () => { + it("should select a date and time, then submit the value", () => { const mockOptions: Array = [ new ToDateTime(), ]; cy.get("[ui5-dynamic-date-range]") .as("ddr") .ui5DynamicDateRangeOpen() + .ui5DynamicDateRangeSetInput("Oct 1, 2025, 0:30:00 PM") .ui5DynamicDateRangeSelectOption(); cy.get("@ddr") @@ -645,19 +647,19 @@ describe('ToDateTime Option', () => { cy.get("@ddr") .ui5DynamicDateRangeSubmit(); - cy.get("@input") - .shadow() - .find("input") - .should('contain.value', 'To'); + cy.get("@ddr") + .shadow() + .find("[ui5-input]") + .as("input"); cy.get("@input") .shadow() .find("input") - .should('contain.value', 'To Oct 13, 2025'); + .should("contain.value", "To Oct 13, 2025"); }); }); -describe('DynamicDateRange DateTimeRange Option', () => { +describe("DynamicDateRange DateTimeRange Option", () => { beforeEach(() => { cy.mount(); }); diff --git a/packages/main/cypress/support/commands/DynamicDateRange.commands.ts b/packages/main/cypress/support/commands/DynamicDateRange.commands.ts index 00e9f8ffb09f..c219ebb66c4d 100644 --- a/packages/main/cypress/support/commands/DynamicDateRange.commands.ts +++ b/packages/main/cypress/support/commands/DynamicDateRange.commands.ts @@ -104,6 +104,28 @@ Cypress.Commands.add("ui5DynamicDateRangeSetDateTime", { prevSubject: true }, (p return cy.wrap(prevSubject); }); +Cypress.Commands.add("ui5DynamicDateRangeSetInput", { prevSubject: true }, (prevSubject, input: string) => { + cy.wrap(prevSubject) + .as("ddr"); + + cy.get("@ddr") + .shadow() + .find("[ui5-input]") + .as("input"); + + cy.get("@input") + .shadow() + .find("input") + .as("innerInput"); + + cy.get("@innerInput") + .clear() + .realType(input) + .realPress("Enter"); + + return cy.wrap(prevSubject); +}); + Cypress.Commands.add("ui5DynamicDateRangeSubmit", { prevSubject: true }, (prevSubject) => { cy.wrap(prevSubject) .as("ddr"); @@ -131,6 +153,7 @@ declare global { ui5DynamicDateRangeOpened(): Chainable ui5DynamicDateRangeGetOptionsList(): Chainable> ui5DynamicDateRangeSelectOption(index?: number): Chainable> + ui5DynamicDateRangeSetInput(input: string): Chainable> ui5DynamicDateRangeSetDateTime(pickerId: string, dateTimeValue: string): Chainable> ui5DynamicDateRangeSubmit(): Chainable } From 8eefb79c7dd5551ba2cf622e9eec5e67339a457d Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Wed, 29 Oct 2025 15:20:46 +0200 Subject: [PATCH 3/5] chore: clean up tests --- .../cypress/specs/DynamicDateRange.cy.tsx | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/main/cypress/specs/DynamicDateRange.cy.tsx b/packages/main/cypress/specs/DynamicDateRange.cy.tsx index 1d1dae887ed6..2b3ecba3948d 100644 --- a/packages/main/cypress/specs/DynamicDateRange.cy.tsx +++ b/packages/main/cypress/specs/DynamicDateRange.cy.tsx @@ -505,7 +505,7 @@ describe("FromDateTime Option", () => { .should("have.attr", "selected"); }); - it.only("should select a date and time, then submit the value", () => { + it("should select a date and time, then submit the value", () => { const mockOptions: Array = [ new FromDateTime(), ]; @@ -536,8 +536,8 @@ describe("FromDateTime Option", () => { .ui5DynamicDateRangeSubmit(); cy.get("@ddr") - .shadow() - .find("[ui5-input]") + .shadow() + .find("[ui5-input]") .as("input"); cy.get("@input") @@ -648,8 +648,8 @@ describe("ToDateTime Option", () => { .ui5DynamicDateRangeSubmit(); cy.get("@ddr") - .shadow() - .find("[ui5-input]") + .shadow() + .find("[ui5-input]") .as("input"); cy.get("@input") @@ -669,13 +669,13 @@ describe("DynamicDateRange DateTimeRange Option", () => { .as("ddr") .ui5DynamicDateRangeOpen() .ui5DynamicDateRangeSelectOption() - .ui5DynamicDateRangeSetDateTime("from-picker", "Dec 25, 2023, 2:30:00 PM") + .ui5DynamicDateRangeSetDateTime("from-picker", "Dec 25, 2023, 2:30:00 PM") .ui5DynamicDateRangeSetDateTime("to-picker", "Dec 26, 2023, 4:45:00 AM") - .ui5DynamicDateRangeSubmit(); + .ui5DynamicDateRangeSubmit(); - cy.get("@ddr") - .shadow() - .find("[ui5-input]") + cy.get("@ddr") + .shadow() + .find("[ui5-input]") .as("input"); cy.get("@input") @@ -687,13 +687,13 @@ describe("DynamicDateRange DateTimeRange Option", () => { .as("ddr") .ui5DynamicDateRangeOpen() .ui5DynamicDateRangeSelectOption() - .ui5DynamicDateRangeSetDateTime("to-picker", "Dec 25, 2023, 2:30:00 PM") + .ui5DynamicDateRangeSetDateTime("to-picker", "Dec 25, 2023, 2:30:00 PM") .ui5DynamicDateRangeSetDateTime("from-picker", "Dec 26, 2023, 4:45:00 AM") - .ui5DynamicDateRangeSubmit(); + .ui5DynamicDateRangeSubmit(); - cy.get("@ddr") - .shadow() - .find("[ui5-input]") + cy.get("@ddr") + .shadow() + .find("[ui5-input]") .as("input"); cy.get("@input") From 3aae82faa7d76c66fa322ea884845faa56e023dd Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Wed, 5 Nov 2025 15:33:09 +0200 Subject: [PATCH 4/5] test: fix value being reset on late popover open event --- packages/main/src/DynamicDateRange.ts | 2 +- packages/main/src/DynamicDateRangePopoverTemplate.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/DynamicDateRange.ts b/packages/main/src/DynamicDateRange.ts index 2dc7ee4d15c6..0c37d2bcbae8 100644 --- a/packages/main/src/DynamicDateRange.ts +++ b/packages/main/src/DynamicDateRange.ts @@ -408,7 +408,7 @@ class DynamicDateRange extends UI5Element { this.open = false; } - onPopoverOpen() { + onPopoverBeforeOpen() { if (this.currentValue !== this.value) { this.currentValue = this.value; } diff --git a/packages/main/src/DynamicDateRangePopoverTemplate.tsx b/packages/main/src/DynamicDateRangePopoverTemplate.tsx index fda88f1bc09e..29fe8837f8c4 100644 --- a/packages/main/src/DynamicDateRangePopoverTemplate.tsx +++ b/packages/main/src/DynamicDateRangePopoverTemplate.tsx @@ -19,7 +19,7 @@ export default function DynamicDateRangePopoverTemplate(this: DynamicDateRange) hideArrow={true} _hideHeader={true} onClose={this.onPopoverClose} - onOpen={this.onPopoverOpen} + onBeforeOpen={this.onPopoverBeforeOpen} onKeyDown={this.onKeyDownPopover} > {this._hasCurrentOptionTemplate && From 5863196e441ea7f0909f920a6357460c29f21390 Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Wed, 5 Nov 2025 15:37:42 +0200 Subject: [PATCH 5/5] chore: spacing --- packages/main/cypress/specs/DynamicDateRange.cy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/cypress/specs/DynamicDateRange.cy.tsx b/packages/main/cypress/specs/DynamicDateRange.cy.tsx index 2b3ecba3948d..a511950fc6bb 100644 --- a/packages/main/cypress/specs/DynamicDateRange.cy.tsx +++ b/packages/main/cypress/specs/DynamicDateRange.cy.tsx @@ -698,7 +698,7 @@ describe("DynamicDateRange DateTimeRange Option", () => { cy.get("@input") .should("have.value", "Dec 25, 2023, 2:30:00 PM - Dec 26, 2023, 4:45:00 AM"); - }); + }); it("should parse input value correctly when option is reopened", () => { cy.get("[ui5-dynamic-date-range]")