@ui5/webcomponents 2.9.0-rc.0 → 2.9.0-rc.2

package/cypress/specs/DateTimePicker.cy.tsx

@@ -0,0 +1,445 @@
+import DateTimePicker from "../../src/DateTimePicker.js";
+import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+
+function DefaultDateTimePicker() {
+	return (
+		<DateTimePicker id="dt" />
+	);
+}
+
+function DateTimePickerWithMinutes() {
+	return <DateTimePicker
+		id="dtMinutes"
+		formatPattern="dd/MM/yyyy, hh:mm a"
+		value="13/04/2020, 09:16 AM"/>;
+}
+
+function DateTimePickerWithSeconds({ initialValue }: { initialValue?: string }) {
+	return (
+		<DateTimePicker
+			id="dtSeconds"
+			formatPattern="dd/MM/yyyy, hh:mm:ss a"
+			value={initialValue || "13/04/2020, 03:16:16 AM"}
+		/>
+	);
+}
+describe("DateTimePicker general interaction", () => {
+	it("tests picker opens/closes programmatically", () => {
+		cy.mount(<DefaultDateTimePicker />);
+
+		cy.ui5DateTimePickerOpen("#dt");
+		cy.ui5DateTimePickerIsOpen("#dt").should("equal", true);
+		cy.ui5DateTimePickerClose("#dt");
+		cy.ui5DateTimePickerIsOpen("#dt").should("equal", false);
+	});
+
+	// Unstable but valid test, needs to be individually observed
+	it.skip("tests selection of new date", () => {
+		setAnimationMode(AnimationMode.None);
+		const PREVIOUS_VALUE = "13/04/2020, 03:16:16 AM";
+
+		cy.mount(<DateTimePicker id="dtSeconds" formatPattern="dd/MM/yyyy, hh:mm:ss a" value={PREVIOUS_VALUE} />);
+		cy.ui5DateTimePickerOpen("#dtSeconds");
+
+		cy.get("#dtSeconds")
+			.shadow()
+			.as("DateTimePicker");
+
+		cy.get("@DateTimePicker")
+			.find("ui5-input")
+			.should("have.value", PREVIOUS_VALUE);
+
+		cy.ui5DateTimePickerGetPopover("#dtSeconds").within(() => {
+			// Click the currently selected day and then move to the next day.
+			cy.get("ui5-calendar")
+				.shadow()
+				.as("calendar");
+
+			cy.get("@calendar")
+				.find("ui5-daypicker")
+				.shadow()
+				.as("daypicker")
+
+			cy.get("@daypicker")
+				.find(".ui5-dp-item--selected")
+				.realClick()
+				.should("be.focused");
+
+			cy.realPress("ArrowRight");
+			cy.realPress("Space");
+
+			// Confirm the change.
+			cy.get("#ok").realClick();
+		});
+
+		// Only the date has changed; the time remains the same.
+		cy.get("@DateTimePicker")
+			.find("ui5-input")
+			.should("be.focused")
+			.should("have.attr", "value", "14/04/2020, 03:16:16 AM");
+
+		cy.ui5DateTimePickerIsOpen("#dtSeconds").should("equal", false);
+		setAnimationMode(AnimationMode.Full);
+	});
+
+	it("tests time controls adjustments", () => {
+		setAnimationMode(AnimationMode.None);
+		const PREVIOUS_VALUE = "13/04/2020, 03:16:16 AM";
+
+		cy.mount(<DateTimePicker id="dtSeconds" formatPattern="dd/MM/yyyy, hh:mm:ss a" value={PREVIOUS_VALUE} />);
+		cy.ui5DateTimePickerOpen("#dtSeconds");
+
+		cy.get("#dtSeconds")
+			.shadow()
+			.find("ui5-input")
+			.should("have.value", PREVIOUS_VALUE);
+
+		cy.ui5DateTimePickerGetPopover("#dtSeconds").within(() => {
+			// Adjust hours:
+			cy.get("ui5-time-selection-clocks")
+				.shadow()
+				.as("clocks");
+
+			cy.get("@clocks")
+				.find(`ui5-toggle-spin-button[data-ui5-clock="hours"]`)
+				.realClick()
+				.should("be.focused");
+
+			cy.realPress("ArrowDown");
+			cy.realPress("Space");
+
+			// Adjust minutes.
+			cy.get("@clocks")
+				.find(`ui5-toggle-spin-button[data-ui5-clock="minutes"]`)
+				.realClick()
+				.should("be.focused");
+
+			cy.realPress("ArrowDown");
+			cy.realPress("ArrowDown");
+			cy.realPress("Space");
+
+			// Adjust seconds.
+			cy.get("@clocks")
+				.find(`ui5-toggle-spin-button[data-ui5-clock="seconds"]`)
+				.realClick()
+				.should("be.focused");
+
+			cy.realPress("ArrowUp");
+			cy.realPress("ArrowUp");
+			cy.realPress("ArrowUp");
+			cy.realType("p");
+
+			// Confirm.
+			cy.get("#ok").realClick();
+		});
+
+		// Only the time parts have been updated.
+		cy.get("#dtSeconds")
+			.shadow()
+			.find("ui5-input")
+			.should("be.focused")
+			.should("have.attr", "value", "13/04/2020, 02:14:19 PM");
+
+		cy.ui5DateTimePickerIsOpen("#dtSeconds").should("equal", false);
+
+		setAnimationMode(AnimationMode.Full);
+	});
+
+	// Unstable test, needs investigation
+	it.skip("tests selection of new date without changing the time section", () => {
+		setAnimationMode(AnimationMode.None);
+
+		const PREVIOUS_VALUE = "14/04/2020, 02:14:19 PM";
+		cy.mount(<DateTimePickerWithSeconds initialValue={PREVIOUS_VALUE} />);
+
+		cy.get("#dtSeconds")
+			.shadow()
+			.find("ui5-input")
+			.should("have.value", PREVIOUS_VALUE);
+
+		// Simulate keyboard interactions
+		cy.realPress("Tab");
+		cy.realPress(["Shift", "Tab"]);
+		cy.realPress("Backspace");
+		cy.get("#dtSeconds")
+			.shadow()
+			.find("ui5-input")
+			.realClick()
+			.should("be.focused");
+		cy.realType("wrongtext");
+		cy.realPress("Tab");
+
+		cy.ui5DateTimePickerOpen("#dtSeconds");
+
+		// Act
+		let selectedDate = "";
+		cy.ui5DateTimePickerGetPopover("#dtSeconds").within(() => {
+			cy.get("ui5-calendar")
+				.shadow()
+				.as("calendar");
+			
+			cy.get("@calendar")
+				.find("ui5-daypicker")
+				.shadow()
+				.as("daypicker");
+			
+			cy.get("@daypicker")
+				.find(".ui5-dp-item--now")
+				.should("be.focused")
+				.then($el => {
+					const timestamp = $el.attr("data-sap-timestamp") || "";
+					const date = new Date(parseInt(timestamp) * 1000);
+					selectedDate = `${String(date.getDate()).padStart(2, "0")}/${String(date.getMonth() + 1).padStart(2, "0")}/${date.getFullYear()}`;
+				})
+				.realClick();
+
+			cy.get("#ok").realClick();
+		});
+
+		cy.get("#dtSeconds")
+			.shadow()
+			.find("ui5-input")
+			.should("be.focused")
+			.should("have.attr", "value", selectedDate + ", 02:14:19 PM");
+
+		setAnimationMode(AnimationMode.Full);
+	});
+
+	it("tests time controls for dtSeconds picker", () => {
+		const expectedClocksCount = 3;
+		const expectedPeriodCount = 1;
+
+		cy.mount(<DateTimePickerWithSeconds />);
+
+		cy.ui5DateTimePickerOpen("#dtSeconds");
+
+		cy.ui5DateTimePickerTimeSelectionClocksCount("#dtSeconds").then(clocksCount => {
+			expect(clocksCount).to.equal(expectedClocksCount,
+				"The picker should display 3 clocks for hours, minutes and seconds.");
+		});
+
+		cy.ui5DateTimePickerPeriodSegmentedButtonCount("#dtSeconds").then(periodCount => {
+			expect(periodCount).to.equal(expectedPeriodCount,
+				"The picker should display 1 period selector.");
+		});
+
+		cy.ui5DateTimePickerClose("#dtSeconds");
+	});
+
+	it("tests time controls for dtMinutes picker", () => {
+		const expectedClocksCount = 2;
+		const expectedPeriodCount = 1;
+
+		cy.mount(<DateTimePickerWithMinutes />);
+
+		cy.ui5DateTimePickerOpen("#dtMinutes");
+
+		cy.ui5DateTimePickerTimeSelectionClocksCount("#dtMinutes").then(clocksCount => {
+			expect(clocksCount).to.equal(expectedClocksCount,
+				"The picker should display 2 clocks for hours and minutes.");
+		});
+
+		cy.ui5DateTimePickerPeriodSegmentedButtonCount("#dtMinutes").then(periodCount => {
+			expect(periodCount).to.equal(expectedPeriodCount,
+				"The picker should display 1 period selector.");
+		});
+
+		cy.ui5DateTimePickerClose("#dtMinutes");
+	});
+
+	it("tests hours clock is active on picker open", () => {
+		cy.mount(<DefaultDateTimePicker />);
+		cy.ui5DateTimePickerOpen("#dt");
+
+		cy.ui5DateTimePickerGetPopover("#dt").within(() => {
+			cy.get("ui5-time-selection-clocks")
+				.shadow()
+				.as("clocks");
+
+			cy.get("@clocks")
+				.find(`ui5-time-picker-clock[data-ui5-clock="hours"]`)
+				.should("have.attr", "active", "");
+		});
+
+		cy.ui5DateTimePickerClose("#dt");
+		cy.ui5DateTimePickerIsOpen("#dt").should("equal", false);
+	});
+
+	// Unstable test, needs investigation
+	it.skip("tests selection of 12:34:56 AM", () => {
+		setAnimationMode(AnimationMode.None);
+
+		cy.mount(<DateTimePickerWithSeconds />);
+
+		cy.ui5DateTimePickerOpen("#dtSeconds");
+		cy.ui5DateTimePickerIsOpen("#dtSeconds").should("equal", true);
+
+		cy.ui5DateTimePickerGetPopover("#dtSeconds")
+			.within(() => {
+				cy.get("ui5-calendar")
+					.shadow()
+					.as("calendar");
+				
+				cy.get("@calendar")
+					.find("ui5-daypicker")
+					.shadow()
+					.as("daypicker");
+				
+				cy.get("@daypicker")
+					.find(".ui5-dp-item--selected")
+					.should("be.focused")
+					.realClick();
+
+				cy.get("ui5-time-selection-clocks")
+					.shadow()
+					.as("clocks");
+
+				cy.get("@clocks")
+					.find(`ui5-toggle-spin-button[data-ui5-clock="hours"]`)
+					.realClick()
+					.should("be.focused")
+					.realType("1")
+					.realType("2");
+
+				cy.get("@clocks")
+					.find(`ui5-toggle-spin-button[data-ui5-clock="minutes"]`)
+					.should("be.focused")
+					.realType("3")
+					.realType("4");
+
+				cy.get("@clocks")
+					.find(`ui5-toggle-spin-button[data-ui5-clock="seconds"]`)
+					.should("be.focused")
+					.realType("5")
+					.realType("6")
+					.realType("a");
+
+				cy.get("#ok").realClick();
+			});
+
+		cy.get("#dtSeconds")
+			.shadow()
+			.find("ui5-input")
+			.should("be.focused")
+			.should("have.attr", "value", "13/04/2020, 12:34:56 AM");
+
+		setAnimationMode(AnimationMode.Full);
+	});
+
+	it("tests change event is prevented on submit when prevent default is called", () => {
+		cy.mount(<DefaultDateTimePicker />);
+
+		// Prevent default behavior of ui5-change event.
+		cy.get("#dt").then($el => {
+			$el[0].addEventListener("ui5-change", (ev: Event) => {
+				ev.preventDefault();
+			});
+		});
+
+		cy.ui5DateTimePickerOpen("#dt");
+
+		cy.ui5DateTimePickerGetPopover("#dt").within(() => {
+			// Click the focused day and confirm the selection.
+			cy.get("ui5-calendar")
+				.shadow()
+				.as("calendar");
+
+			cy.get("@calendar")
+				.find("ui5-daypicker")
+				.shadow()
+				.as("daypicker");
+
+			cy.get("@daypicker")
+				.find("[data-sap-focus-ref]")
+				.should("be.focused")
+				.realClick();
+			cy.get("#ok").realClick();
+		});
+
+		cy.get("#dt")
+			.shadow()
+			.find("ui5-input")
+			.should("be.focused")
+			.should("have.attr", "value", "");
+	});
+
+	it("Min and max dates are set, with no format pattern provided, using valid ISO format", () => {
+		cy.mount(
+			<DateTimePicker
+				id="dtMinMaxDatesISO"
+				minDate="2023-05-01"
+				maxDate="2023-05-31"
+			></DateTimePicker>
+		);
+
+		cy.ui5DateTimePickerOpen("#dtMinMaxDatesISO");
+
+		cy.ui5DateTimePickerGetPopover("#dtMinMaxDatesISO").within(() => {
+			cy.get("ui5-calendar")
+				.shadow()
+				.find(".ui5-calheader")
+				.as("calHeader");
+
+			cy.get("@calHeader")
+				.find("div[data-ui5-cal-header-btn-prev]")
+				.should("have.class", "ui5-calheader-arrowbtn-disabled");
+
+			cy.get("@calHeader")
+				.find("div[data-ui5-cal-header-btn-next]")
+				.should("have.class", "ui5-calheader-arrowbtn-disabled");
+		});
+	});
+
+	it("picker popover should have accessible name", () => {
+		cy.mount(<DefaultDateTimePicker />);
+		cy.ui5DateTimePickerOpen("#dt");
+
+		cy.ui5DateTimePickerGetPopover("#dt")
+			.should("have.attr", "accessible-name", "Choose Date and Time");
+	});
+
+	// Unstable test, needs investigation
+	it.skip("tests change event is fired on submit", () => {
+		cy.mount(<DefaultDateTimePicker />);
+
+		const changeStub = cy.stub();
+		cy.get("#dt").then($el => {
+			$el[0].addEventListener("ui5-change", changeStub);
+		});
+
+		// Open the picker, select a date, and submit to fire the event
+		cy.ui5DateTimePickerOpen("#dt");
+		cy.ui5DateTimePickerGetPopover("#dt").within(() => {
+			cy.get("ui5-calendar")
+				.shadow()
+				.as("calendar");
+
+			cy.get("@calendar")
+				.find("ui5-daypicker")
+				.shadow()
+				.as("daypicker");
+			
+			cy.get("@daypicker")
+				.find("[data-sap-focus-ref]")
+				.realClick()
+				.should("be.focused");
+			cy.get("#ok").realClick();
+		});
+
+		// Assert the change event was fired once
+		cy.wrap(changeStub).should("have.been.calledOnce");
+
+		// Re-open the picker and submit without making a change
+		cy.ui5DateTimePickerOpen("#dt");
+		cy.ui5DateTimePickerGetPopover("#dt").within(() => {
+			cy.get("#ok").realClick();
+		});
+
+		// The change event should not have been fired a second time.
+		cy.wrap(changeStub).should("have.been.calledOnce");
+
+		// Verify the picker is closed
+		cy.ui5DateTimePickerIsOpen("#dt").should("equal", false);
+	});
+});

