From a53fc9d3213ae40b7487546036778b5baf6a4eac Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Mon, 13 Jul 2026 15:59:55 +0300 Subject: [PATCH 01/10] fix: stabalize DatePicker tests --- packages/main/src/DayPicker.ts | 2 ++ packages/main/src/MonthPicker.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index b145a3b579200..885b4b1c6dd55 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -119,6 +119,8 @@ type DayPickerNavigateEventDetail = { tag: "ui5-daypicker", styles: dayPickerCSS, template: DayPickerTemplate, + languageAware: true, + cldr: true, }) /** * Fired when the selected date(s) change diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index 63a514d75b27c..0416384c61e5d 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -77,6 +77,8 @@ type MonthPickerNavigateEventDetail = { tag: "ui5-monthpicker", template: MonthPickerTemplate, styles: monthPickerStyles, + languageAware: true, + cldr: true, }) /** * Fired when the user selects a month via "Space", "Enter" or click. From 4ba206ae28e7c5e326a2aa4d8968d5df65eea5a8 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Mon, 13 Jul 2026 16:23:36 +0300 Subject: [PATCH 02/10] fix: stabilize tests --- packages/main/src/Calendar.ts | 2 ++ packages/main/src/YearPicker.ts | 2 ++ packages/main/src/YearRangePicker.ts | 2 ++ 3 files changed, 6 insertions(+) diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index 06cd361ae13e0..63e8938b2daf1 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -231,6 +231,8 @@ type DisabledDateRangeT = { fastNavigation: true, template: CalendarTemplate, styles: [calendarCSS, CalendarHeaderCss], + languageAware: true, + cldr: true, }) /** * Fired when the selected dates change. diff --git a/packages/main/src/YearPicker.ts b/packages/main/src/YearPicker.ts index 4780c867b0c4f..7e28a24fc94f8 100644 --- a/packages/main/src/YearPicker.ts +++ b/packages/main/src/YearPicker.ts @@ -70,6 +70,8 @@ type YearPickerNavigateEventDetail = { tag: "ui5-yearpicker", styles: yearPickerStyles, template: YearPickerTemplate, + languageAware: true, + cldr: true, }) /** * Fired when the user selects a year via "Space", "Enter" or click. diff --git a/packages/main/src/YearRangePicker.ts b/packages/main/src/YearRangePicker.ts index 713865f1daa37..9ac6aada4b197 100644 --- a/packages/main/src/YearRangePicker.ts +++ b/packages/main/src/YearRangePicker.ts @@ -71,6 +71,8 @@ type YearRangePickerNavigateEventDetail = { yearRangePickerStyles, ], template: YearRangePickerTemplate, + languageAware: true, + cldr: true, }) /** From 4c87a8ad0ceaaf63da0fec09794ec41e6a469819 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Mon, 13 Jul 2026 17:09:31 +0300 Subject: [PATCH 03/10] fix: clear cache when language is changed --- packages/localization/src/getCachedLocaleDataInstance.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/localization/src/getCachedLocaleDataInstance.ts b/packages/localization/src/getCachedLocaleDataInstance.ts index 38542ca571070..675d3827b5a5d 100644 --- a/packages/localization/src/getCachedLocaleDataInstance.ts +++ b/packages/localization/src/getCachedLocaleDataInstance.ts @@ -1,9 +1,17 @@ import type Locale from "@ui5/webcomponents-base/dist/locale/Locale.js"; import type LocaleT from "sap/ui/core/Locale"; +import { attachLanguageChange } from "@ui5/webcomponents-base/dist/locale/languageChange.js"; import LocaleData from "./LocaleData.js"; const cache = new Map(); +// Invalidate cached LocaleData instances on language change so that the next +// access creates a fresh instance after the new locale's CLDR data has loaded. +attachLanguageChange(() => { + cache.clear(); + return Promise.resolve(); +}); + const getCachedLocaleDataInstance = (locale: Locale) => { if (!cache.has(locale)) { // @ts-expect-error - The LocaleData constructor expects a LocaleT, but we are passing a Locale. This is a known issue and can be ignored for now. From c8b0e090ac39ab1f0e14ecd2ae2cb54854307a84 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Mon, 13 Jul 2026 17:34:08 +0300 Subject: [PATCH 04/10] test: refactor tests --- .../src/getCachedLocaleDataInstance.ts | 8 -- packages/main/cypress/specs/DatePicker.cy.tsx | 82 ++++++++++--------- packages/main/src/Calendar.ts | 2 - packages/main/src/DayPicker.ts | 2 - packages/main/src/MonthPicker.ts | 2 - packages/main/src/YearPicker.ts | 2 - packages/main/src/YearRangePicker.ts | 2 - 7 files changed, 45 insertions(+), 55 deletions(-) diff --git a/packages/localization/src/getCachedLocaleDataInstance.ts b/packages/localization/src/getCachedLocaleDataInstance.ts index 675d3827b5a5d..38542ca571070 100644 --- a/packages/localization/src/getCachedLocaleDataInstance.ts +++ b/packages/localization/src/getCachedLocaleDataInstance.ts @@ -1,17 +1,9 @@ import type Locale from "@ui5/webcomponents-base/dist/locale/Locale.js"; import type LocaleT from "sap/ui/core/Locale"; -import { attachLanguageChange } from "@ui5/webcomponents-base/dist/locale/languageChange.js"; import LocaleData from "./LocaleData.js"; const cache = new Map(); -// Invalidate cached LocaleData instances on language change so that the next -// access creates a fresh instance after the new locale's CLDR data has loaded. -attachLanguageChange(() => { - cache.clear(); - return Promise.resolve(); -}); - const getCachedLocaleDataInstance = (locale: Locale) => { if (!cache.has(locale)) { // @ts-expect-error - The LocaleData constructor expects a LocaleT, but we are passing a Locale. This is a known issue and can be ignored for now. diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx index 5144614ddc2fb..25282a5574280 100644 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -32,33 +32,37 @@ describe("Date Picker Tests", () => { .should("not.have.attr", "aria-expanded"); }); - it("input receives value in format pattern depending on the set language", () => { - cy.wrap({ setLanguage }) - .then(api => api.setLanguage("bg")); + describe("Bulgarian locale", () => { + beforeEach(() => { + cy.wrap({ setLanguage }).then(api => api.setLanguage("bg")); + }); - cy.mount(); + afterEach(() => { + cy.wrap({ setLanguage }).then(api => api.setLanguage("en")); + }); - cy.get("[ui5-date-picker]") - .as("datePicker"); + it("input receives value in format pattern depending on the set language", () => { + cy.mount(); - cy.get("@datePicker") - .should("have.value", "11 декември 2018\u202fг.") - .and("have.attr", "value-state", "None"); + cy.get("[ui5-date-picker]") + .as("datePicker"); - const timestamp_11_Dec_2018 = 1544486400; + cy.get("@datePicker") + .should("have.value", "11 декември 2018\u202fг.") + .and("have.attr", "value-state", "None"); - cy.get("@datePicker") - .ui5DatePickerGetInnerInput() - .realClick() - .should("be.focused") - .realPress("F4"); + const timestamp_11_Dec_2018 = 1544486400; - cy.get("@datePicker") - .ui5DatePickerGetPopoverDate(timestamp_11_Dec_2018) - .should("have.class", "ui5-dp-item--selected"); + cy.get("@datePicker") + .ui5DatePickerGetInnerInput() + .realClick() + .should("be.focused") + .realPress("F4"); - cy.wrap({ setLanguage }) - .then(api => api.setLanguage("en")); + cy.get("@datePicker") + .ui5DatePickerGetPopoverDate(timestamp_11_Dec_2018) + .should("have.class", "ui5-dp-item--selected"); + }); }); it("custom formatting", () => { @@ -316,29 +320,33 @@ describe("Date Picker Tests", () => { .should("have.value", ""); }); - it("respect first day of the week - monday", () => { - cy.wrap({ setLanguage }) - .then(api => api.setLanguage("bg")); + describe("Bulgarian locale - first day of week", () => { + beforeEach(() => { + cy.wrap({ setLanguage }).then(api => api.setLanguage("bg")); + }); - cy.mount(); + afterEach(() => { + cy.wrap({ setLanguage }).then(api => api.setLanguage("en")); + }); - const timestamp_3_Feb_2019 = 1549152000; - const timestamp_28_Jan_2019 = 1548633600; + it("respect first day of the week - monday", () => { + cy.mount(); - cy.get("[ui5-date-picker]") - .as("datePicker") - .ui5DatePickerValueHelpIconPress(); + const timestamp_3_Feb_2019 = 1549152000; + const timestamp_28_Jan_2019 = 1548633600; - cy.get("@datePicker") - .ui5DatePickerGetFirstDisplayedDate() - .should("have.attr", "data-sap-timestamp", timestamp_28_Jan_2019.toString()); + cy.get("[ui5-date-picker]") + .as("datePicker") + .ui5DatePickerValueHelpIconPress(); - cy.get("@datePicker") - .ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019) - .should("have.class", "ui5-dp-wday6"); + cy.get("@datePicker") + .ui5DatePickerGetFirstDisplayedDate() + .should("have.attr", "data-sap-timestamp", timestamp_28_Jan_2019.toString()); - cy.wrap({ setLanguage }) - .then(api => api.setLanguage("en")); + cy.get("@datePicker") + .ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019) + .should("have.class", "ui5-dp-wday6"); + }); }); it("if today is 30 jan, clicking next month does not skip feb", () => { diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index 63e8938b2daf1..06cd361ae13e0 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -231,8 +231,6 @@ type DisabledDateRangeT = { fastNavigation: true, template: CalendarTemplate, styles: [calendarCSS, CalendarHeaderCss], - languageAware: true, - cldr: true, }) /** * Fired when the selected dates change. diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index 885b4b1c6dd55..b145a3b579200 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -119,8 +119,6 @@ type DayPickerNavigateEventDetail = { tag: "ui5-daypicker", styles: dayPickerCSS, template: DayPickerTemplate, - languageAware: true, - cldr: true, }) /** * Fired when the selected date(s) change diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index 0416384c61e5d..63a514d75b27c 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -77,8 +77,6 @@ type MonthPickerNavigateEventDetail = { tag: "ui5-monthpicker", template: MonthPickerTemplate, styles: monthPickerStyles, - languageAware: true, - cldr: true, }) /** * Fired when the user selects a month via "Space", "Enter" or click. diff --git a/packages/main/src/YearPicker.ts b/packages/main/src/YearPicker.ts index 7e28a24fc94f8..4780c867b0c4f 100644 --- a/packages/main/src/YearPicker.ts +++ b/packages/main/src/YearPicker.ts @@ -70,8 +70,6 @@ type YearPickerNavigateEventDetail = { tag: "ui5-yearpicker", styles: yearPickerStyles, template: YearPickerTemplate, - languageAware: true, - cldr: true, }) /** * Fired when the user selects a year via "Space", "Enter" or click. diff --git a/packages/main/src/YearRangePicker.ts b/packages/main/src/YearRangePicker.ts index 9ac6aada4b197..713865f1daa37 100644 --- a/packages/main/src/YearRangePicker.ts +++ b/packages/main/src/YearRangePicker.ts @@ -71,8 +71,6 @@ type YearRangePickerNavigateEventDetail = { yearRangePickerStyles, ], template: YearRangePickerTemplate, - languageAware: true, - cldr: true, }) /** From 4c6ec4595109227d2ab6954e92bb822a9b7e6325 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Tue, 14 Jul 2026 10:32:30 +0300 Subject: [PATCH 05/10] fix: stabilize tests --- packages/main/cypress/specs/DatePicker.cy.tsx | 88 +++++++++---------- 1 file changed, 41 insertions(+), 47 deletions(-) diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx index 25282a5574280..fff1dd52130bf 100644 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -5,6 +5,10 @@ import Label from "../../src/Label.js"; import { DATEPICKER_POPOVER_ACCESSIBLE_NAME } from "../../src/generated/i18n/i18n-defaults.js"; describe("Date Picker Tests", () => { + afterEach(() => { + cy.wrap({ setLanguage }).then(api => api.setLanguage("en")); + }); + it("input renders", () => { cy.mount(); @@ -32,37 +36,32 @@ describe("Date Picker Tests", () => { .should("not.have.attr", "aria-expanded"); }); - describe("Bulgarian locale", () => { - beforeEach(() => { - cy.wrap({ setLanguage }).then(api => api.setLanguage("bg")); - }); - - afterEach(() => { - cy.wrap({ setLanguage }).then(api => api.setLanguage("en")); - }); + it("input receives value in format pattern depending on the set language", () => { + cy.wrap({ setLanguage }) + .then(api => { + return api.setLanguage("bg"); + }); - it("input receives value in format pattern depending on the set language", () => { - cy.mount(); + cy.mount(); - cy.get("[ui5-date-picker]") - .as("datePicker"); + cy.get("[ui5-date-picker]") + .as("datePicker"); - cy.get("@datePicker") - .should("have.value", "11 декември 2018\u202fг.") - .and("have.attr", "value-state", "None"); + cy.get("@datePicker") + .should("have.value", "11 декември 2018\u202fг.") + .and("have.attr", "value-state", "None"); - const timestamp_11_Dec_2018 = 1544486400; + const timestamp_11_Dec_2018 = 1544486400; - cy.get("@datePicker") - .ui5DatePickerGetInnerInput() - .realClick() - .should("be.focused") - .realPress("F4"); + cy.get("@datePicker") + .ui5DatePickerGetInnerInput() + .realClick() + .should("be.focused") + .realPress("F4"); - cy.get("@datePicker") - .ui5DatePickerGetPopoverDate(timestamp_11_Dec_2018) - .should("have.class", "ui5-dp-item--selected"); - }); + cy.get("@datePicker") + .ui5DatePickerGetPopoverDate(timestamp_11_Dec_2018) + .should("have.class", "ui5-dp-item--selected"); }); it("custom formatting", () => { @@ -320,33 +319,28 @@ describe("Date Picker Tests", () => { .should("have.value", ""); }); - describe("Bulgarian locale - first day of week", () => { - beforeEach(() => { - cy.wrap({ setLanguage }).then(api => api.setLanguage("bg")); - }); - - afterEach(() => { - cy.wrap({ setLanguage }).then(api => api.setLanguage("en")); - }); + it("respect first day of the week - monday", () => { + cy.wrap({ setLanguage }) + .then(api => { + return api.setLanguage("bg"); + }); - it("respect first day of the week - monday", () => { - cy.mount(); + cy.mount(); - const timestamp_3_Feb_2019 = 1549152000; - const timestamp_28_Jan_2019 = 1548633600; + const timestamp_3_Feb_2019 = 1549152000; + const timestamp_28_Jan_2019 = 1548633600; - cy.get("[ui5-date-picker]") - .as("datePicker") - .ui5DatePickerValueHelpIconPress(); + cy.get("[ui5-date-picker]") + .as("datePicker") + .ui5DatePickerValueHelpIconPress(); - cy.get("@datePicker") - .ui5DatePickerGetFirstDisplayedDate() - .should("have.attr", "data-sap-timestamp", timestamp_28_Jan_2019.toString()); + cy.get("@datePicker") + .ui5DatePickerGetFirstDisplayedDate() + .should("have.attr", "data-sap-timestamp", timestamp_28_Jan_2019.toString()); - cy.get("@datePicker") - .ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019) - .should("have.class", "ui5-dp-wday6"); - }); + cy.get("@datePicker") + .ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019) + .should("have.class", "ui5-dp-wday6"); }); it("if today is 30 jan, clicking next month does not skip feb", () => { From ed276bcf72cc2b0204bbd4fb87ded44c17a926f7 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Tue, 14 Jul 2026 13:49:28 +0300 Subject: [PATCH 06/10] test: isolate tests --- packages/main/cypress/specs/DatePicker.cy.tsx | 84 +++++++++---------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx index fff1dd52130bf..4e7c396ddb699 100644 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -5,9 +5,9 @@ import Label from "../../src/Label.js"; import { DATEPICKER_POPOVER_ACCESSIBLE_NAME } from "../../src/generated/i18n/i18n-defaults.js"; describe("Date Picker Tests", () => { - afterEach(() => { - cy.wrap({ setLanguage }).then(api => api.setLanguage("en")); - }); + // afterEach(() => { + // cy.wrap({ setLanguage }).then(api => api.setLanguage("en")); + // }); it("input renders", () => { cy.mount(); @@ -36,33 +36,33 @@ describe("Date Picker Tests", () => { .should("not.have.attr", "aria-expanded"); }); - it("input receives value in format pattern depending on the set language", () => { - cy.wrap({ setLanguage }) - .then(api => { - return api.setLanguage("bg"); - }); + // it("input receives value in format pattern depending on the set language", () => { + // cy.wrap({ setLanguage }) + // .then(api => { + // return api.setLanguage("bg"); + // }); - cy.mount(); + // cy.mount(); - cy.get("[ui5-date-picker]") - .as("datePicker"); + // cy.get("[ui5-date-picker]") + // .as("datePicker"); - cy.get("@datePicker") - .should("have.value", "11 декември 2018\u202fг.") - .and("have.attr", "value-state", "None"); + // cy.get("@datePicker") + // .should("have.value", "11 декември 2018\u202fг.") + // .and("have.attr", "value-state", "None"); - const timestamp_11_Dec_2018 = 1544486400; + // const timestamp_11_Dec_2018 = 1544486400; - cy.get("@datePicker") - .ui5DatePickerGetInnerInput() - .realClick() - .should("be.focused") - .realPress("F4"); + // cy.get("@datePicker") + // .ui5DatePickerGetInnerInput() + // .realClick() + // .should("be.focused") + // .realPress("F4"); - cy.get("@datePicker") - .ui5DatePickerGetPopoverDate(timestamp_11_Dec_2018) - .should("have.class", "ui5-dp-item--selected"); - }); + // cy.get("@datePicker") + // .ui5DatePickerGetPopoverDate(timestamp_11_Dec_2018) + // .should("have.class", "ui5-dp-item--selected"); + // }); it("custom formatting", () => { cy.mount(); @@ -319,29 +319,29 @@ describe("Date Picker Tests", () => { .should("have.value", ""); }); - it("respect first day of the week - monday", () => { - cy.wrap({ setLanguage }) - .then(api => { - return api.setLanguage("bg"); - }); + // it("respect first day of the week - monday", () => { + // cy.wrap({ setLanguage }) + // .then(api => { + // return api.setLanguage("bg"); + // }); - cy.mount(); + // cy.mount(); - const timestamp_3_Feb_2019 = 1549152000; - const timestamp_28_Jan_2019 = 1548633600; + // const timestamp_3_Feb_2019 = 1549152000; + // const timestamp_28_Jan_2019 = 1548633600; - cy.get("[ui5-date-picker]") - .as("datePicker") - .ui5DatePickerValueHelpIconPress(); + // cy.get("[ui5-date-picker]") + // .as("datePicker") + // .ui5DatePickerValueHelpIconPress(); - cy.get("@datePicker") - .ui5DatePickerGetFirstDisplayedDate() - .should("have.attr", "data-sap-timestamp", timestamp_28_Jan_2019.toString()); + // cy.get("@datePicker") + // .ui5DatePickerGetFirstDisplayedDate() + // .should("have.attr", "data-sap-timestamp", timestamp_28_Jan_2019.toString()); - cy.get("@datePicker") - .ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019) - .should("have.class", "ui5-dp-wday6"); - }); + // cy.get("@datePicker") + // .ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019) + // .should("have.class", "ui5-dp-wday6"); + // }); it("if today is 30 jan, clicking next month does not skip feb", () => { cy.mount(); From 721c22423c4cea592f80b681fd6a9669f542d522 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Tue, 14 Jul 2026 14:16:11 +0300 Subject: [PATCH 07/10] test: await setLanguage promise --- packages/main/cypress/specs/DatePicker.cy.tsx | 92 ++++++++++--------- 1 file changed, 49 insertions(+), 43 deletions(-) diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx index 4e7c396ddb699..55f3d62ef3198 100644 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -4,11 +4,9 @@ import DatePicker from "../../src/DatePicker.js"; import Label from "../../src/Label.js"; import { DATEPICKER_POPOVER_ACCESSIBLE_NAME } from "../../src/generated/i18n/i18n-defaults.js"; -describe("Date Picker Tests", () => { - // afterEach(() => { - // cy.wrap({ setLanguage }).then(api => api.setLanguage("en")); - // }); +let languageReady: Promise; +describe("Date Picker Tests", () => { it("input renders", () => { cy.mount(); @@ -36,33 +34,37 @@ describe("Date Picker Tests", () => { .should("not.have.attr", "aria-expanded"); }); - // it("input receives value in format pattern depending on the set language", () => { - // cy.wrap({ setLanguage }) - // .then(api => { - // return api.setLanguage("bg"); - // }); + it("input receives value in format pattern depending on the set language", () => { + cy.then(() => { + languageReady = setLanguage("bg"); + }); - // cy.mount(); + cy.then(() => languageReady); - // cy.get("[ui5-date-picker]") - // .as("datePicker"); + cy.mount(); - // cy.get("@datePicker") - // .should("have.value", "11 декември 2018\u202fг.") - // .and("have.attr", "value-state", "None"); + cy.get("[ui5-date-picker]") + .as("datePicker"); - // const timestamp_11_Dec_2018 = 1544486400; + cy.get("@datePicker") + .should("have.value", "11 декември 2018\u202fг.") + .and("have.attr", "value-state", "None"); - // cy.get("@datePicker") - // .ui5DatePickerGetInnerInput() - // .realClick() - // .should("be.focused") - // .realPress("F4"); + const timestamp_11_Dec_2018 = 1544486400; - // cy.get("@datePicker") - // .ui5DatePickerGetPopoverDate(timestamp_11_Dec_2018) - // .should("have.class", "ui5-dp-item--selected"); - // }); + cy.get("@datePicker") + .ui5DatePickerGetInnerInput() + .realClick() + .should("be.focused") + .realPress("F4"); + + cy.get("@datePicker") + .ui5DatePickerGetPopoverDate(timestamp_11_Dec_2018) + .should("have.class", "ui5-dp-item--selected"); + + cy.wrap({ setLanguage }) + .then(api => api.setLanguage("en")); + }); it("custom formatting", () => { cy.mount(); @@ -319,29 +321,33 @@ describe("Date Picker Tests", () => { .should("have.value", ""); }); - // it("respect first day of the week - monday", () => { - // cy.wrap({ setLanguage }) - // .then(api => { - // return api.setLanguage("bg"); - // }); + it("respect first day of the week - monday", () => { + cy.then(() => { + languageReady = setLanguage("bg"); + }); - // cy.mount(); + cy.mount(); - // const timestamp_3_Feb_2019 = 1549152000; - // const timestamp_28_Jan_2019 = 1548633600; + cy.then(() => languageReady); + + const timestamp_3_Feb_2019 = 1549152000; + const timestamp_28_Jan_2019 = 1548633600; + + cy.get("[ui5-date-picker]") + .as("datePicker") + .ui5DatePickerValueHelpIconPress(); - // cy.get("[ui5-date-picker]") - // .as("datePicker") - // .ui5DatePickerValueHelpIconPress(); + cy.get("@datePicker") + .ui5DatePickerGetFirstDisplayedDate() + .should("have.attr", "data-sap-timestamp", timestamp_28_Jan_2019.toString()); - // cy.get("@datePicker") - // .ui5DatePickerGetFirstDisplayedDate() - // .should("have.attr", "data-sap-timestamp", timestamp_28_Jan_2019.toString()); + cy.get("@datePicker") + .ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019) + .should("have.class", "ui5-dp-wday6"); - // cy.get("@datePicker") - // .ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019) - // .should("have.class", "ui5-dp-wday6"); - // }); + cy.wrap({ setLanguage }) + .then(api => api.setLanguage("en")); + }); it("if today is 30 jan, clicking next month does not skip feb", () => { cy.mount(); From c4ee43a12d8e3b6813ed47744a69d003179e33a6 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Tue, 14 Jul 2026 15:09:09 +0300 Subject: [PATCH 08/10] test: move locale test into seperate module --- packages/main/cypress/specs/DatePicker.cy.tsx | 113 ++++++++---------- 1 file changed, 51 insertions(+), 62 deletions(-) diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx index 55f3d62ef3198..9166dd0c56516 100644 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -4,8 +4,6 @@ import DatePicker from "../../src/DatePicker.js"; import Label from "../../src/Label.js"; import { DATEPICKER_POPOVER_ACCESSIBLE_NAME } from "../../src/generated/i18n/i18n-defaults.js"; -let languageReady: Promise; - describe("Date Picker Tests", () => { it("input renders", () => { cy.mount(); @@ -34,38 +32,6 @@ describe("Date Picker Tests", () => { .should("not.have.attr", "aria-expanded"); }); - it("input receives value in format pattern depending on the set language", () => { - cy.then(() => { - languageReady = setLanguage("bg"); - }); - - cy.then(() => languageReady); - - cy.mount(); - - cy.get("[ui5-date-picker]") - .as("datePicker"); - - cy.get("@datePicker") - .should("have.value", "11 декември 2018\u202fг.") - .and("have.attr", "value-state", "None"); - - const timestamp_11_Dec_2018 = 1544486400; - - cy.get("@datePicker") - .ui5DatePickerGetInnerInput() - .realClick() - .should("be.focused") - .realPress("F4"); - - cy.get("@datePicker") - .ui5DatePickerGetPopoverDate(timestamp_11_Dec_2018) - .should("have.class", "ui5-dp-item--selected"); - - cy.wrap({ setLanguage }) - .then(api => api.setLanguage("en")); - }); - it("custom formatting", () => { cy.mount(); @@ -321,34 +287,6 @@ describe("Date Picker Tests", () => { .should("have.value", ""); }); - it("respect first day of the week - monday", () => { - cy.then(() => { - languageReady = setLanguage("bg"); - }); - - cy.mount(); - - cy.then(() => languageReady); - - const timestamp_3_Feb_2019 = 1549152000; - const timestamp_28_Jan_2019 = 1548633600; - - cy.get("[ui5-date-picker]") - .as("datePicker") - .ui5DatePickerValueHelpIconPress(); - - cy.get("@datePicker") - .ui5DatePickerGetFirstDisplayedDate() - .should("have.attr", "data-sap-timestamp", timestamp_28_Jan_2019.toString()); - - cy.get("@datePicker") - .ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019) - .should("have.class", "ui5-dp-wday6"); - - cy.wrap({ setLanguage }) - .then(api => api.setLanguage("en")); - }); - it("if today is 30 jan, clicking next month does not skip feb", () => { cy.mount(); @@ -2075,3 +2013,54 @@ describe("CSS Parts", () => { .should("have.attr", "part", "input"); }); }); +describe("Bulgarian locale", () => { + before(() => { + cy.wrap({ setLanguage }).then(api => api.setLanguage("bg")); + }); + + after(() => { + cy.wrap({ setLanguage }).then(api => api.setLanguage("en")); + }); + + it("input receives value in format pattern depending on the set language", () => { + cy.mount(); + + cy.get("[ui5-date-picker]") + .as("datePicker"); + + cy.get("@datePicker") + .should("have.value", "11 декември 2018 г.") + .and("have.attr", "value-state", "None"); + + const timestamp_11_Dec_2018 = 1544486400; + + cy.get("@datePicker") + .ui5DatePickerGetInnerInput() + .realClick() + .should("be.focused") + .realPress("F4"); + + cy.get("@datePicker") + .ui5DatePickerGetPopoverDate(timestamp_11_Dec_2018) + .should("have.class", "ui5-dp-item--selected"); + }); + + it("respect first day of the week - monday", () => { + cy.mount(); + + const timestamp_3_Feb_2019 = 1549152000; + const timestamp_28_Jan_2019 = 1548633600; + + cy.get("[ui5-date-picker]") + .as("datePicker") + .ui5DatePickerValueHelpIconPress(); + + cy.get("@datePicker") + .ui5DatePickerGetFirstDisplayedDate() + .should("have.attr", "data-sap-timestamp", timestamp_28_Jan_2019.toString()); + + cy.get("@datePicker") + .ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019) + .should("have.class", "ui5-dp-wday6"); + }); +}); From 36eb12c15fc0159e11a17325630556232b13d9c5 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Tue, 14 Jul 2026 15:50:32 +0300 Subject: [PATCH 09/10] test --- packages/main/cypress/specs/DatePicker.cy.tsx | 113 ++++++++++-------- 1 file changed, 62 insertions(+), 51 deletions(-) diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx index 9166dd0c56516..cb107d06be99a 100644 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -32,6 +32,39 @@ describe("Date Picker Tests", () => { .should("not.have.attr", "aria-expanded"); }); + it("input receives value in format pattern depending on the set language", () => { + cy.wrap({ setLanguage }) + .then(api => { + return api.setLanguage("bg"); + }); + + cy.mount(); + + cy.get("[ui5-date-picker]") + .as("datePicker"); + + cy.get("@datePicker") + .should("have.value", "11 декември 2018\u202fг.") + .and("have.attr", "value-state", "None"); + + const timestamp_11_Dec_2018 = 1544486400; + + cy.get("@datePicker") + .ui5DatePickerGetInnerInput() + .realClick() + .should("be.focused") + .realPress("F4"); + + cy.get("@datePicker") + .ui5DatePickerGetPopoverDate(timestamp_11_Dec_2018) + .should("have.class", "ui5-dp-item--selected"); + + cy.wrap({ setLanguage }) + .then(api => { + return api.setLanguage("en"); + }); + }); + it("custom formatting", () => { cy.mount(); @@ -287,6 +320,35 @@ describe("Date Picker Tests", () => { .should("have.value", ""); }); + it("respect first day of the week - monday", () => { + cy.wrap({ setLanguage }) + .then(api => { + return api.setLanguage("bg"); + }); + + cy.mount(); + + const timestamp_3_Feb_2019 = 1549152000; + const timestamp_28_Jan_2019 = 1548633600; + + cy.get("[ui5-date-picker]") + .as("datePicker") + .ui5DatePickerValueHelpIconPress(); + + cy.get("@datePicker") + .ui5DatePickerGetFirstDisplayedDate() + .should("have.attr", "data-sap-timestamp", timestamp_28_Jan_2019.toString()); + + cy.get("@datePicker") + .ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019) + .should("have.class", "ui5-dp-wday6"); + + cy.wrap({ setLanguage }) + .then(api => { + return api.setLanguage("en"); + }); + }); + it("if today is 30 jan, clicking next month does not skip feb", () => { cy.mount(); @@ -2013,54 +2075,3 @@ describe("CSS Parts", () => { .should("have.attr", "part", "input"); }); }); -describe("Bulgarian locale", () => { - before(() => { - cy.wrap({ setLanguage }).then(api => api.setLanguage("bg")); - }); - - after(() => { - cy.wrap({ setLanguage }).then(api => api.setLanguage("en")); - }); - - it("input receives value in format pattern depending on the set language", () => { - cy.mount(); - - cy.get("[ui5-date-picker]") - .as("datePicker"); - - cy.get("@datePicker") - .should("have.value", "11 декември 2018 г.") - .and("have.attr", "value-state", "None"); - - const timestamp_11_Dec_2018 = 1544486400; - - cy.get("@datePicker") - .ui5DatePickerGetInnerInput() - .realClick() - .should("be.focused") - .realPress("F4"); - - cy.get("@datePicker") - .ui5DatePickerGetPopoverDate(timestamp_11_Dec_2018) - .should("have.class", "ui5-dp-item--selected"); - }); - - it("respect first day of the week - monday", () => { - cy.mount(); - - const timestamp_3_Feb_2019 = 1549152000; - const timestamp_28_Jan_2019 = 1548633600; - - cy.get("[ui5-date-picker]") - .as("datePicker") - .ui5DatePickerValueHelpIconPress(); - - cy.get("@datePicker") - .ui5DatePickerGetFirstDisplayedDate() - .should("have.attr", "data-sap-timestamp", timestamp_28_Jan_2019.toString()); - - cy.get("@datePicker") - .ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019) - .should("have.class", "ui5-dp-wday6"); - }); -}); From 77c1aa20b3760265987eade2375658489d109a43 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Tue, 14 Jul 2026 17:18:05 +0300 Subject: [PATCH 10/10] test --- packages/main/cypress/specs/DatePicker.cy.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx index cb107d06be99a..fff1dd52130bf 100644 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -5,6 +5,10 @@ import Label from "../../src/Label.js"; import { DATEPICKER_POPOVER_ACCESSIBLE_NAME } from "../../src/generated/i18n/i18n-defaults.js"; describe("Date Picker Tests", () => { + afterEach(() => { + cy.wrap({ setLanguage }).then(api => api.setLanguage("en")); + }); + it("input renders", () => { cy.mount(); @@ -58,11 +62,6 @@ describe("Date Picker Tests", () => { cy.get("@datePicker") .ui5DatePickerGetPopoverDate(timestamp_11_Dec_2018) .should("have.class", "ui5-dp-item--selected"); - - cy.wrap({ setLanguage }) - .then(api => { - return api.setLanguage("en"); - }); }); it("custom formatting", () => { @@ -342,11 +341,6 @@ describe("Date Picker Tests", () => { cy.get("@datePicker") .ui5DatePickerGetPopoverDate(timestamp_3_Feb_2019) .should("have.class", "ui5-dp-wday6"); - - cy.wrap({ setLanguage }) - .then(api => { - return api.setLanguage("en"); - }); }); it("if today is 30 jan, clicking next month does not skip feb", () => {