From 3309162fffa721af5db87eb23cdaa3c2396e9902 Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Wed, 21 Oct 2026 14:36:15 +0300 Subject: [PATCH 1/3] fix(ui5-calendar): show correct year range when secondaryCalendarType is configured globally --- .../main/cypress/specs/CalendarConfig.cy.tsx | 75 +++++++++++++++++++ packages/main/src/DateComponentBase.ts | 2 +- packages/main/src/YearPicker.ts | 2 +- 3 files changed, 77 insertions(+), 2 deletions(-) diff --git a/packages/main/cypress/specs/CalendarConfig.cy.tsx b/packages/main/cypress/specs/CalendarConfig.cy.tsx index a27f06f50d4c5..0def597aad3e5 100644 --- a/packages/main/cypress/specs/CalendarConfig.cy.tsx +++ b/packages/main/cypress/specs/CalendarConfig.cy.tsx @@ -1,4 +1,5 @@ import Calendar from "../../src/Calendar.js"; +import YearPicker from "../../src/YearPicker.js"; import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js"; import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; import { resetConfiguration } from "@ui5/webcomponents-base/dist/InitialConfiguration.js"; @@ -47,4 +48,78 @@ describe("Calendar general interaction", () => { cy.get("[ui5-calendar]") .should("have.prop", "_secondaryCalendarType", "Gregorian"); }); +}); + +describe("Calendar with secondary calendar type configured globally", () => { + before(() => { + cy.window() + .then($el => { + const scriptElement = document.createElement("script"); + scriptElement.type = "application/json"; + scriptElement.setAttribute("data-ui5-config", "true"); + scriptElement.innerHTML = JSON.stringify({ + "calendarType": "Gregorian", + "secondaryCalendarType": "Islamic" + }); + + return $el.document.head.append(scriptElement); + }) + + cy.wrap({ resetConfiguration }) + .invoke("resetConfiguration", true); + }); + + after(() => { + cy.window() + .then($el => { + const scriptElement = $el.document.head.querySelector("script[data-ui5-config]"); + + scriptElement?.remove(); + }) + + cy.wrap({ resetConfiguration }) + .invoke("resetConfiguration", true); + }) + + it("Year Picker shows correct range when secondary calendar type is configured globally", () => { + cy.mount(); + + cy.get("[ui5-calendar]") + .as("calendar"); + + // Secondary type is resolved from the global config, not from an attribute + cy.get("@calendar").should("not.have.prop", "secondaryCalendarType"); + cy.get("@calendar").should("have.prop", "_secondaryCalendarType", "Islamic"); + + cy.get("@calendar") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-year]") + .realClick(); + + cy.get("@calendar") + .shadow() + .find("[ui5-yearpicker]") + .as("yearPicker"); + + // The two-calendar-type grid renders 8 years + cy.get("@yearPicker") + .shadow() + .find(".ui5-yp-item") + .should("have.length", 8); + + // The currently selected year (2024) must be present in the grid + cy.get("@yearPicker") + .shadow() + .find(".ui5-yp-item .ui5-dp-yeartext") + .should("contain.text", "2024"); + + // The first rendered year is 2022 (selected year is the 3rd cell) + cy.get("@yearPicker") + .shadow() + .find(".ui5-yp-item") + .first() + .find(".ui5-dp-yeartext") + .should("have.text", "2022"); + }); }); \ No newline at end of file diff --git a/packages/main/src/DateComponentBase.ts b/packages/main/src/DateComponentBase.ts index edf1ca43b70ff..069f8a95607ce 100644 --- a/packages/main/src/DateComponentBase.ts +++ b/packages/main/src/DateComponentBase.ts @@ -176,7 +176,7 @@ class DateComponentBase extends UI5Element { } get hasSecondaryCalendarType() { - return !!this.secondaryCalendarType && this.secondaryCalendarType !== this.primaryCalendarType; + return !!this._secondaryCalendarType && this._secondaryCalendarType !== this._primaryCalendarType; } _getMinMaxCalendarDateFromString(date: string) { diff --git a/packages/main/src/YearPicker.ts b/packages/main/src/YearPicker.ts index 2c67d4d60cafd..ffae354e6f77b 100644 --- a/packages/main/src/YearPicker.ts +++ b/packages/main/src/YearPicker.ts @@ -160,7 +160,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { _buildYears() { const pageSize = this._getPageSize(); const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType }); - const oYearFormatInSecType = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType }); + const oYearFormatInSecType = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType }); const calendarDate = this._calendarDate; // store the value of the expensive getter const minDate = this._minDate; // store the value of the expensive getter From 94feb56906668dcfe7bdda80b28432cac530250f Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Fri, 23 Oct 2026 14:05:50 +0300 Subject: [PATCH 2/3] test: clean up test --- .../main/cypress/specs/CalendarConfig.cy.tsx | 82 ++++++------------- 1 file changed, 27 insertions(+), 55 deletions(-) diff --git a/packages/main/cypress/specs/CalendarConfig.cy.tsx b/packages/main/cypress/specs/CalendarConfig.cy.tsx index 0def597aad3e5..1eb6fe0bedfcf 100644 --- a/packages/main/cypress/specs/CalendarConfig.cy.tsx +++ b/packages/main/cypress/specs/CalendarConfig.cy.tsx @@ -4,36 +4,35 @@ import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js"; import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; import { resetConfiguration } from "@ui5/webcomponents-base/dist/InitialConfiguration.js"; +const configureCalendarTypes = (calendarType: string, secondaryCalendarType: string) => { + cy.window() + .then($el => { + const scriptElement = $el.document.createElement("script"); + scriptElement.type = "application/json"; + scriptElement.setAttribute("data-ui5-config", "true"); + scriptElement.innerHTML = JSON.stringify({ calendarType, secondaryCalendarType }); + + $el.document.head.append(scriptElement); + }); + + cy.wrap({ resetConfiguration }) + .invoke("resetConfiguration", true); +}; describe("Calendar general interaction", () => { - before(() => { + afterEach(() => { cy.window() .then($el => { - const scriptElement = document.createElement("script"); - scriptElement.type = "application/json"; - scriptElement.setAttribute("data-ui5-config", "true"); - scriptElement.innerHTML = JSON.stringify({ - "calendarType": "Islamic", - "secondaryCalendarType": "Gregorian" - }); - - return $el.document.head.append(scriptElement); - }) + $el.document.head.querySelector("script[data-ui5-config]")?.remove(); + }); cy.wrap({ resetConfiguration }) .invoke("resetConfiguration", true); }); - after(() => { - cy.window() - .then($el => { - const scriptElement = $el.document.head.querySelector("script[data-ui5-config]"); - - scriptElement?.remove(); - }) - }) - it("Calendar type configured", () => { + configureCalendarTypes("Islamic", "Gregorian"); + cy.mount(); cy.get("[ui5-calendar]") @@ -48,48 +47,21 @@ describe("Calendar general interaction", () => { cy.get("[ui5-calendar]") .should("have.prop", "_secondaryCalendarType", "Gregorian"); }); -}); - -describe("Calendar with secondary calendar type configured globally", () => { - before(() => { - cy.window() - .then($el => { - const scriptElement = document.createElement("script"); - scriptElement.type = "application/json"; - scriptElement.setAttribute("data-ui5-config", "true"); - scriptElement.innerHTML = JSON.stringify({ - "calendarType": "Gregorian", - "secondaryCalendarType": "Islamic" - }); - - return $el.document.head.append(scriptElement); - }) - - cy.wrap({ resetConfiguration }) - .invoke("resetConfiguration", true); - }); - - after(() => { - cy.window() - .then($el => { - const scriptElement = $el.document.head.querySelector("script[data-ui5-config]"); - - scriptElement?.remove(); - }) - - cy.wrap({ resetConfiguration }) - .invoke("resetConfiguration", true); - }) it("Year Picker shows correct range when secondary calendar type is configured globally", () => { + configureCalendarTypes("Gregorian", "Islamic"); + cy.mount(); cy.get("[ui5-calendar]") .as("calendar"); // Secondary type is resolved from the global config, not from an attribute - cy.get("@calendar").should("not.have.prop", "secondaryCalendarType"); - cy.get("@calendar").should("have.prop", "_secondaryCalendarType", "Islamic"); + cy.get("@calendar") + .should("not.have.prop", "secondaryCalendarType"); + + cy.get("@calendar") + .should("have.prop", "_secondaryCalendarType", "Islamic"); cy.get("@calendar") .shadow() @@ -122,4 +94,4 @@ describe("Calendar with secondary calendar type configured globally", () => { .find(".ui5-dp-yeartext") .should("have.text", "2022"); }); -}); \ No newline at end of file +}); From 4a64cdfc243b67b0a93bdc3fce3b7e2ecbf7bfc4 Mon Sep 17 00:00:00 2001 From: Diana Petcheva Date: Fri, 23 Oct 2026 16:08:23 +0300 Subject: [PATCH 3/3] test: revert the last fixes --- .../main/cypress/specs/CalendarConfig.cy.tsx | 73 +++++++++++++------ 1 file changed, 52 insertions(+), 21 deletions(-) diff --git a/packages/main/cypress/specs/CalendarConfig.cy.tsx b/packages/main/cypress/specs/CalendarConfig.cy.tsx index 1eb6fe0bedfcf..ecdb8a1673ae0 100644 --- a/packages/main/cypress/specs/CalendarConfig.cy.tsx +++ b/packages/main/cypress/specs/CalendarConfig.cy.tsx @@ -4,35 +4,36 @@ import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js"; import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; import { resetConfiguration } from "@ui5/webcomponents-base/dist/InitialConfiguration.js"; -const configureCalendarTypes = (calendarType: string, secondaryCalendarType: string) => { - cy.window() - .then($el => { - const scriptElement = $el.document.createElement("script"); - scriptElement.type = "application/json"; - scriptElement.setAttribute("data-ui5-config", "true"); - scriptElement.innerHTML = JSON.stringify({ calendarType, secondaryCalendarType }); - - $el.document.head.append(scriptElement); - }); - - cy.wrap({ resetConfiguration }) - .invoke("resetConfiguration", true); -}; describe("Calendar general interaction", () => { - afterEach(() => { + before(() => { cy.window() .then($el => { - $el.document.head.querySelector("script[data-ui5-config]")?.remove(); - }); + const scriptElement = document.createElement("script"); + scriptElement.type = "application/json"; + scriptElement.setAttribute("data-ui5-config", "true"); + scriptElement.innerHTML = JSON.stringify({ + "calendarType": "Islamic", + "secondaryCalendarType": "Gregorian" + }); + + return $el.document.head.append(scriptElement); + }) cy.wrap({ resetConfiguration }) .invoke("resetConfiguration", true); }); - it("Calendar type configured", () => { - configureCalendarTypes("Islamic", "Gregorian"); + after(() => { + cy.window() + .then($el => { + const scriptElement = $el.document.head.querySelector("script[data-ui5-config]"); + + scriptElement?.remove(); + }) + }) + it("Calendar type configured", () => { cy.mount(); cy.get("[ui5-calendar]") @@ -47,10 +48,40 @@ describe("Calendar general interaction", () => { cy.get("[ui5-calendar]") .should("have.prop", "_secondaryCalendarType", "Gregorian"); }); +}); - it("Year Picker shows correct range when secondary calendar type is configured globally", () => { - configureCalendarTypes("Gregorian", "Islamic"); +describe("Calendar with secondary calendar type configured globally", () => { + before(() => { + cy.window() + .then($el => { + const scriptElement = document.createElement("script"); + scriptElement.type = "application/json"; + scriptElement.setAttribute("data-ui5-config", "true"); + scriptElement.innerHTML = JSON.stringify({ + "calendarType": "Gregorian", + "secondaryCalendarType": "Islamic" + }); + + return $el.document.head.append(scriptElement); + }) + cy.wrap({ resetConfiguration }) + .invoke("resetConfiguration", true); + }); + + after(() => { + cy.window() + .then($el => { + const scriptElement = $el.document.head.querySelector("script[data-ui5-config]"); + + scriptElement?.remove(); + }) + + cy.wrap({ resetConfiguration }) + .invoke("resetConfiguration", true); + }) + + it("Year Picker shows correct range when secondary calendar type is configured globally", () => { cy.mount(); cy.get("[ui5-calendar]")