package/cypress/specs/DayPicker.cy.tsx

@@ -0,0 +1,81 @@
+import "../../src/Assets.js";
+import DayPicker from "../../src/DayPicker.js";
+import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
+
+function DefaultDayPicker() {
+	return <DayPicker id="daypicker"/>;
+}
+
+describe("Day Picker Tests", () => {
+	it("Select day with Space", () => {
+		cy.mount(<DefaultDayPicker />);
+		cy.get("#daypicker")
+			.shadow()
+			.find(".ui5-dp-item--now")
+			.as("today");
+		cy.get("@today")
+			.realClick()
+			.should("be.focused")
+			.realPress("ArrowRight")
+			.realPress("Space");
+		cy.focused()
+			.invoke("attr", "data-sap-timestamp")
+			.then(timestampAttr => {
+				const timestamp = parseInt(timestampAttr!);
+				const selectedDate = new Date(timestamp * 1000).getDate();
+				const expectedDate = new Date(Date.now() + 24 * 3600 * 1000).getDate();
+				expect(selectedDate).to.eq(expectedDate);
+			});
+	});
+
+	it("Select day with Enter", () => {
+		cy.mount(<DefaultDayPicker />);
+		cy.get("#daypicker")
+			.shadow()
+			.find(".ui5-dp-item--now")
+			.should("be.focused")
+			.as("today");
+
+		cy.get("@today")
+			.realClick()
+			.should("be.focused")
+			.realPress("ArrowRight")
+			.realPress("Enter");
+
+		cy.focused()
+			.invoke("attr", "data-sap-timestamp")
+			.then(timestampAttr => {
+				const timestamp = parseInt(timestampAttr!);
+				const selectedDate = new Date(timestamp * 1000).getDate();
+				const expectedDate = new Date(Date.now() + 24 * 3600 * 1000).getDate();
+				expect(selectedDate).to.eq(expectedDate);
+			});
+	});
+
+	it("Day names are correctly displayed when length is less than 3", () => {
+		cy.wrap({ setLanguage })
+			.invoke("setLanguage", "en");
+
+		cy.mount(<DefaultDayPicker />);
+		cy.get("#daypicker")
+			.shadow()
+			.find(".ui5-dp-firstday")
+			.first()
+			.should("have.text", "Sun");
+	});
+
+	it("Day names are correctly displayed when length is more than 3", () => {
+		// Set configuration first
+		cy.wrap({ setLanguage })
+			.invoke("setLanguage", "pt_PT");
+
+		cy.mount(<DefaultDayPicker />);
+
+		cy.get("#daypicker")
+			.shadow()
+			.find(".ui5-dp-firstday")
+			.first()
+			.should("have.text", "D");
+	});
+});

