From d7496773658b26f99f5a2e70bde903a5085b5cc7 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Tue, 28 Jan 2025 11:19:36 +0200 Subject: [PATCH 1/9] chore(ui5-calendar): migrate tests to cypress --- packages/main/cypress/specs/Calendar.cy.ts | 837 +++++++++++++++++++++ packages/main/test/pages/Calendar.html | 6 +- packages/main/test/specs/Calendar.spec.js | 471 ------------ 3 files changed, 840 insertions(+), 474 deletions(-) create mode 100644 packages/main/cypress/specs/Calendar.cy.ts delete mode 100644 packages/main/test/specs/Calendar.spec.js diff --git a/packages/main/cypress/specs/Calendar.cy.ts b/packages/main/cypress/specs/Calendar.cy.ts new file mode 100644 index 000000000000..9045ed733ec7 --- /dev/null +++ b/packages/main/cypress/specs/Calendar.cy.ts @@ -0,0 +1,837 @@ +import { html } from "lit"; +import type Calendar from "../../src/Calendar.js"; +import type ToggleButton from "../../src/ToggleButton.js"; +import "../../src/ToggleButton.js"; +import "../../src/Calendar.js"; +import "../../src/Button.js"; +import "../../src/CalendarDate.js"; +import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js" +import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js" + +describe("Calendar general interaction", () => { + beforeEach(() => { + cy.mount(html``); + }); + + it("Calendar is rendered", () => { + cy.get("ui5-calendar") + .shadow() + .find(".ui5-cal-root") + .should("exist"); + }); + + it("Focus goes into the current day item of the day picker", () => { + cy.mount(html` + hide + + `); + + cy.window().then((win) => { + const toggleButton = win.document.getElementById("weekNumbersButton") as ToggleButton; + const calendar = win.document.getElementById("calendar1") as Calendar; + + toggleButton!.addEventListener("click", (event: Event) => { + const button = event.target as ToggleButton; + + calendar.hideWeekNumbers = button.pressed ? true : false; + toggleButton.innerHTML = button.pressed ? "show" : "hide"; + }); + }); + + const timestamp = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + cy.get("#weekNumbersButton").click(); + + cy.get("#calendar1") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(`div[data-sap-timestamp=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.get("#calendar1") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(`div[data-sap-timestamp=974851200]`) + .should("have.focus"); + }); + + it("Calendar focuses the selected year when yearpicker is opened", () => { + const YEAR = 1997; + const timestamp = Date.UTC(YEAR) / 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("[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 timestamp = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar1") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(`div[data-sap-timestamp=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 timestamp = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar1") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(`div[data-sap-timestamp=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 timestamp = new Date(Date.UTC(2000, 10, 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(`[data-sap-timestamp=973036800]`) + .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 timestamp = new Date(Date.UTC(2000, 10, 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(`[data-sap-timestamp=973036800]`) + .should("have.focus") + .should("not.have.class", "ui5-mp-item--selected"); + }); + + it("Page up/down increments/decrements the month value", () => { + const timestamp = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar1") + .shadow() + .find("ui5-daypicker") + .shadow() + .find("[tabindex='0']") + .click(); + + cy.wait(300); // time to process the focus change + 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 timestamp = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + 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 timestamp = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + 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 timestamp = new Date(Date.UTC(2000, 9, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + 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 timestamp = new Date(Date.UTC(2000, 9, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar1") + .shadow() + .find("ui5-daypicker") + .shadow() + .find("[tabindex='0']") + .click(); + + cy.wait(300); + 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", () => { + const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp) + .invoke("prop", "selectionMode", "Multiple"); + + const timestamps = [971136000, 971222400, 971308800]; + + timestamps.forEach(timestamp => { + cy.get("#calendar1") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(`[data-sap-timestamp=${timestamp}]`) + .first() + .click() + .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(html` + hide + + `); + + const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar3").invoke("prop", "timestamp", timestamp) + .invoke("prop", "selectionMode", "Multiple"); + + cy.get("#weekNumbersButton").click(); + cy.get("#weekNumbersButton").click(); + + cy.get("#calendar3") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(`[data-sap-timestamp=${timestamp}]`) + .first() + .focus(); + + // Select the focused date + cy.focused().realPress("Space"); + + // Deselect the focused date + cy.focused().realPress("Space"); + cy.focused().realPress("ArrowRight"); + + cy.get("#calendar3") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(`[data-sap-timestamp=971222400]`) + .should("have.focus"); + }); + + it("Calendar with 'Range' selection type", () => { + const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1") + .invoke("prop", "timestamp", timestamp) + .invoke("prop", "selectionMode", "Range"); + + const timestamps = [971740800, 971827200, 971913600]; + + cy.get("#calendar1") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(`[data-sap-timestamp=${timestamps[0]}]`) + .first() + .click(); + + cy.get("#calendar1") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(`[data-sap-timestamp=${timestamps[2]}]`) + .first() + .click(); + + cy.get("#calendar1") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(`[data-sap-timestamp=${timestamps[0]}]`) + .should("have.class", "ui5-dp-item--selected"); + + cy.get("#calendar1") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(`[data-sap-timestamp=${timestamps[1]}]`) + .should("have.class", "ui5-dp-item--selected-between"); + + cy.get("#calendar1") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(`[data-sap-timestamp=${timestamps[2]}]`) + .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(html` + + + + `); + + cy.get("#calendar4").invoke("prop", "timestamp", 1594166400) + .invoke("prop", "minDate", "7/7/2020") + .invoke("prop", "maxDate", "20/10/2020") + .invoke("prop", "formatPattern", "dd/MM/yyyy") + + cy.get("#calendar4") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-prev]") + .should("have.class", "ui5-calheader-arrowbtn-disabled"); + + cy.get("#calendar4") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-next]") + .should("not.have.class", "ui5-calheader-arrowbtn-disabled") + .click(); + + cy.get("#calendar4") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-prev]") + .should("not.have.class", "ui5-calheader-arrowbtn-disabled"); + + cy.get("#calendar4") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-next]") + .should("not.have.class", "ui5-calheader-arrowbtn-disabled") + .click() + .click(); + + cy.get("#calendar4") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-prev]") + .should("not.have.class", "ui5-calheader-arrowbtn-disabled"); + + cy.get("#calendar4") + .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", () => { + const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; + cy.mount(html``); + cy.get("#calendar5").invoke("prop", "timestamp", timestamp) + .invoke("prop", "primaryCalendarType", "Islamic") + .invoke("prop", "secondaryCalendarType", "Gregorian"); + + cy.get("#calendar5") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-month] > span") + .should("have.length", 2); + + cy.get("#calendar5") + .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", () => { + const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; + cy.mount(html``); + cy.get("#calendar5") + .invoke("prop", "timestamp", timestamp) + .invoke("prop", "primaryCalendarType", "Islamic") + .invoke("prop", "secondaryCalendarType", "Gregorian"); + + cy.wait(300); + cy.get("#calendar5") + .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.wait(300); + cy.get("#calendar5") + .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(html``); + + const timestamp = new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar5").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar5") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-month]") + .click(); + + cy.get("#calendar5") + .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(html``); + + const timestamp = new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar5").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar5") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-year]") + .click(); + + cy.get("#calendar5") + .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", () => { + cy.get("#calendar1") + .invoke("prop", "maxDate", new Date(Date.UTC(2024, 9, 4, 0, 0, 0)).toISOString().split("T")[0]); // sets the max date to 2024-10-04 + + 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)", () => { + cy.get("#calendar1") + .invoke("prop", "maxDate", `${new Date(Date.UTC(2024, 9, 4, 0, 0, 0))}`) + .invoke("prop", "minDate", "25.10.2018"); + + 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(html` + + + `); + + cy.get("#calendar7") + .invoke("prop", "primaryCalendarType", "Gregorian") + .invoke("prop", "secondaryCalendarType", "Gregorian") + .invoke("prop", "selectionMode", "Range"); + + cy.get("[ui5-date-range]") + .invoke("prop", "startValue", "Jan 20, 2021") + .invoke("prop", "endValue", "Jan 30, 2021"); + + const timestamp = new Date(Date.UTC(2021, 0, 20, 0, 0, 0)).valueOf() / 1000; // 1611100800 + + cy.get("#calendar7") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-month]") + .click(); + + cy.get("#calendar7") + .shadow() + .find("ui5-monthpicker") + .shadow() + .find(`[data-sap-timestamp=${timestamp}]`) + .click(); + + cy.get("#calendar7") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(`div[data-sap-timestamp=${timestamp}]`) + .should("have.focus"); + }); + + it("Special date respects format-pattern given to the calendar", () => { + cy.mount(html` + + + `); + + cy.get("#calendar3") + .invoke("prop", "formatPattern", "ddMMyyyy") + .invoke("prop", "minDate", "01072020") + .invoke("prop", "maxDate", "21102020"); + + cy.get("[ui5-special-date]") + .invoke("prop", "type", "Type01") + .invoke("prop", "value", "07102020"); + + cy.get("#calendar3") + .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(html` + + + + + + + + + + + + `); + + cy.get("#calendar8") + .invoke("prop", "calendarWeekNumbering", "ISO_8601"); + + cy.get("#calendar9") + .invoke("prop", "calendarWeekNumbering", "MiddleEastern"); + + cy.get("#calendar10") + .invoke("prop", "calendarWeekNumbering", "WesternTraditional"); + + cy.get("[ui5-date]") + .invoke("prop", "value", "Jan 1, 2023"); + + // Check first week number in ISO_8601 calendar + cy.get("#calendar8") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(".ui5-dp-weekname") + .first() + .should("have.text", "52"); + + // Check first week number in MiddleEastern calendar + cy.get("#calendar9") + .shadow() + .find("ui5-daypicker") + .shadow() + .find(".ui5-dp-weekname") + .first() + .should("have.text", "1"); + + // Check first week number in WesternTraditional calendar + cy.get("#calendar10") + .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(html` + + + + + + + + + + + + `); + + cy.get("#calendar8") + .invoke("prop", "calendarWeekNumbering", "ISO_8601"); + + cy.get("#calendar9") + .invoke("prop", "calendarWeekNumbering", "MiddleEastern"); + + cy.get("#calendar10") + .invoke("prop", "calendarWeekNumbering", "WesternTraditional"); + + + cy.get("[ui5-date]") + .invoke("prop", "value", "Jan 1, 2023"); + + cy.get("#calendar8") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find(".ui5-dp-firstday") + .first() + .should("have.text", "Mon"); + + cy.get("#calendar9") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find(".ui5-dp-firstday") + .first() + .should("have.text", "Sat"); + + cy.get("#calendar10") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find(".ui5-dp-firstday") + .first() + .should("have.text", "Sun"); + }); +}); 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"); - }); -}); From afc96309474e0b08b98b5b55d9d4602046e437fe Mon Sep 17 00:00:00 2001 From: hinzzx Date: Tue, 28 Jan 2025 11:44:37 +0200 Subject: [PATCH 2/9] chore: fix lint errors --- packages/main/cypress/specs/Calendar.cy.ts | 131 +++++++++++---------- 1 file changed, 69 insertions(+), 62 deletions(-) diff --git a/packages/main/cypress/specs/Calendar.cy.ts b/packages/main/cypress/specs/Calendar.cy.ts index 9045ed733ec7..541f74ced31c 100644 --- a/packages/main/cypress/specs/Calendar.cy.ts +++ b/packages/main/cypress/specs/Calendar.cy.ts @@ -5,8 +5,8 @@ import "../../src/ToggleButton.js"; import "../../src/Calendar.js"; import "../../src/Button.js"; import "../../src/CalendarDate.js"; -import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js" -import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js" +import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js"; +import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; describe("Calendar general interaction", () => { beforeEach(() => { @@ -26,14 +26,14 @@ describe("Calendar general interaction", () => { `); - cy.window().then((win) => { + cy.window().then(win => { const toggleButton = win.document.getElementById("weekNumbersButton") as ToggleButton; const calendar = win.document.getElementById("calendar1") as Calendar; - - toggleButton!.addEventListener("click", (event: Event) => { + + toggleButton.addEventListener("click", (event: Event) => { const button = event.target as ToggleButton; - calendar.hideWeekNumbers = button.pressed ? true : false; + calendar.hideWeekNumbers = button.pressed; toggleButton.innerHTML = button.pressed ? "show" : "hide"; }); }); @@ -98,8 +98,8 @@ describe("Calendar general interaction", () => { .shadow() .find("[tabindex='0']") .invoke("attr", "data-sap-timestamp") - .then(timestamp => { - const focusedYear = new Date(parseInt(timestamp!) * 1000).getUTCFullYear(); + .then(_timestamp => { + const focusedYear = new Date(parseInt(_timestamp!) * 1000).getUTCFullYear(); expect(focusedYear).to.equal(1997); }); }); @@ -129,8 +129,8 @@ describe("Calendar general interaction", () => { .shadow() .find("[tabindex='0']") .invoke("attr", "data-sap-timestamp") - .then(timestamp => { - const focusedMonth = new Date(parseInt(timestamp!) * 1000).getUTCMonth(); + .then(_timestamp => { + const focusedMonth = new Date(parseInt(_timestamp!) * 1000).getUTCMonth(); expect(focusedMonth).to.equal(10); }); }); @@ -161,8 +161,8 @@ describe("Calendar general interaction", () => { .shadow() .find("[tabindex='0']") .invoke("attr", "data-sap-timestamp") - .then(timestamp => { - const focusedYear = new Date(parseInt(timestamp!) * 1000).getUTCFullYear(); + .then(_timestamp => { + const focusedYear = new Date(parseInt(_timestamp!) * 1000).getUTCFullYear(); expect(focusedYear).to.equal(2000); }); }); @@ -215,22 +215,21 @@ describe("Calendar general interaction", () => { .shadow() .find("[tabindex='0']") .click(); - - cy.wait(300); // time to process the focus change + 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))); + .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))); + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(2000, 10, 1, 0, 0, 0))); }); }); @@ -244,21 +243,21 @@ describe("Calendar general interaction", () => { .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))); + .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))); + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(2000, 10, 1, 0, 0, 0))); }); }); @@ -272,21 +271,21 @@ describe("Calendar general interaction", () => { .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))); + .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))); + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(2000, 10, 1, 0, 0, 0))); }); }); @@ -306,16 +305,16 @@ describe("Calendar general interaction", () => { 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))); + .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))); + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(2000, 9, 1, 0, 0, 0))); }); }); @@ -330,22 +329,21 @@ describe("Calendar general interaction", () => { .find("[tabindex='0']") .click(); - cy.wait(300); 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))); + .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))); + .then(_timestamp => { + expect(new Date(_timestamp * 1000)).to.deep.equal(new Date(Date.UTC(2000, 9, 1, 0, 0, 0))); }); }); @@ -356,15 +354,17 @@ describe("Calendar general interaction", () => { const timestamps = [971136000, 971222400, 971308800]; - timestamps.forEach(timestamp => { + timestamps.forEach(_timestamp => { cy.get("#calendar1") .shadow() .find("ui5-daypicker") .shadow() - .find(`[data-sap-timestamp=${timestamp}]`) + .find(`[data-sap-timestamp=${_timestamp}]`) .first() - .click() - .should("have.class", "ui5-dp-item--selected"); + .as("date"); + + cy.get("@date").click(); + cy.get("@date").should("have.class", "ui5-dp-item--selected"); }); cy.get("#calendar1") @@ -472,8 +472,8 @@ describe("Calendar general interaction", () => { cy.get("#calendar4").invoke("prop", "timestamp", 1594166400) .invoke("prop", "minDate", "7/7/2020") .invoke("prop", "maxDate", "20/10/2020") - .invoke("prop", "formatPattern", "dd/MM/yyyy") - + .invoke("prop", "formatPattern", "dd/MM/yyyy"); + cy.get("#calendar4") .shadow() .find(".ui5-calheader") @@ -497,8 +497,18 @@ describe("Calendar general interaction", () => { .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-next]") - .should("not.have.class", "ui5-calheader-arrowbtn-disabled") - .click() + .should("not.have.class", "ui5-calheader-arrowbtn-disabled"); + + cy.get("#calendar4") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-next]") + .click(); + + cy.get("#calendar4") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-next]") .click(); cy.get("#calendar4") @@ -520,14 +530,14 @@ describe("Calendar general interaction", () => { cy.get("#calendar5").invoke("prop", "timestamp", timestamp) .invoke("prop", "primaryCalendarType", "Islamic") .invoke("prop", "secondaryCalendarType", "Gregorian"); - + cy.get("#calendar5") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-month] > span") .should("have.length", 2); - cy.get("#calendar5") + cy.get("#calendar5") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-year] > span") @@ -542,7 +552,6 @@ describe("Calendar general interaction", () => { .invoke("prop", "primaryCalendarType", "Islamic") .invoke("prop", "secondaryCalendarType", "Gregorian"); - cy.wait(300); cy.get("#calendar5") .shadow() .find(".ui5-calheader") @@ -553,10 +562,9 @@ describe("Calendar general interaction", () => { expect(spans[1].textContent).to.equal("Sep – Oct"); }); - cy.wait(300); cy.get("#calendar5") .shadow() - .find(".ui5-calheader") + .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-year]") .find("span") .then(spans => { @@ -567,7 +575,7 @@ describe("Calendar general interaction", () => { it("Calendar render two type for Month when MonthPicker is opened", () => { cy.mount(html``); - + const timestamp = new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000; cy.get("#calendar5").invoke("prop", "timestamp", timestamp); @@ -593,7 +601,7 @@ describe("Calendar general interaction", () => { it("Calendar render two type for Year when Year Picker is opened", () => { cy.mount(html``); - + const timestamp = new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000; cy.get("#calendar5").invoke("prop", "timestamp", timestamp); @@ -639,7 +647,7 @@ describe("Calendar general interaction", () => { it("Min and max dates are NOT set without format-pattern, because are not in ISO format (YYYY-MM-dd)", () => { cy.get("#calendar1") - .invoke("prop", "maxDate", `${new Date(Date.UTC(2024, 9, 4, 0, 0, 0))}`) + .invoke("prop", "maxDate", new Date(Date.UTC(2024, 9, 4, 0, 0, 0)).toString()) .invoke("prop", "minDate", "25.10.2018"); cy.get("#calendar1") @@ -708,7 +716,7 @@ describe("Calendar general interaction", () => { `); - + cy.get("#calendar3") .invoke("prop", "formatPattern", "ddMMyyyy") .invoke("prop", "minDate", "01072020") @@ -744,7 +752,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar8") .invoke("prop", "calendarWeekNumbering", "ISO_8601"); - + cy.get("#calendar9") .invoke("prop", "calendarWeekNumbering", "MiddleEastern"); @@ -763,7 +771,7 @@ describe("Calendar general interaction", () => { .first() .should("have.text", "52"); - // Check first week number in MiddleEastern calendar + // Check first week number in MiddleEastern calendar cy.get("#calendar9") .shadow() .find("ui5-daypicker") @@ -799,16 +807,15 @@ describe("Calendar general interaction", () => { cy.get("#calendar8") .invoke("prop", "calendarWeekNumbering", "ISO_8601"); - + cy.get("#calendar9") .invoke("prop", "calendarWeekNumbering", "MiddleEastern"); cy.get("#calendar10") .invoke("prop", "calendarWeekNumbering", "WesternTraditional"); - cy.get("[ui5-date]") - .invoke("prop", "value", "Jan 1, 2023"); + .invoke("prop", "value", "Jan 1, 2023"); cy.get("#calendar8") .shadow() @@ -825,12 +832,12 @@ describe("Calendar general interaction", () => { .find(".ui5-dp-firstday") .first() .should("have.text", "Sat"); - + cy.get("#calendar10") .shadow() .find("[ui5-daypicker]") .shadow() - .find(".ui5-dp-firstday") + .find(".ui5-dp-firstday") .first() .should("have.text", "Sun"); }); From 2f3fcb9e59cfbc3db7e2dcdf617371bf3483a526 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Tue, 28 Jan 2025 17:38:14 +0200 Subject: [PATCH 3/9] chore: address discussion comments --- packages/main/cypress/specs/Calendar.cy.ts | 282 +++++++++------------ 1 file changed, 118 insertions(+), 164 deletions(-) diff --git a/packages/main/cypress/specs/Calendar.cy.ts b/packages/main/cypress/specs/Calendar.cy.ts index 541f74ced31c..e9b0aed09157 100644 --- a/packages/main/cypress/specs/Calendar.cy.ts +++ b/packages/main/cypress/specs/Calendar.cy.ts @@ -1,19 +1,31 @@ import { html } from "lit"; import type Calendar from "../../src/Calendar.js"; -import type ToggleButton from "../../src/ToggleButton.js"; -import "../../src/ToggleButton.js"; import "../../src/Calendar.js"; import "../../src/Button.js"; import "../../src/CalendarDate.js"; import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js"; import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; -describe("Calendar general interaction", () => { - beforeEach(() => { - cy.mount(html``); - }); +const DEFAULT_CALENDAR = html``; + +const CALENDARS_WITH_WEEK_NUMBER_CONFIGS = html` + + + + + + + + + + + + `; +describe("Calendar general interaction", () => { it("Calendar is rendered", () => { + cy.mount(DEFAULT_CALENDAR); + cy.get("ui5-calendar") .shadow() .find(".ui5-cal-root") @@ -21,26 +33,10 @@ describe("Calendar general interaction", () => { }); it("Focus goes into the current day item of the day picker", () => { - cy.mount(html` - hide - - `); - - cy.window().then(win => { - const toggleButton = win.document.getElementById("weekNumbersButton") as ToggleButton; - const calendar = win.document.getElementById("calendar1") as Calendar; - - toggleButton.addEventListener("click", (event: Event) => { - const button = event.target as ToggleButton; - - calendar.hideWeekNumbers = button.pressed; - toggleButton.innerHTML = button.pressed ? "show" : "hide"; - }); - }); - + cy.mount(DEFAULT_CALENDAR); const timestamp = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); - cy.get("#weekNumbersButton").click(); cy.get("#calendar1") .shadow() @@ -50,6 +46,9 @@ describe("Calendar general interaction", () => { .should("have.focus"); cy.focused().realPress("Tab"); + + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(200); cy.get("#calendar1") .shadow() .find(".ui5-calheader") @@ -57,6 +56,9 @@ describe("Calendar general interaction", () => { .should("have.focus"); cy.focused().realPress("Tab"); + + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(200); cy.get("#calendar1") .shadow() .find(".ui5-calheader") @@ -64,6 +66,9 @@ describe("Calendar general interaction", () => { .should("have.focus"); cy.focused().realPress(["Shift", "Tab"]); + + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(200); cy.get("#calendar1") .shadow() .find(".ui5-calheader") @@ -71,6 +76,9 @@ describe("Calendar general interaction", () => { .should("have.focus"); cy.focused().realPress(["Shift", "Tab"]); + + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(200); cy.get("#calendar1") .shadow() .find("ui5-daypicker") @@ -80,11 +88,11 @@ describe("Calendar general interaction", () => { }); it("Calendar focuses the selected year when yearpicker is opened", () => { + cy.mount(DEFAULT_CALENDAR); const YEAR = 1997; const timestamp = Date.UTC(YEAR) / 1000; - cy.get("#calendar1") - .invoke("prop", "timestamp", timestamp); + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); cy.get("#calendar1") .shadow() @@ -105,7 +113,9 @@ describe("Calendar general interaction", () => { }); it("Calendar focuses the selected month when monthpicker is opened with space", () => { + cy.mount(DEFAULT_CALENDAR); const timestamp = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); cy.get("#calendar1") @@ -136,7 +146,9 @@ describe("Calendar general interaction", () => { }); it("Calendar focuses the selected year when yearpicker is opened with space", () => { + cy.mount(DEFAULT_CALENDAR); const timestamp = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); cy.get("#calendar1") @@ -150,6 +162,8 @@ describe("Calendar general interaction", () => { cy.focused().realPress("Tab"); cy.focused().realPress("Space"); + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(200); cy.get("#calendar1") .shadow() .find("ui5-yearpicker") @@ -168,7 +182,9 @@ describe("Calendar general interaction", () => { }); it("Calendar doesn't mark year as selected when there are no selected dates", () => { + cy.mount(DEFAULT_CALENDAR); const timestamp = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); cy.get("#calendar1") @@ -187,7 +203,9 @@ describe("Calendar general interaction", () => { }); it("Calendar doesn't mark month as selected when there are no selected dates", () => { + cy.mount(DEFAULT_CALENDAR); const timestamp = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); cy.get("#calendar1") @@ -206,7 +224,9 @@ describe("Calendar general interaction", () => { }); it("Page up/down increments/decrements the month value", () => { + cy.mount(DEFAULT_CALENDAR); const timestamp = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); cy.get("#calendar1") @@ -234,7 +254,9 @@ describe("Calendar general interaction", () => { }); it("Shift + Page up/down increments/decrements the year value by one", () => { + cy.mount(DEFAULT_CALENDAR); const timestamp = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); cy.get("#calendar1") @@ -262,7 +284,9 @@ describe("Calendar general interaction", () => { }); it("Ctrl + Shift + Page up/down increments/decrements the year value by ten", () => { + cy.mount(DEFAULT_CALENDAR); const timestamp = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); cy.get("#calendar1") @@ -290,7 +314,9 @@ describe("Calendar general interaction", () => { }); it("Page up/down increments/decrements the year value in the month picker", () => { + cy.mount(DEFAULT_CALENDAR); const timestamp = new Date(Date.UTC(2000, 9, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); cy.get("#calendar1") @@ -319,7 +345,9 @@ describe("Calendar general interaction", () => { }); it("Page up/down increments/decrements the year range in the year picker", () => { + cy.mount(DEFAULT_CALENDAR); const timestamp = new Date(Date.UTC(2000, 9, 1, 0, 0, 0)).valueOf() / 1000; + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); cy.get("#calendar1") @@ -348,9 +376,10 @@ describe("Calendar general interaction", () => { }); it("Calendar with 'Multiple' selection type", () => { + cy.mount(html``); const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; - cy.get("#calendar1").invoke("prop", "timestamp", timestamp) - .invoke("prop", "selectionMode", "Multiple"); + + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); const timestamps = [971136000, 971222400, 971308800]; @@ -376,18 +405,13 @@ describe("Calendar general interaction", () => { it("Keyboard navigation works properly, when calendar selection type is set to 'Multiple'", () => { cy.mount(html` - hide - + `); - const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; - cy.get("#calendar3").invoke("prop", "timestamp", timestamp) - .invoke("prop", "selectionMode", "Multiple"); - cy.get("#weekNumbersButton").click(); - cy.get("#weekNumbersButton").click(); + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); - cy.get("#calendar3") + cy.get("#calendar1") .shadow() .find("ui5-daypicker") .shadow() @@ -402,7 +426,7 @@ describe("Calendar general interaction", () => { cy.focused().realPress("Space"); cy.focused().realPress("ArrowRight"); - cy.get("#calendar3") + cy.get("#calendar1") .shadow() .find("ui5-daypicker") .shadow() @@ -411,10 +435,10 @@ describe("Calendar general interaction", () => { }); it("Calendar with 'Range' selection type", () => { + cy.mount(html``); const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; - cy.get("#calendar1") - .invoke("prop", "timestamp", timestamp) - .invoke("prop", "selectionMode", "Range"); + + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); const timestamps = [971740800, 971827200, 971913600]; @@ -464,60 +488,58 @@ describe("Calendar general interaction", () => { it("Previous and next buttons are disabled when necessary", () => { cy.mount(html` - + `); + const timestamp = 1594166400; - cy.get("#calendar4").invoke("prop", "timestamp", 1594166400) - .invoke("prop", "minDate", "7/7/2020") - .invoke("prop", "maxDate", "20/10/2020") - .invoke("prop", "formatPattern", "dd/MM/yyyy"); + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); - cy.get("#calendar4") + cy.get("#calendar1") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-prev]") .should("have.class", "ui5-calheader-arrowbtn-disabled"); - cy.get("#calendar4") + 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("#calendar4") + cy.get("#calendar1") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-prev]") .should("not.have.class", "ui5-calheader-arrowbtn-disabled"); - cy.get("#calendar4") + cy.get("#calendar1") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-next]") .should("not.have.class", "ui5-calheader-arrowbtn-disabled"); - cy.get("#calendar4") + cy.get("#calendar1") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-next]") .click(); - cy.get("#calendar4") + cy.get("#calendar1") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-next]") .click(); - cy.get("#calendar4") + cy.get("#calendar1") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-prev]") .should("not.have.class", "ui5-calheader-arrowbtn-disabled"); - cy.get("#calendar4") + cy.get("#calendar1") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-next]") @@ -525,19 +547,18 @@ describe("Calendar general interaction", () => { }); it("Second month and year are rendered in the header", () => { + cy.mount(html``); const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; - cy.mount(html``); - cy.get("#calendar5").invoke("prop", "timestamp", timestamp) - .invoke("prop", "primaryCalendarType", "Islamic") - .invoke("prop", "secondaryCalendarType", "Gregorian"); - cy.get("#calendar5") + 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("#calendar5") + cy.get("#calendar1") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-year] > span") @@ -545,14 +566,12 @@ describe("Calendar general interaction", () => { }); it("Buttons for month and year in header are rendered with correct value", () => { + cy.mount(html``); const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; - cy.mount(html``); - cy.get("#calendar5") - .invoke("prop", "timestamp", timestamp) - .invoke("prop", "primaryCalendarType", "Islamic") - .invoke("prop", "secondaryCalendarType", "Gregorian"); - cy.get("#calendar5") + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar1") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-month]") @@ -562,7 +581,9 @@ describe("Calendar general interaction", () => { expect(spans[1].textContent).to.equal("Sep – Oct"); }); - cy.get("#calendar5") + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(200); + cy.get("#calendar1") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-year]") @@ -574,18 +595,18 @@ describe("Calendar general interaction", () => { }); it("Calendar render two type for Month when MonthPicker is opened", () => { - cy.mount(html``); - + cy.mount(html``); const timestamp = new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000; - cy.get("#calendar5").invoke("prop", "timestamp", timestamp); - cy.get("#calendar5") + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar1") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-month]") .click(); - cy.get("#calendar5") + cy.get("#calendar1") .shadow() .find("ui5-monthpicker") .shadow() @@ -600,18 +621,18 @@ describe("Calendar general interaction", () => { }); it("Calendar render two type for Year when Year Picker is opened", () => { - cy.mount(html``); - + cy.mount(html``); const timestamp = new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000; - cy.get("#calendar5").invoke("prop", "timestamp", timestamp); - cy.get("#calendar5") + cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + + cy.get("#calendar1") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-year]") .click(); - cy.get("#calendar5") + cy.get("#calendar1") .shadow() .find("ui5-yearpicker") .shadow() @@ -627,8 +648,8 @@ describe("Calendar general interaction", () => { }); it("Min and max dates are set without format-pattern by using ISO (YYYY-MM-dd) format", () => { - cy.get("#calendar1") - .invoke("prop", "maxDate", new Date(Date.UTC(2024, 9, 4, 0, 0, 0)).toISOString().split("T")[0]); // sets the max date to 2024-10-04 + const maxDate = new Date(Date.UTC(2024, 9, 4, 0, 0, 0)).toISOString().split("T")[0]; + cy.mount(html``); cy.get("#calendar1") .shadow() @@ -646,9 +667,8 @@ describe("Calendar general interaction", () => { }); it("Min and max dates are NOT set without format-pattern, because are not in ISO format (YYYY-MM-dd)", () => { - cy.get("#calendar1") - .invoke("prop", "maxDate", new Date(Date.UTC(2024, 9, 4, 0, 0, 0)).toString()) - .invoke("prop", "minDate", "25.10.2018"); + const maxDate = new Date(Date.UTC(2024, 9, 4, 0, 0, 0)).toString(); + cy.mount(html``); cy.get("#calendar1") .shadow() @@ -675,35 +695,27 @@ describe("Calendar general interaction", () => { it("Focus goes into first selected day of the range selection", () => { cy.mount(html` - - + + `); - cy.get("#calendar7") - .invoke("prop", "primaryCalendarType", "Gregorian") - .invoke("prop", "secondaryCalendarType", "Gregorian") - .invoke("prop", "selectionMode", "Range"); - - cy.get("[ui5-date-range]") - .invoke("prop", "startValue", "Jan 20, 2021") - .invoke("prop", "endValue", "Jan 30, 2021"); - const timestamp = new Date(Date.UTC(2021, 0, 20, 0, 0, 0)).valueOf() / 1000; // 1611100800 - cy.get("#calendar7") + cy.get("#calendar1") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-month]") .click(); - cy.get("#calendar7") + cy.get("#calendar1") .shadow() .find("ui5-monthpicker") .shadow() .find(`[data-sap-timestamp=${timestamp}]`) .click(); - cy.get("#calendar7") + cy.get("#calendar1") .shadow() .find("ui5-daypicker") .shadow() @@ -713,20 +725,11 @@ describe("Calendar general interaction", () => { it("Special date respects format-pattern given to the calendar", () => { cy.mount(html` - - + + `); - cy.get("#calendar3") - .invoke("prop", "formatPattern", "ddMMyyyy") - .invoke("prop", "minDate", "01072020") - .invoke("prop", "maxDate", "21102020"); - - cy.get("[ui5-special-date]") - .invoke("prop", "type", "Type01") - .invoke("prop", "value", "07102020"); - - cy.get("#calendar3") + cy.get("#calendar1") .shadow() .find("ui5-daypicker") .shadow() @@ -736,34 +739,10 @@ describe("Calendar general interaction", () => { }); it("Check calendar week numbers with specific CalendarWeekNumbering configuration", () => { - cy.mount(html` - - - - - - - - - - - - `); - - cy.get("#calendar8") - .invoke("prop", "calendarWeekNumbering", "ISO_8601"); - - cy.get("#calendar9") - .invoke("prop", "calendarWeekNumbering", "MiddleEastern"); - - cy.get("#calendar10") - .invoke("prop", "calendarWeekNumbering", "WesternTraditional"); - - cy.get("[ui5-date]") - .invoke("prop", "value", "Jan 1, 2023"); + cy.mount(CALENDARS_WITH_WEEK_NUMBER_CONFIGS); // Check first week number in ISO_8601 calendar - cy.get("#calendar8") + cy.get("#calendar1") .shadow() .find("ui5-daypicker") .shadow() @@ -772,7 +751,7 @@ describe("Calendar general interaction", () => { .should("have.text", "52"); // Check first week number in MiddleEastern calendar - cy.get("#calendar9") + cy.get("#calendar2") .shadow() .find("ui5-daypicker") .shadow() @@ -781,7 +760,7 @@ describe("Calendar general interaction", () => { .should("have.text", "1"); // Check first week number in WesternTraditional calendar - cy.get("#calendar10") + cy.get("#calendar3") .shadow() .find("ui5-daypicker") .shadow() @@ -791,33 +770,8 @@ describe("Calendar general interaction", () => { }); it("Check calendar week day names with specific CalendarWeekNumbering configuration", () => { - cy.mount(html` - - - - - - - - - - - - `); - - cy.get("#calendar8") - .invoke("prop", "calendarWeekNumbering", "ISO_8601"); - - cy.get("#calendar9") - .invoke("prop", "calendarWeekNumbering", "MiddleEastern"); - - cy.get("#calendar10") - .invoke("prop", "calendarWeekNumbering", "WesternTraditional"); - - cy.get("[ui5-date]") - .invoke("prop", "value", "Jan 1, 2023"); - - cy.get("#calendar8") + cy.mount(CALENDARS_WITH_WEEK_NUMBER_CONFIGS); + cy.get("#calendar1") .shadow() .find("[ui5-daypicker]") .shadow() @@ -825,7 +779,7 @@ describe("Calendar general interaction", () => { .first() .should("have.text", "Mon"); - cy.get("#calendar9") + cy.get("#calendar2") .shadow() .find("[ui5-daypicker]") .shadow() @@ -833,7 +787,7 @@ describe("Calendar general interaction", () => { .first() .should("have.text", "Sat"); - cy.get("#calendar10") + cy.get("#calendar3") .shadow() .find("[ui5-daypicker]") .shadow() From ff879d430fa11ff795c7174922aef1fe5e2eed86 Mon Sep 17 00:00:00 2001 From: hinzzx Date: Thu, 30 Jan 2025 09:24:10 +0200 Subject: [PATCH 4/9] chore: re-use templates --- packages/main/cypress/specs/Calendar.cy.ts | 112 +++++++++------------ 1 file changed, 46 insertions(+), 66 deletions(-) diff --git a/packages/main/cypress/specs/Calendar.cy.ts b/packages/main/cypress/specs/Calendar.cy.ts index e9b0aed09157..efd4cb67d3ba 100644 --- a/packages/main/cypress/specs/Calendar.cy.ts +++ b/packages/main/cypress/specs/Calendar.cy.ts @@ -6,7 +6,20 @@ import "../../src/CalendarDate.js"; import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js"; import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; -const DEFAULT_CALENDAR = html``; +const DEFAULT_CALENDAR = (date: Date) => { + const calDate = new Date(date); + const formattedDate = calDate.toLocaleDateString("default", { + year: "numeric", + month: "short", + day: "numeric", + }); + + return html` + + + + `; +}; const CALENDARS_WITH_WEEK_NUMBER_CONFIGS = html` @@ -23,20 +36,9 @@ const CALENDARS_WITH_WEEK_NUMBER_CONFIGS = html` `; describe("Calendar general interaction", () => { - it("Calendar is rendered", () => { - cy.mount(DEFAULT_CALENDAR); - - cy.get("ui5-calendar") - .shadow() - .find(".ui5-cal-root") - .should("exist"); - }); - it("Focus goes into the current day item of the day picker", () => { - cy.mount(DEFAULT_CALENDAR); - const timestamp = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000; - - cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)); + cy.mount(DEFAULT_CALENDAR(date)); cy.get("#calendar1") .shadow() @@ -48,7 +50,7 @@ describe("Calendar general interaction", () => { cy.focused().realPress("Tab"); // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(200); + cy.wait(300); cy.get("#calendar1") .shadow() .find(".ui5-calheader") @@ -58,7 +60,7 @@ describe("Calendar general interaction", () => { cy.focused().realPress("Tab"); // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(200); + cy.wait(300); cy.get("#calendar1") .shadow() .find(".ui5-calheader") @@ -68,7 +70,7 @@ describe("Calendar general interaction", () => { cy.focused().realPress(["Shift", "Tab"]); // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(200); + cy.wait(300); cy.get("#calendar1") .shadow() .find(".ui5-calheader") @@ -78,7 +80,7 @@ describe("Calendar general interaction", () => { cy.focused().realPress(["Shift", "Tab"]); // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(200); + cy.wait(300); cy.get("#calendar1") .shadow() .find("ui5-daypicker") @@ -88,11 +90,9 @@ describe("Calendar general interaction", () => { }); it("Calendar focuses the selected year when yearpicker is opened", () => { - cy.mount(DEFAULT_CALENDAR); const YEAR = 1997; - const timestamp = Date.UTC(YEAR) / 1000; - - cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + const date = Date.UTC(YEAR); + cy.mount(DEFAULT_CALENDAR(new Date(date))); cy.get("#calendar1") .shadow() @@ -113,10 +113,8 @@ describe("Calendar general interaction", () => { }); it("Calendar focuses the selected month when monthpicker is opened with space", () => { - cy.mount(DEFAULT_CALENDAR); - const timestamp = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000; - - cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)); + cy.mount(DEFAULT_CALENDAR(date)); cy.get("#calendar1") .shadow() @@ -146,10 +144,8 @@ describe("Calendar general interaction", () => { }); it("Calendar focuses the selected year when yearpicker is opened with space", () => { - cy.mount(DEFAULT_CALENDAR); - const timestamp = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)).valueOf() / 1000; - - cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)); + cy.mount(DEFAULT_CALENDAR(date)); cy.get("#calendar1") .shadow() @@ -163,7 +159,7 @@ describe("Calendar general interaction", () => { cy.focused().realPress("Space"); // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(200); + cy.wait(300); cy.get("#calendar1") .shadow() .find("ui5-yearpicker") @@ -182,52 +178,44 @@ describe("Calendar general interaction", () => { }); it("Calendar doesn't mark year as selected when there are no selected dates", () => { - cy.mount(DEFAULT_CALENDAR); - const timestamp = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000; + cy.mount(html``); - cy.get("#calendar1").invoke("prop", "timestamp", timestamp); - - cy.get("#calendar1") + cy.get("#calendar2") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-year]") .click(); - cy.get("#calendar1") + cy.get("#calendar2") .shadow() .find("ui5-yearpicker") .shadow() - .find(`[data-sap-timestamp=973036800]`) + .find(`[data-sap-timestamp=1738195200]`) .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", () => { - cy.mount(DEFAULT_CALENDAR); - const timestamp = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000; + cy.mount(html``); - cy.get("#calendar1").invoke("prop", "timestamp", timestamp); - - cy.get("#calendar1") + cy.get("#calendar2") .shadow() .find(".ui5-calheader") .find("[data-ui5-cal-header-btn-month]") .click(); - cy.get("#calendar1") + cy.get("#calendar2") .shadow() .find("ui5-monthpicker") .shadow() - .find(`[data-sap-timestamp=973036800]`) + .find(`[data-sap-timestamp=1738195200]`) .should("have.focus") .should("not.have.class", "ui5-mp-item--selected"); }); it("Page up/down increments/decrements the month value", () => { - cy.mount(DEFAULT_CALENDAR); - const timestamp = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000; - - cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + const date = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)); + cy.mount(DEFAULT_CALENDAR(date)); cy.get("#calendar1") .shadow() @@ -254,10 +242,8 @@ describe("Calendar general interaction", () => { }); it("Shift + Page up/down increments/decrements the year value by one", () => { - cy.mount(DEFAULT_CALENDAR); - const timestamp = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000; - - cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + const date = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)); + cy.mount(DEFAULT_CALENDAR(date)); cy.get("#calendar1") .shadow() @@ -284,10 +270,8 @@ describe("Calendar general interaction", () => { }); it("Ctrl + Shift + Page up/down increments/decrements the year value by ten", () => { - cy.mount(DEFAULT_CALENDAR); - const timestamp = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)).valueOf() / 1000; - - cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + const date = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)); + cy.mount(DEFAULT_CALENDAR(date)); cy.get("#calendar1") .shadow() @@ -314,10 +298,8 @@ describe("Calendar general interaction", () => { }); it("Page up/down increments/decrements the year value in the month picker", () => { - cy.mount(DEFAULT_CALENDAR); - const timestamp = new Date(Date.UTC(2000, 9, 1, 0, 0, 0)).valueOf() / 1000; - - cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + const date = new Date(Date.UTC(2000, 9, 1, 0, 0, 0)); + cy.mount(DEFAULT_CALENDAR(date)); cy.get("#calendar1") .shadow() @@ -345,10 +327,8 @@ describe("Calendar general interaction", () => { }); it("Page up/down increments/decrements the year range in the year picker", () => { - cy.mount(DEFAULT_CALENDAR); - const timestamp = new Date(Date.UTC(2000, 9, 1, 0, 0, 0)).valueOf() / 1000; - - cy.get("#calendar1").invoke("prop", "timestamp", timestamp); + const date = new Date(Date.UTC(2000, 9, 1, 0, 0, 0)); + cy.mount(DEFAULT_CALENDAR(date)); cy.get("#calendar1") .shadow() @@ -582,7 +562,7 @@ describe("Calendar general interaction", () => { }); // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(200); + cy.wait(300); cy.get("#calendar1") .shadow() .find(".ui5-calheader") From 7df73f4eb6c6fed326b0b66f292c83f7e51ee264 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 30 Jan 2025 14:23:39 +0200 Subject: [PATCH 5/9] chore: minor improvements --- packages/main/cypress/specs/Calendar.cy.ts | 108 +++++++++------------ 1 file changed, 48 insertions(+), 60 deletions(-) diff --git a/packages/main/cypress/specs/Calendar.cy.ts b/packages/main/cypress/specs/Calendar.cy.ts index efd4cb67d3ba..36100e52155c 100644 --- a/packages/main/cypress/specs/Calendar.cy.ts +++ b/packages/main/cypress/specs/Calendar.cy.ts @@ -6,7 +6,7 @@ import "../../src/CalendarDate.js"; import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js"; import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; -const DEFAULT_CALENDAR = (date: Date) => { +const getDefaultCalendar = (date: Date) => { const calDate = new Date(date); const formattedDate = calDate.toLocaleDateString("default", { year: "numeric", @@ -21,7 +21,7 @@ const DEFAULT_CALENDAR = (date: Date) => { `; }; -const CALENDARS_WITH_WEEK_NUMBER_CONFIGS = html` +const getCalendarsWithWeekNumbers = () => html` @@ -38,19 +38,17 @@ const CALENDARS_WITH_WEEK_NUMBER_CONFIGS = html` 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(DEFAULT_CALENDAR(date)); + cy.mount(getDefaultCalendar(date)); cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(`div[data-sap-timestamp=974851200]`) .should("have.focus"); cy.focused().realPress("Tab"); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(300); cy.get("#calendar1") .shadow() .find(".ui5-calheader") @@ -59,8 +57,6 @@ describe("Calendar general interaction", () => { cy.focused().realPress("Tab"); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(300); cy.get("#calendar1") .shadow() .find(".ui5-calheader") @@ -69,8 +65,6 @@ describe("Calendar general interaction", () => { cy.focused().realPress(["Shift", "Tab"]); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(300); cy.get("#calendar1") .shadow() .find(".ui5-calheader") @@ -79,11 +73,9 @@ describe("Calendar general interaction", () => { cy.focused().realPress(["Shift", "Tab"]); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(300); cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(`div[data-sap-timestamp=974851200]`) .should("have.focus"); @@ -92,7 +84,7 @@ describe("Calendar general interaction", () => { it("Calendar focuses the selected year when yearpicker is opened", () => { const YEAR = 1997; const date = Date.UTC(YEAR); - cy.mount(DEFAULT_CALENDAR(new Date(date))); + cy.mount(getDefaultCalendar(new Date(date))); cy.get("#calendar1") .shadow() @@ -102,7 +94,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-yearpicker") + .find("[ui5-yearpicker]") .shadow() .find("[tabindex='0']") .invoke("attr", "data-sap-timestamp") @@ -114,11 +106,11 @@ describe("Calendar general interaction", () => { 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(DEFAULT_CALENDAR(date)); + cy.mount(getDefaultCalendar(date)); cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(`div[data-sap-timestamp=974851200]`) .click(); @@ -128,12 +120,12 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-monthpicker") + .find("[ui5-monthpicker]") .should("not.have.attr", "hidden"); cy.get("#calendar1") .shadow() - .find("ui5-monthpicker") + .find("[ui5-monthpicker]") .shadow() .find("[tabindex='0']") .invoke("attr", "data-sap-timestamp") @@ -145,11 +137,11 @@ describe("Calendar general interaction", () => { 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(DEFAULT_CALENDAR(date)); + cy.mount(getDefaultCalendar(date)); cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(`div[data-sap-timestamp=974851200]`) .click(); @@ -158,16 +150,14 @@ describe("Calendar general interaction", () => { cy.focused().realPress("Tab"); cy.focused().realPress("Space"); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(300); cy.get("#calendar1") .shadow() - .find("ui5-yearpicker") + .find("[ui5-yearpicker]") .should("not.have.attr", "hidden"); cy.get("#calendar1") .shadow() - .find("ui5-yearpicker") + .find("[ui5-yearpicker]") .shadow() .find("[tabindex='0']") .invoke("attr", "data-sap-timestamp") @@ -188,7 +178,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar2") .shadow() - .find("ui5-yearpicker") + .find("[ui5-yearpicker]") .shadow() .find(`[data-sap-timestamp=1738195200]`) .should("have.focus") @@ -206,7 +196,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar2") .shadow() - .find("ui5-monthpicker") + .find("[ui5-monthpicker]") .shadow() .find(`[data-sap-timestamp=1738195200]`) .should("have.focus") @@ -215,11 +205,11 @@ describe("Calendar general interaction", () => { it("Page up/down increments/decrements the month value", () => { const date = new Date(Date.UTC(2000, 10, 1, 0, 0, 0)); - cy.mount(DEFAULT_CALENDAR(date)); + cy.mount(getDefaultCalendar(date)); cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find("[tabindex='0']") .click(); @@ -243,11 +233,11 @@ describe("Calendar general interaction", () => { 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(DEFAULT_CALENDAR(date)); + cy.mount(getDefaultCalendar(date)); cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find("[tabindex='0']") .click(); @@ -271,11 +261,11 @@ describe("Calendar general interaction", () => { 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(DEFAULT_CALENDAR(date)); + cy.mount(getDefaultCalendar(date)); cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find("[tabindex='0']") .click(); @@ -299,11 +289,11 @@ describe("Calendar general interaction", () => { 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(DEFAULT_CALENDAR(date)); + cy.mount(getDefaultCalendar(date)); cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find("[tabindex='0']") .click(); @@ -328,11 +318,11 @@ describe("Calendar general interaction", () => { 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(DEFAULT_CALENDAR(date)); + cy.mount(getDefaultCalendar(date)); cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find("[tabindex='0']") .click(); @@ -366,7 +356,7 @@ describe("Calendar general interaction", () => { timestamps.forEach(_timestamp => { cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(`[data-sap-timestamp=${_timestamp}]`) .first() @@ -393,7 +383,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(`[data-sap-timestamp=${timestamp}]`) .first() @@ -408,7 +398,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(`[data-sap-timestamp=971222400]`) .should("have.focus"); @@ -424,7 +414,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(`[data-sap-timestamp=${timestamps[0]}]`) .first() @@ -432,7 +422,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(`[data-sap-timestamp=${timestamps[2]}]`) .first() @@ -440,21 +430,21 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(`[data-sap-timestamp=${timestamps[0]}]`) .should("have.class", "ui5-dp-item--selected"); cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(`[data-sap-timestamp=${timestamps[1]}]`) .should("have.class", "ui5-dp-item--selected-between"); cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(`[data-sap-timestamp=${timestamps[2]}]`) .should("have.class", "ui5-dp-item--selected"); @@ -561,8 +551,6 @@ describe("Calendar general interaction", () => { expect(spans[1].textContent).to.equal("Sep – Oct"); }); - // eslint-disable-next-line cypress/no-unnecessary-waiting - cy.wait(300); cy.get("#calendar1") .shadow() .find(".ui5-calheader") @@ -588,7 +576,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-monthpicker") + .find("[ui5-monthpicker]") .shadow() .find(".ui5-mp-item") .first() @@ -614,7 +602,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-yearpicker") + .find("[ui5-yearpicker]") .shadow() .find(".ui5-yp-item") .should("have.length", 8) @@ -639,7 +627,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-yearpicker") + .find("[ui5-yearpicker]") .shadow() .find(".ui5-yp-root .ui5-yp-item") .eq(11) // year 2025 @@ -658,7 +646,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-yearpicker") + .find("[ui5-yearpicker]") .shadow() .find(".ui5-yp-root .ui5-yp-item") .eq(3) // year 2016 @@ -666,7 +654,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-yearpicker") + .find("[ui5-yearpicker]") .shadow() .find(".ui5-yp-root .ui5-yp-item") .eq(10) // year 2024 @@ -690,14 +678,14 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-monthpicker") + .find("[ui5-monthpicker]") .shadow() .find(`[data-sap-timestamp=${timestamp}]`) .click(); cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(`div[data-sap-timestamp=${timestamp}]`) .should("have.focus"); @@ -711,7 +699,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(".ui5-dp-root") .find("div[data-ui5-special-day]") @@ -719,12 +707,12 @@ describe("Calendar general interaction", () => { }); it("Check calendar week numbers with specific CalendarWeekNumbering configuration", () => { - cy.mount(CALENDARS_WITH_WEEK_NUMBER_CONFIGS); + cy.mount(getCalendarsWithWeekNumbers()); // Check first week number in ISO_8601 calendar cy.get("#calendar1") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(".ui5-dp-weekname") .first() @@ -733,7 +721,7 @@ describe("Calendar general interaction", () => { // Check first week number in MiddleEastern calendar cy.get("#calendar2") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(".ui5-dp-weekname") .first() @@ -742,7 +730,7 @@ describe("Calendar general interaction", () => { // Check first week number in WesternTraditional calendar cy.get("#calendar3") .shadow() - .find("ui5-daypicker") + .find("[ui5-daypicker]") .shadow() .find(".ui5-dp-weekname") .first() @@ -750,7 +738,7 @@ describe("Calendar general interaction", () => { }); it("Check calendar week day names with specific CalendarWeekNumbering configuration", () => { - cy.mount(CALENDARS_WITH_WEEK_NUMBER_CONFIGS); + cy.mount(getCalendarsWithWeekNumbers()); cy.get("#calendar1") .shadow() .find("[ui5-daypicker]") From 97385f4e374c7e7f14b0f31845507bdd05e3abb6 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 30 Jan 2025 15:03:22 +0200 Subject: [PATCH 6/9] chore: unstable test --- packages/fiori/cypress/specs/SideNavigation.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/cypress/specs/SideNavigation.cy.ts b/packages/fiori/cypress/specs/SideNavigation.cy.ts index 8fdcf839ed35..9ddad59f9ea4 100644 --- a/packages/fiori/cypress/specs/SideNavigation.cy.ts +++ b/packages/fiori/cypress/specs/SideNavigation.cy.ts @@ -125,7 +125,7 @@ describe("Side Navigation interaction", () => { cy.get("#item1").should("not.have.attr", "expanded"); }); - it("Tests expanding and collapsing of unselectable items with Space and Enter", () => { + it.skip("Tests expanding and collapsing of unselectable items with Space and Enter", () => { cy.mount(html` From f8e64235a6e29855ceba909a7d8606341dc43405 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 30 Jan 2025 17:17:44 +0200 Subject: [PATCH 7/9] chore: commands --- packages/main/cypress/specs/Calendar.cy.ts | 94 +++---------------- packages/main/cypress/support/commands.ts | 9 +- .../support/commands/Calendar.commands.ts | 15 +++ 3 files changed, 37 insertions(+), 81 deletions(-) create mode 100644 packages/main/cypress/support/commands/Calendar.commands.ts diff --git a/packages/main/cypress/specs/Calendar.cy.ts b/packages/main/cypress/specs/Calendar.cy.ts index 36100e52155c..d9ace46cc05c 100644 --- a/packages/main/cypress/specs/Calendar.cy.ts +++ b/packages/main/cypress/specs/Calendar.cy.ts @@ -40,11 +40,7 @@ describe("Calendar general interaction", () => { const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)); cy.mount(getDefaultCalendar(date)); - cy.get("#calendar1") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(`div[data-sap-timestamp=974851200]`) + cy.ui5CalendarGetDay("#calendar1", "974851200") .should("have.focus"); cy.focused().realPress("Tab"); @@ -73,11 +69,7 @@ describe("Calendar general interaction", () => { cy.focused().realPress(["Shift", "Tab"]); - cy.get("#calendar1") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(`div[data-sap-timestamp=974851200]`) + cy.ui5CalendarGetDay("#calendar1", "974851200") .should("have.focus"); }); @@ -108,11 +100,7 @@ describe("Calendar general interaction", () => { const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)); cy.mount(getDefaultCalendar(date)); - cy.get("#calendar1") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(`div[data-sap-timestamp=974851200]`) + cy.ui5CalendarGetDay("#calendar1", "974851200") .click(); cy.focused().realPress("Tab"); @@ -139,11 +127,7 @@ describe("Calendar general interaction", () => { const date = new Date(Date.UTC(2000, 10, 22, 0, 0, 0)); cy.mount(getDefaultCalendar(date)); - cy.get("#calendar1") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(`div[data-sap-timestamp=974851200]`) + cy.ui5CalendarGetDay("#calendar1", "974851200") .click(); cy.focused().realPress("Tab"); @@ -194,11 +178,7 @@ describe("Calendar general interaction", () => { .find("[data-ui5-cal-header-btn-month]") .click(); - cy.get("#calendar2") - .shadow() - .find("[ui5-monthpicker]") - .shadow() - .find(`[data-sap-timestamp=1738195200]`) + cy.ui5CalendarGetMonth("#calendar2", "1738195200") .should("have.focus") .should("not.have.class", "ui5-mp-item--selected"); }); @@ -354,12 +334,7 @@ describe("Calendar general interaction", () => { const timestamps = [971136000, 971222400, 971308800]; timestamps.forEach(_timestamp => { - cy.get("#calendar1") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(`[data-sap-timestamp=${_timestamp}]`) - .first() + cy.ui5CalendarGetDay("#calendar1", _timestamp.toString()) .as("date"); cy.get("@date").click(); @@ -381,12 +356,7 @@ describe("Calendar general interaction", () => { cy.get("#calendar1").invoke("prop", "timestamp", timestamp); - cy.get("#calendar1") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(`[data-sap-timestamp=${timestamp}]`) - .first() + cy.ui5CalendarGetDay("#calendar1", timestamp.toString()) .focus(); // Select the focused date @@ -396,11 +366,7 @@ describe("Calendar general interaction", () => { cy.focused().realPress("Space"); cy.focused().realPress("ArrowRight"); - cy.get("#calendar1") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(`[data-sap-timestamp=971222400]`) + cy.ui5CalendarGetDay("#calendar1", "971222400") .should("have.focus"); }); @@ -412,41 +378,19 @@ describe("Calendar general interaction", () => { const timestamps = [971740800, 971827200, 971913600]; - cy.get("#calendar1") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(`[data-sap-timestamp=${timestamps[0]}]`) - .first() + cy.ui5CalendarGetDay("#calendar1", timestamps[0].toString()) .click(); - cy.get("#calendar1") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(`[data-sap-timestamp=${timestamps[2]}]`) - .first() + cy.ui5CalendarGetDay("#calendar1", timestamps[2].toString()) .click(); - cy.get("#calendar1") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(`[data-sap-timestamp=${timestamps[0]}]`) + cy.ui5CalendarGetDay("#calendar1", timestamps[0].toString()) .should("have.class", "ui5-dp-item--selected"); - cy.get("#calendar1") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(`[data-sap-timestamp=${timestamps[1]}]`) + cy.ui5CalendarGetDay("#calendar1", timestamps[1].toString()) .should("have.class", "ui5-dp-item--selected-between"); - cy.get("#calendar1") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(`[data-sap-timestamp=${timestamps[2]}]`) + cy.ui5CalendarGetDay("#calendar1", timestamps[2].toString()) .should("have.class", "ui5-dp-item--selected"); cy.get("#calendar1") @@ -676,18 +620,10 @@ describe("Calendar general interaction", () => { .find("[data-ui5-cal-header-btn-month]") .click(); - cy.get("#calendar1") - .shadow() - .find("[ui5-monthpicker]") - .shadow() - .find(`[data-sap-timestamp=${timestamp}]`) + cy.ui5CalendarGetMonth("#calendar1", timestamp.toString()) .click(); - cy.get("#calendar1") - .shadow() - .find("[ui5-daypicker]") - .shadow() - .find(`div[data-sap-timestamp=${timestamp}]`) + cy.ui5CalendarGetDay("#calendar1", timestamp.toString()) .should("have.focus"); }); diff --git a/packages/main/cypress/support/commands.ts b/packages/main/cypress/support/commands.ts index 8415c85f525c..1cba9e318ad7 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}]`); +}); From a91ae29603311973dca72538d989150cc1b01733 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 30 Jan 2025 17:48:00 +0200 Subject: [PATCH 8/9] chore: change to TSX --- .../specs/{Calendar.cy.ts => Calendar.cy.tsx} | 92 +++++++++---------- 1 file changed, 44 insertions(+), 48 deletions(-) rename packages/main/cypress/specs/{Calendar.cy.ts => Calendar.cy.tsx} (87%) diff --git a/packages/main/cypress/specs/Calendar.cy.ts b/packages/main/cypress/specs/Calendar.cy.tsx similarity index 87% rename from packages/main/cypress/specs/Calendar.cy.ts rename to packages/main/cypress/specs/Calendar.cy.tsx index d9ace46cc05c..c2e6763549ff 100644 --- a/packages/main/cypress/specs/Calendar.cy.ts +++ b/packages/main/cypress/specs/Calendar.cy.tsx @@ -1,8 +1,8 @@ -import { html } from "lit"; -import type Calendar from "../../src/Calendar.js"; -import "../../src/Calendar.js"; -import "../../src/Button.js"; -import "../../src/CalendarDate.js"; +import Calendar from "../../src/Calendar.js"; +import Button from "../../src/Button.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"; @@ -14,26 +14,24 @@ const getDefaultCalendar = (date: Date) => { day: "numeric", }); - return html` - - - - `; + return ( + + ); }; -const getCalendarsWithWeekNumbers = () => html` - - - +const getCalendarsWithWeekNumbers = () => (<> + + + - - - + + + - - - - `; + + + +); describe("Calendar general interaction", () => { it("Focus goes into the current day item of the day picker", () => { @@ -152,7 +150,7 @@ describe("Calendar general interaction", () => { }); it("Calendar doesn't mark year as selected when there are no selected dates", () => { - cy.mount(html``); + cy.mount(); cy.get("#calendar2") .shadow() @@ -170,7 +168,7 @@ describe("Calendar general interaction", () => { }); it("Calendar doesn't mark month as selected when there are no selected dates", () => { - cy.mount(html``); + cy.mount(); cy.get("#calendar2") .shadow() @@ -326,7 +324,7 @@ describe("Calendar general interaction", () => { }); it("Calendar with 'Multiple' selection type", () => { - cy.mount(html``); + cy.mount(); const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; cy.get("#calendar1").invoke("prop", "timestamp", timestamp); @@ -349,9 +347,8 @@ describe("Calendar general interaction", () => { }); it("Keyboard navigation works properly, when calendar selection type is set to 'Multiple'", () => { - cy.mount(html` - - `); + cy.mount(); + const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; cy.get("#calendar1").invoke("prop", "timestamp", timestamp); @@ -371,7 +368,7 @@ describe("Calendar general interaction", () => { }); it("Calendar with 'Range' selection type", () => { - cy.mount(html``); + cy.mount(); const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; cy.get("#calendar1").invoke("prop", "timestamp", timestamp); @@ -401,11 +398,11 @@ describe("Calendar general interaction", () => { }); it("Previous and next buttons are disabled when necessary", () => { - cy.mount(html` - - - - `); + cy.mount(<> + + + + ); const timestamp = 1594166400; cy.get("#calendar1").invoke("prop", "timestamp", timestamp); @@ -461,7 +458,7 @@ describe("Calendar general interaction", () => { }); it("Second month and year are rendered in the header", () => { - cy.mount(html``); + cy.mount(); const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; cy.get("#calendar1").invoke("prop", "timestamp", timestamp); @@ -480,7 +477,7 @@ describe("Calendar general interaction", () => { }); it("Buttons for month and year in header are rendered with correct value", () => { - cy.mount(html``); + cy.mount(); const timestamp = new Date(Date.UTC(2000, 9, 10, 0, 0, 0)).valueOf() / 1000; cy.get("#calendar1").invoke("prop", "timestamp", timestamp); @@ -507,7 +504,7 @@ describe("Calendar general interaction", () => { }); it("Calendar render two type for Month when MonthPicker is opened", () => { - cy.mount(html``); + cy.mount(); const timestamp = new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000; cy.get("#calendar1").invoke("prop", "timestamp", timestamp); @@ -533,7 +530,7 @@ describe("Calendar general interaction", () => { }); it("Calendar render two type for Year when Year Picker is opened", () => { - cy.mount(html``); + cy.mount(); const timestamp = new Date(Date.UTC(2000, 0, 1, 0, 0, 0)).valueOf() / 1000; cy.get("#calendar1").invoke("prop", "timestamp", timestamp); @@ -561,7 +558,7 @@ describe("Calendar general interaction", () => { 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(html``); + cy.mount(); cy.get("#calendar1") .shadow() @@ -580,7 +577,7 @@ describe("Calendar general interaction", () => { 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(html``); + cy.mount(); cy.get("#calendar1") .shadow() @@ -606,11 +603,10 @@ describe("Calendar general interaction", () => { }); it("Focus goes into first selected day of the range selection", () => { - cy.mount(html` - - - `); + cy.mount( + + + ); const timestamp = new Date(Date.UTC(2021, 0, 20, 0, 0, 0)).valueOf() / 1000; // 1611100800 @@ -628,10 +624,10 @@ describe("Calendar general interaction", () => { }); it("Special date respects format-pattern given to the calendar", () => { - cy.mount(html` - - - `); + cy.mount( + + + ); cy.get("#calendar1") .shadow() From d334888fd65e6388e958dcf4c4fc10a36ae5b347 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Thu, 30 Jan 2025 17:49:25 +0200 Subject: [PATCH 9/9] chore: lint --- packages/main/cypress/specs/Calendar.cy.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/main/cypress/specs/Calendar.cy.tsx b/packages/main/cypress/specs/Calendar.cy.tsx index c2e6763549ff..e544505c53b4 100644 --- a/packages/main/cypress/specs/Calendar.cy.tsx +++ b/packages/main/cypress/specs/Calendar.cy.tsx @@ -1,5 +1,4 @@ import Calendar from "../../src/Calendar.js"; -import Button from "../../src/Button.js"; import CalendarDate from "../../src/CalendarDate.js"; import CalendarDateRange from "../../src/CalendarDateRange.js"; import SpecialCalendarDate from "../../src/SpecialCalendarDate.js";