@ui5/webcomponents 2.8.1-rc.0 → 2.9.0-rc.1

package/cypress/specs/DateRangePicker.cy.tsx

@@ -0,0 +1,588 @@
+import "../../dist/Assets.js";
+import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import DateRangePicker from "../../src/DateRangePicker.js";
+
+describe("DateRangePicker general interaction", () => {
+	afterEach(() => {
+		// eslint-disable-next-line
+		cy.wait(200);
+	});
+	it("Custom Validation Error", () => {
+		cy.mount(<DateRangePicker formatPattern="dd/MM/yyyy"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realType("invalid input")
+			.realPress("Enter");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value-state", "Negative");
+	});
+
+	it("Custom Validation None", () => {
+		cy.mount(<DateRangePicker formatPattern="dd/MM/yyyy"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realType("09/09/2020 - 10/10/2020")
+			.realPress("Enter");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value-state", "None");
+	});
+
+	it("Selected dates are updated after value update in the input field", () => {
+		cy.mount(<DateRangePicker formatPattern="dd/MM/yyyy"></DateRangePicker>);
+
+		const timestamp_9_Sep_2020 = 1599609600;
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realType("09/09/2020 - 10/10/2020")
+			.realPress("Enter");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.shadow()
+			.find("ui5-calendar")
+			.shadow()
+			.find("ui5-daypicker")
+			.should("have.attr", "timestamp", timestamp_9_Sep_2020.toString());
+	});
+
+	it("Is delimiter set", () => {
+		cy.mount(<DateRangePicker formatPattern="MMM d, y" delimiter="@"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realType("Feb 25, 2022 @ Feb 28, 2022")
+			.realPress("Enter");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.invoke("attr", "delimiter", "###")
+			.should("have.attr", "value", "Feb 25, 2022 ### Feb 28, 2022");
+	});
+
+	it("startDateValue and endDateValue getter", () => {
+		cy.mount(<DateRangePicker formatPattern="dd/MM/yyyy"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realType("27/09/2019 - 10/10/2019")
+			.realPress("Enter");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.then($datePicker => {
+				cy.wrap({
+					startDateValue: () => $datePicker[0].startDateValue,
+					endDateValue: () => $datePicker[0].endDateValue
+				})
+					.as("dates")
+					.invoke("startDateValue")
+					.then(date => {
+						const timestamp = date ? date.getTime() : new Date().getTime();
+						expect(new Date(timestamp)).to.deep.equal(new Date(2019, 8, 27));
+					});
+
+				cy.get("@dates")
+					.invoke("endDateValue")
+					.then(date => {
+						const timestamp = date ? date.getTime() : new Date().getTime();
+						expect(new Date(timestamp as number)).to.deep.equal(new Date(2019, 9, 10));
+					});
+			});
+	});
+
+	it("Setting the same date for first & last is possible", () => {
+		cy.mount(<DateRangePicker formatPattern="dd/MM/yyyy"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realType("05/08/2020 - 05/08/2020")
+			.realPress("Enter");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.then($el => {
+				cy.wrap({
+					startDateValue: () => $el[0].startDateValue,
+					endDateValue: () => $el[0].endDateValue
+				})
+					.as("dates")
+					.invoke("startDateValue")
+					.then(date => {
+						const timestamp = date ? date.getTime() : new Date().getTime();
+						expect(new Date(timestamp)).to.deep.equal(new Date(2020, 7, 5));
+					});
+
+				cy.get("@dates")
+					.invoke("endDateValue")
+					.then(date => {
+						const timestamp = date ? date.getTime() : new Date().getTime();
+						expect(new Date(timestamp as number)).to.deep.equal(new Date(2020, 7, 5));
+					});
+			});
+	});
+
+	it("Change event fired once", () => {
+		cy.mount(<DateRangePicker></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-calendar")
+			.shadow()
+			.find("ui5-daypicker")
+			.shadow()
+			.find(".ui5-dp-root .ui5-dp-content div > .ui5-dp-item")
+			.as("items")
+			.eq(5)
+			.as("dayOne");
+
+		cy.get("@items")
+			.eq(15)
+			.as("dayTwo");
+
+		cy.get("@dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realPress("F4");
+
+		cy.get("@dateRangePicker")
+			.then($dateRangePicker => {
+				$dateRangePicker.on("change", cy.stub().as("changeStub"));
+			});
+
+		cy.get("@dayOne").realClick();
+		cy.get("@dayTwo").realClick();
+
+		cy.get("@changeStub").should("be.calledOnce");
+	});
+
+	it("Page up/down increments/decrements the day value", () => {
+		cy.mount(<DateRangePicker
+			formatPattern="MMM d, y"
+			value="Jul 16, 2020 @ Jul 29, 2020"
+			delimiter="@">
+		</DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.as("input")
+			.realClick()
+			.should("be.focused")
+			.realPress("End")
+			.realPress("PageDown");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jul 16, 2020 @ Jul 28, 2020");
+
+		cy.get("@input")
+			.realPress("PageUp");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jul 16, 2020 @ Jul 29, 2020");
+
+		cy.get("@input")
+			.realPress("Home")
+			.realPress("PageDown");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jul 15, 2020 @ Jul 29, 2020");
+
+		cy.get("@input")
+			.realPress("PageUp");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jul 16, 2020 @ Jul 29, 2020");
+	});
+
+	it("Page up/down increments/decrements the month value", () => {
+		cy.mount(<DateRangePicker
+			formatPattern="MMM d, y"
+			value="Jul 16, 2020 @ Jul 29, 2020"
+			delimiter="@"
+		></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.as("input")
+			.realClick()
+			.should("be.focused")
+			.realPress("End")
+			.realPress(["Shift", "PageUp"]);
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jul 16, 2020 @ Aug 29, 2020");
+
+		cy.get("@input")
+			.realPress(["Shift", "PageDown"]);
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jul 16, 2020 @ Jul 29, 2020");
+
+		cy.get("@input")
+			.realPress("Home")
+			.realPress(["Shift", "PageDown"]);
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jun 16, 2020 @ Jul 29, 2020");
+
+		cy.get("@input")
+			.realPress(["Shift", "PageUp"]);
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jul 16, 2020 @ Jul 29, 2020");
+	});
+
+	it("Page up/down increments/decrements the year value", () => {
+		cy.mount(<DateRangePicker
+			formatPattern="MMM d, y"
+			value="Jul 16, 2020 @ Jul 29, 2020"
+			delimiter="@">
+		</DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.as("input")
+			.realClick()
+			.should("be.focused")
+			.realPress("End")
+			.realPress(["Control", "Shift", "PageUp"]);
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jul 16, 2020 @ Jul 29, 2021");
+
+		cy.get("@input")
+			.realPress(["Control", "Shift", "PageDown"]);
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jul 16, 2020 @ Jul 29, 2020");
+
+		cy.get("@input")
+			.realPress("Home")
+			.realPress(["Control", "Shift", "PageDown"]);
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jul 16, 2019 @ Jul 29, 2020");
+
+		cy.get("@input")
+			.realPress(["Control", "Shift", "PageUp"]);
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jul 16, 2020 @ Jul 29, 2020");
+	});
+
+	it("Enter keyboard key confirms the date range in the input field", () => {
+		cy.mount(<DateRangePicker formatPattern="MMM d, y" delimiter="@"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realType("Jul 17, 2020 @ Jul 16, 2020")
+			.realPress("Enter");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jul 16, 2020 @ Jul 17, 2020");
+	});
+
+	it("Focus out of the input field confirms the date range", () => {
+		cy.mount(<DateRangePicker formatPattern="MMM d, y" delimiter="@"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realType("Jul 17, 2020 @ Jul 16, 2020")
+			.realPress("Tab");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value", "Jul 16, 2020 @ Jul 17, 2020");
+	});
+
+	it("Delimiter is part of the format pattern", () => {
+		cy.mount(<DateRangePicker formatPattern="yyyy-MM-dd"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realType("2020-09-09 - 2020-10-10")
+			.realPress("Enter");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value-state", "None");
+	});
+
+	it("Month name changes on next button press", () => {
+		cy.mount(<DateRangePicker value="09/09/2020 - 10/10/2020" formatPattern="dd/MM/yyyy"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-calendar")
+			.as("calendar")
+			.shadow()
+			.find(".ui5-calheader")
+			.as("calendarHeader");
+
+		cy.get("@dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realPress("F4");
+
+		cy.get("@calendarHeader")
+			.find("[data-ui5-cal-header-btn-next]")
+			.realClick()
+			.should("be.visible");
+
+		cy.get("@calendarHeader")
+			.find("[data-ui5-cal-header-btn-month]")
+			.as("monthButton")
+			.should("have.text", "October");
+	});
+
+	it("startDateValue and endDateValue getters when only start date is present", () => {
+		cy.mount(<DateRangePicker value="27/09/2019" formatPattern="dd/MM/yyyy"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.then($datePicker => {
+				cy.wrap({
+					startDateValue: () => $datePicker[0].startDateValue,
+					endDateValue: () => $datePicker[0].endDateValue
+				})
+					.as("dates")
+					.invoke("startDateValue")
+					.then(date => {
+						const timestamp = date ? date.getTime() : new Date().getTime();
+						expect(new Date(timestamp)).to.deep.equal(new Date(2019, 8, 27));
+					});
+
+				cy.get("@dates")
+					.invoke("endDateValue")
+					.then(date => {
+						expect(date.toString()).to.be.equal("Invalid Date");
+					});
+			});
+	});
+
+	it("Picker popover should have accessible name", () => {
+		cy.mount(<DateRangePicker></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realPress("F4");
+
+		cy.get("@dateRangePicker")
+			.shadow()
+			.find("ui5-responsive-popover")
+			.should("have.attr", "accessible-name", "Choose Date Range");
+	});
+
+	it("Selected days: accessibility semantics", () => {
+		cy.wrap({ setLanguage })
+			.invoke("setLanguage", "en");
+
+		cy.mount(<DateRangePicker formatPattern="dd/MM/yyyy"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realType("09/06/2024 - 15/06/2024")
+			.realPress("Enter")
+			.realPress("F4");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.shadow()
+			.find("ui5-calendar")
+			.shadow()
+			.find("ui5-daypicker")
+			.shadow()
+			.find(".ui5-dp-root .ui5-dp-content div > .ui5-dp-item")
+			.then(days => {
+				const startSelectionDay = days[14];
+				const dayInBetween = days[15];
+				const endSelectionDay = days[20];
+
+				expect(startSelectionDay).to.have.attr("aria-selected", "true");
+				expect(dayInBetween).to.have.attr("aria-selected", "true");
+				expect(endSelectionDay).to.have.attr("aria-selected", "true");
+			});
+	});
+
+	it("Min and max dates are set without format-pattern by using ISO (YYYY-MM-dd) format", () => {
+		cy.wrap({ setLanguage })
+			.invoke("setLanguage", "bg");
+
+		cy.mount(<DateRangePicker minDate="2023-02-10" maxDate="2023-07-22"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.shadow()
+			.find("input")
+			.realClick()
+			.should("be.focused")
+			.realType("10.02.2023 - 25.07.2023")
+			.realPress("Enter");
+
+		cy.get("@dateRangePicker")
+			.should("have.attr", "value-state", "Negative");
+	});
+
+	it("Should open month picker if format-pattern is 'MM.yyyy'", () => {
+		cy.mount(<DateRangePicker formatPattern="MM.yyyy"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realPress("F4");
+
+		cy.get("@dateRangePicker")
+			.shadow()
+			.find("ui5-calendar")
+			.shadow()
+			.find("ui5-monthpicker")
+			.should("exist")
+			.and("be.visible");
+	});
+
+	it("Select month range in MonthPicker", () => {
+		cy.wrap({ setLanguage })
+			.invoke("setLanguage", "en");
+
+		cy.mount(<DateRangePicker formatPattern="MM.yyyy"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realType("09.2024 - 11.2024")
+			.realPress("Enter")
+			.realPress("F4");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.shadow()
+			.find("ui5-calendar")
+			.shadow()
+			.find("ui5-monthpicker")
+			.shadow()
+			.find(".ui5-mp-root .ui5-mp-item")
+			.then(months => {
+				const startSelectionMonth = months[8];
+				const monthInBetween = months[9];
+				const endSelectionMonth = months[10];
+
+				expect(startSelectionMonth).to.have.class("ui5-mp-item--selected");
+				expect(monthInBetween).to.have.class("ui5-mp-item--selected-between");
+				expect(endSelectionMonth).to.have.class("ui5-mp-item--selected");
+			});
+	});
+
+	it("Should open year picker if format-pattern is 'yyyy'", () => {
+		cy.mount(<DateRangePicker formatPattern="yyyy"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realPress("F4");
+
+		cy.get("@dateRangePicker")
+			.shadow()
+			.find("ui5-calendar")
+			.shadow()
+			.find("ui5-yearpicker")
+			.should("exist")
+			.and("be.visible");
+	});
+
+	it("Select year range in YearPicker", () => {
+		cy.wrap({ setLanguage })
+			.invoke("setLanguage", "en");
+
+		cy.mount(<DateRangePicker formatPattern="yyyy"></DateRangePicker>);
+
+		cy.get<DateRangePicker>("[ui5-daterange-picker]")
+			.as("dateRangePicker")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused")
+			.realType("0001 - 0006")
+			.realPress("Enter")
+			.realPress("F4");
+
+		cy.get<DateRangePicker>("@dateRangePicker")
+			.shadow()
+			.find("ui5-calendar")
+			.shadow()
+			.find("ui5-yearpicker")
+			.shadow()
+			.find(".ui5-yp-root .ui5-yp-item")
+			.then(years => {
+				const startSelectionYear = years[0];
+				const yearInBetween = years[4];
+				const endSelectionYear = years[5];
+
+				expect(startSelectionYear).to.have.class("ui5-yp-item--selected");
+				expect(yearInBetween).to.have.class("ui5-yp-item--selected-between");
+				expect(endSelectionYear).to.have.class("ui5-yp-item--selected");
+			});
+	});
+});

package/cypress/specs/Input.cy.tsx

@@ -5,8 +5,10 @@ import SuggestionItemGroup from "../../src/SuggestionItemGroup.js";
 import Dialog from "../../src/Dialog.js";
 import Button from "../../src/Button.js";
 
+import add from "@ui5/webcomponents-icons/dist/add.js";
+
 describe("Input Tests", () => {
-	it("tets input event prevention", () => {
+	it("test input event prevention", () => {
 		cy.mount(
 			<Input></Input>
 		);
@@ -128,6 +130,45 @@ describe("Input Tests", () => {
 			.should("not.have.attr", "tabindex", "0");
 	});
 
+	it("tests tabindex of the div holding icon slot ", () => {
+		cy.mount(
+			<Input id="input"></Input>
+		);
+
+		cy.document().then(doc => {
+			const input = doc.querySelector<Input>("#input")!;
+			const icon = document.createElement("ui5-icon");
+			icon.setAttribute("slot", "icon");
+			icon.setAttribute("name", add);
+			icon.id = "icon";
+
+			input.addEventListener("focus", () => {
+				input.appendChild(icon);
+			});
+			input.addEventListener("focusout", () => {
+				input.removeChild(icon);
+			});
+		});
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		cy.get<Input>("@input").realClick();
+
+		cy.get("[ui5-icon]")
+			.as("icon");
+
+		cy.get("@icon")
+			.then($icon => {
+				$icon[0].addEventListener("click", cy.spy().as("click"));
+			});
+
+		cy.get("@icon").realClick();
+
+		cy.get("@click")
+			.should("have.been.calledOnce");
+	});
+
 	it("tests submit and change event order", () => {
 		cy.mount(
 			<form>
@@ -390,6 +431,22 @@ describe("Input general interaction", () => {
 			.eq(1)
 			.should("not.have.attr", "focused");
 	});
+
+	it("Should fire 'input' event when the value is cleared with ESC", () => {
+		cy.mount(
+			<Input></Input>
+		  );
+
+		  cy.get("[ui5-input]").then($input => {
+			  $input[0].addEventListener("ui5-input", cy.spy().as("inputEvent"));
+		  });
+
+		cy.get("[ui5-input]").realClick();
+		cy.get("[ui5-input]").realPress("a");
+		cy.get("[ui5-input]").realPress("Escape");
+
+		cy.get("@inputEvent").should("have.been.calledTwice");
+	});
 });
 
 describe("Input arrow navigation", () => {
@@ -764,3 +821,44 @@ describe("Change event behavior when selecting the same suggestion item", () =>
 			.should("have.attr", "open");
 	});
 });
+
+describe("Accessibility", () => {
+	it("tests accessibleDescription property", () => {
+		cy.mount(
+			<Input accessibleDescription="This is an input"></Input>
+		);
+
+		cy.get("[ui5-input]").as("input");
+
+		cy.get("@input")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-describedby", "accessibleDescription");
+		
+		cy.get("@input")
+			.shadow()
+			.find("span#accessibleDescription")
+			.should("have.text", "This is an input");
+	});
+
+	it("tests accessibleDescriptionRef property", () => {
+		cy.mount(
+			<>
+				<p id="inputDescription">This is an input</p>
+				<Input accessibleDescriptionRef="inputDescription"></Input>
+			</>
+		);
+
+		cy.get("[ui5-input]").as("input");
+
+		cy.get("@input")
+			.shadow()
+			.find("input")
+			.should("have.attr", "aria-describedby", "accessibleDescription");
+
+		cy.get("@input")
+			.shadow()
+			.find("span#accessibleDescription")
+			.should("have.text", "This is an input");
+	});
+});