diff --git a/packages/main/cypress/specs/Calendar.cy.tsx b/packages/main/cypress/specs/Calendar.cy.tsx new file mode 100644 index 000000000000..eddf56f17d36 --- /dev/null +++ b/packages/main/cypress/specs/Calendar.cy.tsx @@ -0,0 +1,703 @@ +import Calendar from "../../src/Calendar.js"; +import CalendarDate from "../../src/CalendarDate.js"; +import CalendarDateRange from "../../src/CalendarDateRange.js"; +import SpecialCalendarDate from "../../src/SpecialCalendarDate.js"; +import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js"; +import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; + +const getDefaultCalendar = (date: Date) => { + const calDate = new Date(date); + const formattedDate = calDate.toLocaleDateString("default", { + year: "numeric", + month: "short", + day: "numeric", + }); + + return ( + + ); +}; + +const getCalendarsWithWeekNumbers = () => (<> + + + + + + + + + + + +); + +describe("Calendar general interaction", () => { + it("Focus goes into the current day item of the day picker", () => { + const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)); + cy.mount(getDefaultCalendar(date)); + + cy.ui5CalendarGetDay("#calendar1", "974851200") + .should("have.focus"); + + cy.focused().realPress("Tab"); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-month]") + .should("have.focus"); + + cy.focused().realPress("Tab"); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-year]") + .should("have.focus"); + + cy.focused().realPress(["Shift", "Tab"]); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-month]") + .should("have.focus"); + + cy.focused().realPress(["Shift", "Tab"]); + + cy.ui5CalendarGetDay("#calendar1", "974851200") + .should("have.focus"); + }); + + it("Calendar focuses the selected year when yearpicker is opened", () => { + const YEAR = 1997; + const date = Date.UTC(YEAR); + cy.mount(getDefaultCalendar(new Date(date))); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-year]") + .click(); + + cy.get("#calendar1") + .shadow() + .find("[ui5-yearpicker]") + .shadow() + .find("[tabindex='0']") + .invoke("attr", "data-sap-timestamp") + .then(_timestamp => { + const focusedYear = new Date(parseInt(_timestamp!) * 1000).getUTCFullYear(); + expect(focusedYear).to.equal(1997); + }); + }); + + it("Calendar focuses the selected month when monthpicker is opened with space", () => { + const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)); + cy.mount(getDefaultCalendar(date)); + + cy.ui5CalendarGetDay("#calendar1", "974851200") + .click(); + + cy.focused().realPress("Tab"); + cy.focused().realPress("Space"); + + cy.get("#calendar1") + .shadow() + .find("[ui5-monthpicker]") + .should("not.have.attr", "hidden"); + + cy.get("#calendar1") + .shadow() + .find("[ui5-monthpicker]") + .shadow() + .find("[tabindex='0']") + .invoke("attr", "data-sap-timestamp") + .then(_timestamp => { + const focusedMonth = new Date(parseInt(_timestamp!) * 1000).getUTCMonth(); + expect(focusedMonth).to.equal(10); + }); + }); + + it("Calendar focuses the selected year when yearpicker is opened with space", () => { + const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)); + cy.mount(getDefaultCalendar(date)); + + cy.ui5CalendarGetDay("#calendar1", "974851200") + .click(); + + cy.focused().realPress("Tab"); + cy.focused().realPress("Tab"); + cy.focused().realPress("Space"); + + cy.get("#calendar1") + .shadow() + .find("[ui5-yearpicker]") + .should("not.have.attr", "hidden"); + + cy.get("#calendar1") + .shadow() + .find("[ui5-yearpicker]") + .shadow() + .find("[tabindex='0']") + .invoke("attr", "data-sap-timestamp") + .then(_timestamp => { + const focusedYear = new Date(parseInt(_timestamp!) * 1000).getUTCFullYear(); + expect(focusedYear).to.equal(2000); + }); + }); + + it("Calendar doesn't mark year as selected when there are no selected dates", () => { + const todayDate = new Date(); + const todayTimestamp = Date.UTC(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate(), 0, 0, 0, 0) / 1000; + + cy.mount(); + + cy.get("#calendar2") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-year]") + .click(); + + cy.get("#calendar2") + .shadow() + .find("[ui5-yearpicker]") + .shadow() + .find(`[data-sap-timestamp=${todayTimestamp}]`) + .should("have.focus") + .should("not.have.class", "ui5-yp-item--selected"); + }); + + it("Calendar doesn't mark month as selected when there are no selected dates", () => { + const todayDate = new Date(); + const todayTimestamp = Date.UTC(todayDate.getFullYear(), todayDate.getMonth(), todayDate.getDate(), 0, 0, 0, 0) / 1000; + + cy.mount(); + + cy.get("#calendar2") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-month]") + .click(); + + cy.ui5CalendarGetMonth("#calendar2", todayTimestamp.toString()) + .should("have.focus") + .should("not.have.class", "ui5-mp-item--selected"); + }); + + it("Page up/down increments/decrements the month value", () => { + const date = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)); + cy.mount(getDefaultCalendar(date)); + + cy.get("#calendar1") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find("[tabindex='0']") + .click(); + + cy.focused().realPress("PageUp"); + + cy.get("#calendar1") + .invoke("prop", "timestamp") + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(2000, 9, 1, 0, 0, 0))); + }); + + cy.focused().realPress("PageDown"); + + cy.get("#calendar1") + .invoke("prop", "timestamp") + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(2000, 10, 1, 0, 0, 0))); + }); + }); + + it("Shift + Page up/down increments/decrements the year value by one", () => { + const date = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)); + cy.mount(getDefaultCalendar(date)); + + cy.get("#calendar1") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find("[tabindex='0']") + .click(); + + cy.focused().realPress(["Shift", "PageUp"]); + + cy.get("#calendar1") + .invoke("prop", "timestamp") + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(1999, 10, 1, 0, 0, 0))); + }); + + cy.focused().realPress(["Shift", "PageDown"]); + + cy.get("#calendar1") + .invoke("prop", "timestamp") + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(2000, 10, 1, 0, 0, 0))); + }); + }); + + it("Ctrl + Shift + Page up/down increments/decrements the year value by ten", () => { + const date = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)); + cy.mount(getDefaultCalendar(date)); + + cy.get("#calendar1") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find("[tabindex='0']") + .click(); + + cy.focused().realPress(["Control", "Shift", "PageUp"]); + + cy.get("#calendar1") + .invoke("prop", "timestamp") + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(1990, 10, 1, 0, 0, 0))); + }); + + cy.focused().realPress(["Control", "Shift", "PageDown"]); + + cy.get("#calendar1") + .invoke("prop", "timestamp") + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(2000, 10, 1, 0, 0, 0))); + }); + }); + + it("Page up/down increments/decrements the year value in the month picker", () => { + const date = new Date(Date.UTC(2000, 9, 1, 0, 0, 0)); + cy.mount(getDefaultCalendar(date)); + + cy.get("#calendar1") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find("[tabindex='0']") + .click(); + + cy.focused().realPress("F4"); + cy.focused().realPress("PageUp"); + + cy.get("#calendar1") + .invoke("prop", "timestamp") + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(1999, 9, 1, 0, 0, 0))); + }); + + cy.focused().realPress("PageDown"); + + cy.get("#calendar1") + .invoke("prop", "timestamp") + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(2000, 9, 1, 0, 0, 0))); + }); + }); + + it("Page up/down increments/decrements the year range in the year picker", () => { + const date = new Date(Date.UTC(2000, 9, 1, 0, 0, 0)); + cy.mount(getDefaultCalendar(date)); + + cy.get("#calendar1") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find("[tabindex='0']") + .click(); + + cy.focused().realPress(["Shift", "F4"]); + cy.focused().realPress("PageUp"); + + cy.get("#calendar1") + .invoke("prop", "timestamp") + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(1980, 9, 1, 0, 0, 0))); + }); + + cy.focused().realPress("PageDown"); + + cy.get("#calendar1") + .invoke("prop", "timestamp") + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(2000, 9, 1, 0, 0, 0))); + }); + }); + + it("Calendar with 'Multiple' selection type", () => { + cy.mount(); + const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; + + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + const timestamps = [971136000, 971222400, 971308800]; + + timestamps.forEach(_timestamp => { + cy.ui5CalendarGetDay("#calendar1", _timestamp.toString()) + .as("date"); + + cy.get("@date").click(); + cy.get("@date").should("have.class", "ui5-dp-item--selected"); + }); + + cy.get("#calendar1") + .invoke("prop", "selectedDates") + .then(selectedDates => { + expect(selectedDates.sort()).to.deep.equal(timestamps.sort()); + }); + }); + + it("Keyboard navigation works properly, when calendar selection type is set to 'Multiple'", () => { + cy.mount(); + + const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; + + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + cy.ui5CalendarGetDay("#calendar1", timestamp.toString()) + .focus(); + + // Select the focused date + cy.focused().realPress("Space"); + + // Deselect the focused date + cy.focused().realPress("Space"); + cy.focused().realPress("ArrowRight"); + + cy.ui5CalendarGetDay("#calendar1", "971222400") + .should("have.focus"); + }); + + it("Calendar with 'Range' selection type", () => { + cy.mount(); + const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; + + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + const timestamps = [971740800, 971827200, 971913600]; + + cy.ui5CalendarGetDay("#calendar1", timestamps[0].toString()) + .click(); + + cy.ui5CalendarGetDay("#calendar1", timestamps[2].toString()) + .click(); + + cy.ui5CalendarGetDay("#calendar1", timestamps[0].toString()) + .should("have.class", "ui5-dp-item--selected"); + + cy.ui5CalendarGetDay("#calendar1", timestamps[1].toString()) + .should("have.class", "ui5-dp-item--selected-between"); + + cy.ui5CalendarGetDay("#calendar1", timestamps[2].toString()) + .should("have.class", "ui5-dp-item--selected"); + + cy.get("#calendar1") + .invoke("prop", "selectedDates") + .then(selectedDates => { + expect(selectedDates.sort()).to.deep.equal([timestamps[0], timestamps[2]].sort()); + }); + }); + + it("Previous and next buttons are disabled when necessary", () => { + cy.mount(<> + + + + ); + const timestamp = 1594166400; + + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-prev]") + .should("have.class", "ui5-calheader-arrowbtn-disabled"); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-next]") + .should("not.have.class", "ui5-calheader-arrowbtn-disabled") + .click(); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-prev]") + .should("not.have.class", "ui5-calheader-arrowbtn-disabled"); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-next]") + .should("not.have.class", "ui5-calheader-arrowbtn-disabled"); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-next]") + .click(); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-next]") + .click(); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-prev]") + .should("not.have.class", "ui5-calheader-arrowbtn-disabled"); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-next]") + .should("have.class", "ui5-calheader-arrowbtn-disabled"); + }); + + it("Second month and year are rendered in the header", () => { + cy.mount(); + const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; + + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-month] > span") + .should("have.length", 2); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-year] > span") + .should("have.length", 2); + }); + + it("Buttons for month and year in header are rendered with correct value", () => { + cy.mount(); + const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; + + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-month]") + .find("span") + .should(spans => { + expect(spans[0].textContent).to.equal("Rajab"); + expect(spans[1].textContent).to.equal("Sep – Oct"); + }); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-year]") + .find("span") + .then(spans => { + expect(spans[0].textContent).to.equal("1421 AH"); + expect(spans[1].textContent).to.equal("2000"); + }); + }); + + it("Calendar render two type for Month when MonthPicker is opened", () => { + cy.mount(); + const timestamp = new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000; + + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-month]") + .click(); + + cy.get("#calendar1") + .shadow() + .find("[ui5-monthpicker]") + .shadow() + .find(".ui5-mp-item") + .first() + .find("span") + .should("have.length", 2) + .then(spans => { + expect(spans[0]).to.have.text("Muharram"); + expect(spans[1]).to.have.text("Apr – May"); + }); + }); + + it("Calendar render two type for Year when Year Picker is opened", () => { + cy.mount(); + const timestamp = new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000; + + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-year]") + .click(); + + cy.get("#calendar1") + .shadow() + .find("[ui5-yearpicker]") + .shadow() + .find(".ui5-yp-item") + .should("have.length", 8) + .first() + .find("span") + .should("have.length", 2) + .then(spans => { + expect(spans[0]).to.have.text("1416 AH"); + expect(spans[1]).to.have.text("1995 - 1996"); + }); + }); + + it("Min and max dates are set without format-pattern by using ISO (YYYY-MM-dd) format", () => { + const maxDate = new Date(Date.UTC(2024, 9, 4, 0, 0, 0)).toISOString().split("T")[0]; + cy.mount(); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-year]") + .click(); + + cy.get("#calendar1") + .shadow() + .find("[ui5-yearpicker]") + .shadow() + .find(".ui5-yp-root .ui5-yp-item") + .eq(11) // year 2025 + .should("have.class", "ui5-yp-item--disabled"); + }); + + it("Min and max dates are NOT set without format-pattern, because are not in ISO format (YYYY-MM-dd)", () => { + const maxDate = new Date(Date.UTC(2024, 9, 4, 0, 0, 0)).toString(); + cy.mount(); + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-year]") + .click(); + + cy.get("#calendar1") + .shadow() + .find("[ui5-yearpicker]") + .shadow() + .find(".ui5-yp-root .ui5-yp-item") + .eq(3) // year 2016 + .should("not.have.class", "ui5-yp-item--disabled"); + + cy.get("#calendar1") + .shadow() + .find("[ui5-yearpicker]") + .shadow() + .find(".ui5-yp-root .ui5-yp-item") + .eq(10) // year 2024 + .should("not.have.class", "ui5-yp-item--disabled"); + }); + + it("Focus goes into first selected day of the range selection", () => { + cy.mount( + + + ); + + const timestamp = new Date(Date.UTC(2021, 0, 20, 0, 0, 0)).valueOf() / 1000; // 1611100800 + + cy.get("#calendar1") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-month]") + .click(); + + cy.ui5CalendarGetMonth("#calendar1", timestamp.toString()) + .click(); + + cy.ui5CalendarGetDay("#calendar1", timestamp.toString()) + .should("have.focus"); + }); + + it("Special date respects format-pattern given to the calendar", () => { + cy.mount( + + + ); + + cy.get("#calendar1") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find(".ui5-dp-root") + .find("div[data-ui5-special-day]") + .should("have.length", 1); + }); + + it("Check calendar week numbers with specific CalendarWeekNumbering configuration", () => { + cy.mount(getCalendarsWithWeekNumbers()); + + // Check first week number in ISO_8601 calendar + cy.get("#calendar1") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find(".ui5-dp-weekname") + .first() + .should("have.text", "52"); + + // Check first week number in MiddleEastern calendar + cy.get("#calendar2") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find(".ui5-dp-weekname") + .first() + .should("have.text", "1"); + + // Check first week number in WesternTraditional calendar + cy.get("#calendar3") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find(".ui5-dp-weekname") + .first() + .should("have.text", "1"); + }); + + it("Check calendar week day names with specific CalendarWeekNumbering configuration", () => { + cy.mount(getCalendarsWithWeekNumbers()); + cy.get("#calendar1") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find(".ui5-dp-firstday") + .first() + .should("have.text", "Mon"); + + cy.get("#calendar2") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find(".ui5-dp-firstday") + .first() + .should("have.text", "Sat"); + + cy.get("#calendar3") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find(".ui5-dp-firstday") + .first() + .should("have.text", "Sun"); + }); +}); diff --git a/packages/main/cypress/support/commands.ts b/packages/main/cypress/support/commands.ts index 95ab78647721..26b37bf2ac51 100644 --- a/packages/main/cypress/support/commands.ts +++ b/packages/main/cypress/support/commands.ts @@ -37,9 +37,12 @@ // } import { internals, isPhone } from "@ui5/webcomponents-base/dist/Device.js"; -import "./commands/Menu.commands.js"; -import "./commands/ColorPicker.commands.js"; + +// Please keep this list in alphabetical order +import "./commands/Calendar.commands.js"; import "./commands/ColorPalette.commands.js"; +import "./commands/ColorPicker.commands.js"; +import "./commands/Menu.commands.js"; type SimulationDevices = "phone" @@ -52,6 +55,8 @@ declare global { ui5MenuItemClick(): Chainable ui5DOMRef(): Chainable ui5MenuItemPress(key: any): Chainable + ui5CalendarGetDay(calendarSelector: string, timestamp: string): Chainable> + ui5CalendarGetMonth(calendarSelector: string, timestamp: string): Chainable> ui5ColorPickerToggleColorMode(): Chainable ui5ColorPickerUpdateInput(name: string, value: string): Chainable ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable diff --git a/packages/main/cypress/support/commands/Calendar.commands.ts b/packages/main/cypress/support/commands/Calendar.commands.ts new file mode 100644 index 000000000000..4468dda6b9f2 --- /dev/null +++ b/packages/main/cypress/support/commands/Calendar.commands.ts @@ -0,0 +1,15 @@ +Cypress.Commands.add("ui5CalendarGetDay", (calendarSelector, timestamp) => { + return cy.get(calendarSelector) + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find(`div[data-sap-timestamp=${timestamp}]`); +}); + +Cypress.Commands.add("ui5CalendarGetMonth", (calendarSelector, timestamp) => { + return cy.get(calendarSelector) + .shadow() + .find("[ui5-monthpicker]") + .shadow() + .find(`div[data-sap-timestamp=${timestamp}]`); +}); diff --git a/packages/main/test/pages/Calendar.html b/packages/main/test/pages/Calendar.html index 3849394025ed..8186e3e64a9c 100644 --- a/packages/main/test/pages/Calendar.html +++ b/packages/main/test/pages/Calendar.html @@ -89,17 +89,17 @@
Calendar with CalendarWeekNumbering ISO_8601 - + Calendar with CalendarWeekNumbering MiddleEastern - + Calendar with CalendarWeekNumbering WesternTraditional - +
diff --git a/packages/main/test/specs/Calendar.spec.js b/packages/main/test/specs/Calendar.spec.js deleted file mode 100644 index 2c92fc248e61..000000000000 --- a/packages/main/test/specs/Calendar.spec.js +++ /dev/null @@ -1,471 +0,0 @@ -import { assert } from "chai"; - -describe("Calendar general interaction", () => { - before(async () => { - await browser.url(`test/pages/Calendar.html`); - }); - - it("Calendar is rendered", async () => { - const calendar = await browser.$("#calendar1").shadow$(".ui5-cal-root"); - - assert.ok(calendar, "Calendar is rendered"); - }); - - it("Year is set in the header", async () => { - const calendarHeader = await browser.$("#calendar1").shadow$(".ui5-calheader"); - const yearButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-year]`); - const headerText = parseInt(await yearButton.getText()); - const currentYear = new Date().getFullYear(); - - assert.equal(headerText, currentYear, "Year is set in the header"); - }); - - it("Month is set in the header", async () => { - const monthMap = new Map(); - ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"].forEach((month, index) => { - monthMap.set(index, month); - }); - - const calendarHeader = await browser.$("#calendar1").shadow$(".ui5-calheader"); - const monthButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-month]`); - const monthText = await monthButton.getText(); - const currentMonth = new Date().getMonth(); - - assert.strictEqual(monthText, monthMap.get(currentMonth), "Month is set in the header"); - }); - - it("Focus goes into the current day item of the day picker", async () => { - const toggleButton = await browser.$("#weekNumbersButton"); - const calendar = await browser.$("#calendar1"); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000); - const dayPicker = await calendar.shadow$("ui5-daypicker"); - const header = await calendar.shadow$(".ui5-calheader"); - const currentDayItem = await dayPicker.shadow$(`div[data-sap-timestamp="974851200"]`); - const monthButton = await header.shadow$(`[data-ui5-cal-header-btn-month]`); - const yearButton = await header.shadow$(`[data-ui5-cal-header-btn-year]`); - - await toggleButton.click(); - await toggleButton.click(); - - assert.ok(await currentDayItem.isFocusedDeep(), "Current calendar day item is focused"); - - await browser.keys("Tab"); - assert.ok(await monthButton.isFocusedDeep(), "Month picker button is focused"); - - await browser.keys("Tab"); - assert.ok(await yearButton.isFocusedDeep(), "Year picker button is focused"); - - await browser.keys(["Shift", "Tab"]); - assert.ok(await monthButton.isFocusedDeep(), "Month picker button is focused"); - - await browser.keys(["Shift", "Tab"]); - assert.ok(await currentDayItem.isFocusedDeep(), "Current calendar day item is focused"); - }); - - it("Calendar focuses the selected year when yearpicker is opened", async () => { - await browser.url(`test/pages/Calendar.html`); - const calendar = await browser.$("#calendar1"); - const yearPicker = await calendar.shadow$("ui5-yearpicker"); - const YEAR = 1997; - await calendar.setAttribute("timestamp", Date.UTC(YEAR) / 1000); - await calendar.shadow$(".ui5-calheader").shadow$(`div[data-ui5-cal-header-btn-year]`).click(); - const focusedItemTimestamp = await yearPicker.shadow$(`[tabindex="0"]`).getAttribute("data-sap-timestamp"); - const focusedYear = new Date(parseInt(focusedItemTimestamp) * 1000).getUTCFullYear(); - assert.strictEqual(focusedYear, 1997, "The focused year is 1997"); - }); - - it("Calendar focuses the selected month when monthpicker is opened with space", async () => { - await browser.url(`test/pages/Calendar.html`); - const calendar = await browser.$("#calendar1"); - const dayPicker = await calendar.shadow$("ui5-daypicker"); - const monthPicker = await calendar.shadow$("ui5-monthpicker"); - const currentDayItem = await dayPicker.shadow$(`div[data-sap-timestamp="974851200"]`); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000); - - await currentDayItem.click(); - await browser.keys("Tab"); - await browser.keys("Space"); - - const focusedItemTimestamp = await monthPicker.shadow$(`[tabindex="0"]`).getAttribute("data-sap-timestamp"); - const isHidden = await monthPicker.getAttribute("hidden"); - assert.notOk(isHidden, "The monthpicker is present"); - const focusedMonth = new Date(parseInt(focusedItemTimestamp) * 1000).getUTCMonth(); - assert.strictEqual(focusedMonth, 10, "The focused month is November"); - }); - - it("Calendar focuses the selected year when yearpicker is opened with space", async () => { - await browser.url(`test/pages/Calendar.html`); - const calendar = await browser.$("#calendar1"); - const dayPicker = await calendar.shadow$("ui5-daypicker"); - const yearPicker = await calendar.shadow$("ui5-yearpicker"); - const currentDayItem = await dayPicker.shadow$(`div[data-sap-timestamp="974851200"]`); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000); - - await currentDayItem.click(); - await browser.keys("Tab"); - await browser.keys("Tab"); - await browser.keys("Space"); - - const isHidden = await yearPicker.getAttribute("hidden"); - assert.notOk(isHidden, "The yearpicker is present"); - const focusedItemTimestamp = await yearPicker.shadow$(`[tabindex="0"]`).getAttribute("data-sap-timestamp"); - const focusedYear = new Date(parseInt(focusedItemTimestamp) * 1000).getUTCFullYear(); - assert.strictEqual(focusedYear, 2000, "The focused year is 2000"); - }); - - it("Calendar doesn't mark year as selected when there are no selected dates", async () => { - await browser.url(`test/pages/Calendar.html`); - const calendar = await browser.$("#calendar1"); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000); - await calendar.shadow$(".ui5-calheader").shadow$(`div[data-ui5-cal-header-btn-year]`).click(); - const focusedItem = await calendar.shadow$("ui5-yearpicker").shadow$(`[data-sap-timestamp="973036800"]`); - - assert.ok(await focusedItem.isFocusedDeep(), "Current year element is the active element"); - assert.notOk(await focusedItem.hasClass("ui5-yp-item--selected"), "Current year is not selected"); - }); - - it("Calendar doesn't mark month as selected when there are no selected dates", async () => { - await browser.url(`test/pages/Calendar.html`); - const calendar = await browser.$("#calendar1"); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000); - await calendar.shadow$(".ui5-calheader").shadow$(`div[data-ui5-cal-header-btn-month]`).click(); - const focusedItem = await calendar.shadow$("ui5-monthpicker").shadow$(`[data-sap-timestamp="973036800"]`); - - assert.ok(await focusedItem.isFocusedDeep(), "Current month element is the active element"); - assert.notOk(await focusedItem.hasClass("ui5-mp-item--selected"), "Current month is not selected"); - }); - - it("Page up/down increments/decrements the month value", async () => { - await browser.url(`test/pages/Calendar.html`); - const calendar = await browser.$("#calendar1"); - - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000); - - await calendar.shadow$("ui5-daypicker").shadow$(`[tabindex="0"]`).click(); - await browser.keys('PageUp'); - - assert.deepEqual(new Date(await calendar.getProperty("timestamp") * 1000), new Date(Date.UTC(2000, 9, 1, 0, 0, 0))); - - await browser.keys('PageDown'); - - assert.deepEqual(new Date(await calendar.getProperty("timestamp") * 1000), new Date(Date.UTC(2000, 10, 1, 0, 0, 0))); - }); - - it("Shift + Page up/down increments/decrements the year value by one", async () => { - const calendar = await browser.$("#calendar1"); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000); - - await calendar.shadow$("ui5-daypicker").shadow$(`[tabindex="0"]`).click(); - await browser.keys(['Shift', 'PageUp']); - - assert.deepEqual(new Date(await calendar.getProperty("timestamp") * 1000), new Date(Date.UTC(1999, 10, 1, 0, 0, 0))); - - await browser.keys(['Shift', 'PageDown']); - - assert.deepEqual(new Date(await calendar.getProperty("timestamp") * 1000), new Date(Date.UTC(2000, 10, 1, 0, 0, 0))); - }); - - it("Ctrl + Shift + Page up/down increments/decrements the year value by ten", async () => { - const calendar = await browser.$("#calendar1"); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000); - - await calendar.shadow$("ui5-daypicker").shadow$(`[tabindex="0"]`).click(); - await browser.keys(['Control', 'Shift', 'PageUp']); - - assert.deepEqual(new Date(await calendar.getProperty("timestamp") * 1000), new Date(Date.UTC(1990, 10, 1, 0, 0, 0))); - - await browser.keys(['Control', 'Shift', 'PageDown']); - - assert.deepEqual(new Date(await calendar.getProperty("timestamp") * 1000), new Date(Date.UTC(2000, 10, 1, 0, 0, 0))); - }); - - it("Page up/down increments/decrements the year value in the month picker", async () => { - const calendar = await browser.$("#calendar1"); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 9, 1, 0, 0, 0)).valueOf() / 1000); - - await calendar.shadow$("ui5-daypicker").shadow$(`[tabindex="0"]`).click(); - await browser.keys(["F4"]); - await browser.keys('PageUp'); - - assert.deepEqual(new Date(await calendar.getProperty("timestamp") * 1000), new Date(Date.UTC(1999, 9, 1, 0, 0, 0))); - - await browser.keys('PageDown'); - - assert.deepEqual(new Date(await calendar.getProperty("timestamp") * 1000), new Date(Date.UTC(2000, 9, 1, 0, 0, 0))); - }); - - it("Page up/down increments/decrements the year range in the year picker", async () => { - await browser.url(`test/pages/Calendar.html`); - const calendar = await browser.$("#calendar1"); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 9, 1, 0, 0, 0)).valueOf() / 1000); - - await calendar.shadow$("ui5-daypicker").shadow$(`[tabindex="0"]`).click(); - await browser.keys(['Shift', 'F4']); - await browser.keys('PageUp'); - - assert.deepEqual(new Date(await calendar.getProperty("timestamp") * 1000), new Date(Date.UTC(1980, 9, 1, 0, 0, 0))); - - await browser.keys('PageDown'); - - assert.deepEqual(new Date(await calendar.getProperty("timestamp") * 1000), new Date(Date.UTC(2000, 9, 1, 0, 0, 0))); - }); - - it("When month picker is shown the month button is hidden", async () => { - await browser.url(`test/pages/Calendar.html`); - const calendar = await browser.$("#calendar1"); - const calendarHeader = await calendar.shadow$(".ui5-calheader"); - - await calendar.shadow$("ui5-daypicker").shadow$(`[tabindex="0"]`).click(); - await browser.keys(["F4"]); - await browser.keys('PageUp'); - - assert.ok(await calendarHeader.shadow$("[data-ui5-cal-header-btn-month]").getAttribute("hidden"), "The button for month is hidden"); - await browser.keys("Space"); - }); - - it("Calendar with 'Multiple' selection type", async () => { - await browser.url(`test/pages/Calendar.html`); - const calendar = await browser.$("#calendar1"); - await calendar.setAttribute("selection-mode", "Multiple"); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000); - - const dates = [ - await calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971136000"]`), - await calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971222400"]`), - await calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971308800"]`), - ]; - - await Promise.all(dates.map(async date => { - await date.click(); - assert.ok(await date.hasClass("ui5-dp-item--selected"), `${await date.getAttribute("data-sap-timestamp")} is selected`); - })); - - const selectedDates = await calendar.getProperty("selectedDates"); - const expectedDates = [971136000, 971222400, 971308800]; - - assert.deepEqual(selectedDates.sort(), expectedDates.sort(), "Change event is fired with proper data"); - }); - - it("Keyboard navigation works properly, when calendar selection type is set to 'Multiple'", async () => { - await browser.url(`test/pages/Calendar.html`); - const toggleButton = await browser.$("#weekNumbersButton"); - const calendar = await browser.$("#calendar1"); - await calendar.setAttribute("selection-mode", "Multiple"); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000); - - await toggleButton.click(); - await toggleButton.click(); - await browser.keys("Tab"); - // Select the focused date - await browser.keys("Space"); - - // Deselect the focused date - await browser.keys("Space"); - await browser.keys("ArrowRight"); - - assert.ok(await calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971222400"]`).isFocusedDeep(), "Focus is properly set"); - }); - - it("Calendar with 'Range' selection type", async () => { - await browser.url(`test/pages/Calendar.html`); - const calendar = await browser.$("#calendar1"); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000); - await calendar.setAttribute("selection-mode", "Range"); - - const dates = [ - await calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971740800"]`), - await calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971827200"]`), - await calendar.shadow$("ui5-daypicker").shadow$(`[data-sap-timestamp="971913600"]`), - ]; - - await dates[0].click(); - await dates[2].click(); - - assert.ok(await dates[0].hasClass("ui5-dp-item--selected"), `${await dates[0].getAttribute("data-sap-timestamp")} is selected`); - assert.ok(await dates[1].hasClass("ui5-dp-item--selected-between"), `${await dates[1].getAttribute("data-sap-timestamp")} is selected between`); - assert.ok(await dates[2].hasClass("ui5-dp-item--selected"), `${await dates[2].getAttribute("data-sap-timestamp")} is selected`); - - const selectedDates = await calendar.getProperty("selectedDates"); - const expectedDates = [971740800, 971913600]; - - assert.deepEqual(selectedDates.sort(), expectedDates.sort(), "Change event is fired with proper data"); - }); - - it("Previous and next buttons are disabled when necessary", async () => { - await browser.url(`test/pages/Calendar.html`); - const calendarHeader = await browser.$("#calendar4").shadow$(".ui5-calheader"); - const prevButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-prev]`); - const nextButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-next]`); - - assert.ok(await prevButton.hasClass("ui5-calheader-arrowbtn-disabled"), "Previous Button is disabled"); - assert.notOk(await nextButton.hasClass("ui5-calheader-arrowbtn-disabled"), "Next Button is enabled"); - - await nextButton.click(); - - assert.notOk(await prevButton.hasClass("ui5-calheader-arrowbtn-disabled"), "Previous Button is enabled"); - assert.notOk(await nextButton.hasClass("ui5-calheader-arrowbtn-disabled"), "Next Button is enabled"); - - await nextButton.click(); - await nextButton.click(); - - assert.notOk(await prevButton.hasClass("ui5-calheader-arrowbtn-disabled"), "Previous Button is enabled"); - assert.ok(await nextButton.hasClass("ui5-calheader-arrowbtn-disabled"), "Next Button is disabled"); - }); - - it("Second month and year are rendered in the header", async () => { - const calendar = await browser.$("#calendar5"); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000); - const calendarHeader = await browser.$("#calendar5").shadow$(".ui5-calheader"); - const monthButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-month]`).$$('span'); - const yearButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-year]`).$$('span'); - - assert.strictEqual(monthButton.length, 2, "Second month is rendered"); - assert.strictEqual(yearButton.length, 2,"Second year is rendered"); - }); - - it("Buttons for month and year in header are rendered with correct value", async () => { - const calendarHeader = await browser.$("#calendar5").shadow$(".ui5-calheader"); - const monthButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-month]`).$$('span'); - const yearButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-year]`).$$('span'); - - assert.strictEqual(await monthButton[0].getText(), "Rajab", "first month set in the header"); - assert.strictEqual(await monthButton[1].getText(), "Sep – Oct", "Second month set in the header"); - - assert.strictEqual(await yearButton[0].getText(), "1421 AH", "first year set in the header"); - assert.strictEqual(await yearButton[1].getText(), "2000", "Second year set in the header"); - }); - - it("Calendar render two type for Month when MonthPicker is opened", async () => { - await browser.url(`test/pages/Calendar.html`); - const calendar = await browser.$("#calendar5"); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000); - await calendar.shadow$(".ui5-calheader").shadow$(`div[data-ui5-cal-header-btn-month]`).click(); - const months = await calendar.shadow$("ui5-monthpicker").shadow$$(`.ui5-mp-item`); - const montInfo = await months[0].$$('span'); - - assert.strictEqual(await montInfo.length, 2, "Month is rendered with two text") - assert.strictEqual(await montInfo[0].getText(), "Muharram", "First text of month set in the button") - assert.strictEqual(await montInfo[1].getText(), "Apr – May", "Second text of month set in the button") - }); - - it("Calendar render two type for Year when YaerPicker is opened", async () => { - await browser.url(`test/pages/Calendar.html`); - const calendar = await browser.$("#calendar5"); - await calendar.setAttribute("timestamp", new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000); - await calendar.shadow$(".ui5-calheader").shadow$(`div[data-ui5-cal-header-btn-year]`).click(); - const years = await calendar.shadow$("ui5-yearpicker").shadow$$(`.ui5-yp-item`); - const yaerInfo = await years[0].$$("span"); - - assert.strictEqual(await years.length, 8, "YearPicker with two types only renders 8 years") - assert.strictEqual(await yaerInfo[0].getText(), "1416 AH", "First text of year set in the button") - assert.strictEqual(await yaerInfo[1].getText(), "1995 - 1996", "Second text of year set in the button") - }); - - it("Min and max dates are set without format-pattern by using ISO (YYYY-MM-dd) format", async () => { - await browser.url(`test/pages/Calendar.html`); - - const calendar = await browser.$("#calendar1"); - await calendar.setAttribute("max-date", new Date(Date.UTC(2024, 9, 4, 0, 0, 0)).toISOString().split("T")[0]); // sets the max date to 2024-10-04 - - const yearButton = await calendar.shadow$(".ui5-calheader").shadow$(`div[data-ui5-cal-header-btn-year]`); - await yearButton.click(); - - const year2025 = await calendar.shadow$(`ui5-yearpicker`).shadow$(`.ui5-yp-root`).$$(".ui5-yp-item")[11]; - - assert.strictEqual(await year2025.hasClass("ui5-yp-item--disabled"), true, "Year 2025 is disabled"); - }); - - it("Min and max dates are NOT set without format-pattern, because are not in ISO format (YYYY-MM-dd)", async () => { - await browser.url("test/pages/Calendar.html"); - - const calendar = await browser.$("#calendar1"); - const yearButton = await calendar.shadow$(".ui5-calheader").shadow$(`div[data-ui5-cal-header-btn-year]`); - // setting the min and max dates both to a valid format date, but not in the valid ISO format. - await calendar.setAttribute("max-date", `${new Date(Date.UTC(2024, 9, 4, 0, 0, 0))}`); - await calendar.setAttribute("min-date", "25.10.2018"); - console.log(await calendar.getAttribute("max-date")); - - await yearButton.click(); - const year2016 = await calendar.shadow$(`ui5-yearpicker`).shadow$(`.ui5-yp-root`).$$(".ui5-yp-item")[3]; - - assert.strictEqual(await year2016.hasClass("ui5-yp-item--disabled"), false, "Year 2016 is not disabled"); - - const year2024 = await calendar.shadow$(`ui5-yearpicker`).shadow$(`.ui5-yp-root`).$$(".ui5-yp-item")[10]; - - assert.strictEqual(await year2024.hasClass("ui5-yp-item--disabled"), false, "Year 2024 is not disabled"); - }); - - it("Apply secondaryCalendar class when primary and secondary calendar types are different", async () => { - await browser.url("test/pages/Calendar.html"); - - const calendar = await browser.$("#calendar5"); - const dayPickerRoot = await calendar.shadow$("ui5-daypicker").shadow$(".ui5-dp-root"); - - assert.strictEqual(await dayPickerRoot.hasClass("ui5-dp-twocalendartypes"), true, "Secondary Calendar class is applied correctly"); - }); - - it("Apply secondaryCalendar class when primary and secondary calendar types are the same", async () => { - await browser.url("test/pages/Calendar.html"); - - const calendar = await browser.$("#calendar7"); - const dayPickerRoot = await calendar.shadow$("ui5-daypicker").shadow$(".ui5-dp-root"); - - assert.strictEqual(await dayPickerRoot.hasClass("ui5-dp-twocalendartypes"), false, "Secondary Calendar class is applied correctly"); - }); - - it("Focus goes into first selected day of the range selection", async () => { - await browser.url(`test/pages/Calendar.html`); - - const calendar = await browser.$("#calendar7"); - const calendarHeader = await browser.$("#calendar7").shadow$(".ui5-calheader"); - const dayPicker = await calendar.shadow$("ui5-daypicker"); - const monthButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-month]`); - monthButton.click(); - const januaryCell = await calendar.shadow$("ui5-monthpicker").shadow$(`[data-sap-timestamp="1611100800"]`); - januaryCell.click(); - const currentDayItem = await dayPicker.shadow$(`div[data-sap-timestamp="1611100800"]`); - - assert.ok(await currentDayItem.isFocusedDeep(), "Current calendar day item is focused"); - }); - - it("Special date respects format-pattern given to the calendar", async () => { - const calendar = await browser.$("#calendar3"); - const dayPickerRoot = await calendar.shadow$("ui5-daypicker").shadow$(".ui5-dp-root"); - - const specialDate = await dayPickerRoot.$$(`div[data-ui5-special-day]`); - - assert.strictEqual(specialDate.length, 1, "Special date is rendered"); - }); - - it("Calendar header buttons visibility", async () => { - const calendarHeader = await browser.$("#calendar1").shadow$(".ui5-calheader"); - const monthButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-month]`); - const yearButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-year]`); - - await monthButton.click(); - assert.ok(monthButton.hasAttribute("hidden"), "The month button is hidden"); - - await yearButton.click(); - assert.ok(yearButton.hasAttribute("hidden"), "The year button is hidden"); - }); - - it("Check calendar week numbers with specific CalendarWeekNumbering configuration", async () => { - const calendarIsoFirstWeekNumber = await browser.$("#calendar8").shadow$("[ui5-daypicker]").shadow$(".ui5-dp-weekname"); - const calendarHeaderMiddleEasternFirstWeekNumber = await browser.$("#calendar9").shadow$("[ui5-daypicker]").shadow$(".ui5-dp-weekname"); - const calendarHeaderWesternTraditionalFirstWeekNumber = await browser.$("#calendar10").shadow$("[ui5-daypicker]").shadow$(".ui5-dp-weekname"); - - assert.strictEqual(await calendarIsoFirstWeekNumber.getText(), "52", "first week in ISO_8601 is correct"); - assert.strictEqual(await calendarHeaderMiddleEasternFirstWeekNumber.getText(), "1", "first week in MiddleEastern is correct"); - assert.strictEqual(await calendarHeaderWesternTraditionalFirstWeekNumber.getText(), "1", "first week in WesternTraditional is correct"); - }); - - it("Check calendar week day names with specific CalendarWeekNumbering configuration", async () => { - const calendarIsoFirstWeekDayName = await browser.$("#calendar8").shadow$("[ui5-daypicker]").shadow$(".ui5-dp-firstday"); - const calendarHeaderMiddleEasternFirstWeekDayName = await browser.$("#calendar9").shadow$("[ui5-daypicker]").shadow$(".ui5-dp-firstday"); - const calendarHeaderWesternTraditionalFirstWeekDayName = await browser.$("#calendar10").shadow$("[ui5-daypicker]").shadow$(".ui5-dp-firstday"); - - assert.strictEqual(await calendarIsoFirstWeekDayName.getText(), "Mon", "first week in ISO_8601 is correct"); - assert.strictEqual(await calendarHeaderMiddleEasternFirstWeekDayName.getText(), "Sat", "first week in MiddleEastern is correct"); - assert.strictEqual(await calendarHeaderWesternTraditionalFirstWeekDayName.getText(), "Sun", "first week in WesternTraditional is correct"); - }); -});