package/cypress/specs/Input.cy.tsx

@@ -431,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", () => {
@@ -805,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");
+	});
+});

package/cypress/specs/List.cy.tsx

@@ -151,3 +151,29 @@ describe("List Tests", () => {
 			.should("be.focused");
 	});
 });
+
+describe("List - Accessibility", () => {
+	it("tests active state announcement", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard type="Active" id="active">Laptop Lenovo</ListItemStandard>
+				<ListItemStandard type="Inactive" id="inactive">Laptop Lenovo</ListItemStandard>
+			</List>
+		);
+
+		// assert
+		cy.get("#active").invoke("prop", "_id").then(_id => {
+			cy.get("#active")
+				.shadow()
+				.find(`#${_id}-invisibleText`)
+				.should("have.text", "Is Active");
+		});
+
+		cy.get("#inactive").invoke("prop", "_id").then(_id => {
+			cy.get("#inactive")
+				.shadow()
+				.find(`#${_id}-invisibleText`)
+				.should("not.have.text", "Is Active");
+		});
+	});
+});

package/cypress/specs/MultiComboBox.cy.tsx

@@ -20,6 +20,42 @@ describe("Security", () => {
 	});
 });
 
+describe("General interaction", () => {
+	it("should be able to delete long tokens", () => {
+		cy.mount(
+			<MultiComboBox noValidation={true}>
+				<MultiComboBoxItem text="This is a token with ridicilously long long long text which should be deletable when the 'x' icon is clicked"></MultiComboBoxItem>
+			</MultiComboBox>
+		);
+
+		cy.get("[ui5-multi-combobox]")
+			.shadow()
+			.find("input")
+			.type('t');
+
+		cy.get("[ui5-multi-combobox]")
+			.shadow()
+			.find("input")
+			.realPress('Enter');
+
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-tokenizer]").then($tokenizer => {
+			$tokenizer[0].addEventListener("ui5-token-delete", cy.stub().as("tokenDelete"))
+		});
+
+		cy.get("[ui5-multi-combobox]")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-multi-combobox]").shadow()
+			.find("[ui5-tokenizer]")
+			.find("[ui5-token]").shadow()
+			.find("[ui5-icon]").realClick();
+
+		cy.get("@tokenDelete").should("have.been.called");
+	});
+});
+
 describe("Value State", () => {
 	it("should be able to change value states upon typing", () => {
 		cy.mount(

package/cypress/specs/MultiInput.cy.tsx

@@ -38,7 +38,10 @@ describe("MultiInput Web Component", () => {
 		cy.get("#suggestion-token")
 			.shadow()
 			.find("input")
-			.type("ad{enter}");
+			.realClick();
+
+		cy.realType("ad");
+		cy.realPress("Enter");
 
 		cy.get("ui5-multi-input")
 			.find("ui5-token")