diff --git a/packages/main/cypress/specs/DynamicDateRange.cy.tsx b/packages/main/cypress/specs/DynamicDateRange.cy.tsx
index a2e81f026294..a511950fc6bb 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,75 +324,75 @@ 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', () => {
- // new LastOptions();
- // new NextOptions();
+ 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.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]')
+ 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.skip('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(),
];
cy.get("[ui5-dynamic-date-range]")
.as("ddr")
.ui5DynamicDateRangeOpen()
+ .ui5DynamicDateRangeSetInput("Oct 1, 2025, 0:30:00 PM")
.ui5DynamicDateRangeSelectOption();
cy.get("@ddr")
@@ -534,25 +535,23 @@ describe('FromDateTime Option', () => {
cy.get("@ddr")
.ui5DynamicDateRangeSubmit();
- cy.get("@input")
+ cy.get("@ddr")
.shadow()
- .find("input")
- .should('contain.value', 'From');
+ .find("[ui5-input]")
+ .as("input");
cy.get("@input")
- .shadow()
- .find("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(),
];
@@ -568,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(),
];
@@ -595,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']")
@@ -603,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']")
@@ -615,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.skip('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")
@@ -647,19 +647,19 @@ describe('ToDateTime Option', () => {
cy.get("@ddr")
.ui5DynamicDateRangeSubmit();
- cy.get("@input")
+ cy.get("@ddr")
.shadow()
- .find("input")
- .should('contain.value', 'To');
+ .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();
});
@@ -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,18 +687,18 @@ 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")
.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]")
diff --git a/packages/main/cypress/support/commands/DynamicDateRange.commands.ts b/packages/main/cypress/support/commands/DynamicDateRange.commands.ts
index 3bbab0dc9b09..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");
@@ -118,6 +140,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();
});
@@ -128,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
}
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 &&