@ui5/webcomponents 2.9.0-rc.1 → 2.9.0-rc.3

package/cypress/specs/Input.cy.tsx

@@ -763,6 +763,66 @@ describe("Change event behavior when selecting the same suggestion item", () =>
 		});
 	});
 
+	it("Change event fires after typing a new value following a clear icon click", () => {
+		cy.mount(
+			<>
+				<Input showClearIcon={true}></Input>
+			</>
+		);
+
+		cy.get("ui5-input")
+			.as("input");
+
+		cy.get("@input")
+			.then($input => {
+				$input[0].addEventListener("ui5-change", cy.stub().as("inputChange"));
+			});
+
+		cy.get("@input")
+			.click();
+
+		cy.get("@input")
+			.realType("Albania");
+
+		cy.get("@input")
+			.realPress("Enter");
+
+		cy.get("@inputChange")
+			.should("have.been.calledOnce");
+
+		cy.get("@input")
+			.shadow()
+			.find("ui5-icon")
+			.as("icon");
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@input")
+			.should("have.attr", "value", "");
+
+		cy.get("@input")
+			.realType("Argentina");
+
+		cy.get("@input")
+			.realPress("Enter");
+
+		cy.get("@inputChange")
+			.should("have.been.calledTwice");
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("@input")
+			.realType("Argentina");
+
+		cy.get("@input")
+			.realPress("Enter");
+
+		cy.get("@inputChange")
+			.should("have.been.calledTwice");
+	});
+
 	it("should not close the dialog when item is selected", () => {
 		cy.mount(
 			<>
@@ -834,7 +894,7 @@ describe("Accessibility", () => {
 			.shadow()
 			.find("input")
 			.should("have.attr", "aria-describedby", "accessibleDescription");
-		
+
 		cy.get("@input")
 			.shadow()
 			.find("span#accessibleDescription")

package/cypress/specs/Popover.cy.tsx

@@ -62,6 +62,59 @@ describe("Popover opener", () => {
 		});
 		cy.get("#btnClosePopover").realClick();
 	});
+
+	it("tests calling _showOutsideViewport method", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<Popover id="popover" opener="btnOpen">
+					<Button id="btnClosePopover">Close</Button>
+				</Popover>
+			</>
+		);
+
+		cy.get("#popover").then(el => {
+			cy.spy<Popover>((el.get(0) as Popover), "_showOutsideViewport").as("showOutsideViewport");
+		});
+
+		// act
+		cy.get("#popover").invoke("prop", "open", "true");
+
+		cy.get("@showOutsideViewport")
+			.should("have.been.calledOnce");
+	});
+
+	it("tests calling _showOutsideViewport method, when popover is created dynamically", () => {
+		cy.mount(
+			<>
+				<div id="container"></div>
+				<Button id="btnOpen">Open</Button>
+			</>
+		);
+
+		cy.get("#container").then(container => {
+			const popover = document.createElement("ui5-popover");
+
+			cy.spy<Popover>((popover as Popover), "_showOutsideViewport").as("showOutsideViewport");
+
+			popover.id = "popover";
+			popover.headerText = "Popover Header";
+			popover.opener = "btnOpen";
+			popover.open = true;
+
+			const content = document.createElement("div");
+			content.innerHTML = "<button id='popoverBtn'>button</button>";
+			popover.appendChild(content);
+
+			container.get(0).appendChild(popover);
+		});
+
+		cy.get("#popover")
+			.should("be.visible");
+
+		cy.get("@showOutsideViewport")
+			.should("have.been.calledOnce");
+	});
 });
 
 describe("Popover interaction", () => {

package/cypress/specs/Select.cy.tsx

@@ -3,6 +3,158 @@ import OptionCustom from "../../src/OptionCustom.js";
 import Select from "../../src/Select.js";
 import download from "@ui5/webcomponents-icons/dist/download.js";
 
+describe("Select - value handling", () => {
+	it("tests selection via Select's value", () => {
+		cy.mount(
+			<>
+				<Select value="option2">
+					<Option id="opt1" value="option1">Option 1</Option>
+					<Option id="opt2" value="option2">Option 2</Option>
+					<Option id="opt3" value="option3">Option 3</Option>
+				</Select>
+
+				<Select value="option6">
+					<Option id="opt4" value="option4">Option 4</Option>
+					<Option id="opt5" value="option5">Option 5</Option>
+					<Option id="opt6" value="option6">Option 6</Option>
+				</Select>
+			</>
+		);
+
+		cy.get("#opt2").should("have.attr", "selected");
+		cy.get("#opt6").should("have.attr", "selected");
+	});
+
+	it("tests Select's value has precedence over Option's selected", () => {
+		cy.mount(
+			<>
+				<Select value="option1">
+					<Option id="opt1" value="option1">Option 1</Option>
+					<Option id="opt2" value="option2">Option 2</Option>
+					<Option id="opt3" value="option3" selected={true}>Option 3</Option>
+				</Select>
+
+				<Select value="option6">
+					<Option id="opt4" value="option4">Option 4</Option>
+					<Option id="opt5" value="option5" selected={true}>Option 5</Option>
+					<Option id="opt6" value="option6">Option 6</Option>
+				</Select>
+			</>
+		);
+
+		// assert that Select's value is preferred over Option's selected
+		cy.get("#opt1").should("have.attr", "selected");
+		cy.get("#opt3").should("not.have.attr", "selected");
+		cy.get("#opt5").should("not.have.attr", "selected");
+		cy.get("#opt6").should("have.attr", "selected");
+	});
+
+	it("tests Select's value of an option, added with delay", () => {
+		const addOption = () => {
+			const newOption = document.createElement("ui5-option") as Option;
+			newOption.id = "opt3";
+			newOption.value = "option3";
+			newOption.textContent = "Option 3";
+			document.getElementById("sel")?.appendChild(newOption);
+		};
+
+		cy.mount(
+			<Select id="sel" value="option3">
+				<Option id="opt1" value="option1">Option 1</Option>
+				<Option id="opt2" value="option2">Option 2</Option>
+			</Select>
+		);
+
+		cy.get("#opt3").should("not.exist");
+
+		cy.wrap(addOption).invoke("call");
+
+		// assert "Option 3" is selected although added after the Select was mounted
+		cy.get("#opt3").should("have.attr", "selected");
+	});
+
+	it("tests Select's value set with a delay", () => {
+		const setValue = () => {
+			const select = document.getElementById("sel") as Select;
+			select.value = "option2";
+		};
+
+		cy.mount(
+			<Select id="sel">
+				<Option id="opt1" value="option1">Option 1</Option>
+				<Option id="opt2" value="option2">Option 2</Option>
+				<Option id="opt3" value="option3">Option 3</Option>
+			</Select>
+		);
+
+		cy.wrap(setValue).invoke("call");
+
+		// assert "Option 2" is selected after dynamic value change
+		cy.get("#opt2").should("have.attr", "selected");
+	});
+
+	it("tests Select's value of a missing option - auto-selects firsts", () => {
+		cy.mount(
+			<Select id="sel" value="option3">
+				<Option id="opt1" value="option1">Option 1</Option>
+				<Option id="opt2" value="option2">Option 2</Option>
+			</Select>
+		);
+
+		// assert: Value remains "option3"
+		cy.get("#sel")
+			.should("have.attr", "value", "option3")
+			.invoke("prop", "value", "option3");
+
+		// assert: no option is selected - the Select is displayed empty
+		cy.get("#opt1").should("not.have.attr", "selected");
+		cy.get("#opt2").should("not.have.attr", "selected");
+	});
+
+	it("tests Select's value updated after user interaction", () => {
+		cy.mount(
+			<Select id="sel" value="option3">
+				<Option id="opt1" value="option1">Option 1</Option>
+				<Option id="opt2" value="option2">Option 2</Option>
+				<Option id="opt3" value="option3">Option 3</Option>
+			</Select>
+		);
+
+		cy.get("#sel")
+			.realClick();
+
+		cy.get("#sel")
+			.should("have.attr", "opened");
+
+		// act: select first option with click
+
+		cy.get("#sel")
+			.find("[ui5-option]")
+			.eq(0)
+			.realClick();
+
+		// assert: value is updated after user interaction
+		cy.get("#sel")
+			.should("have.attr", "value", "option1")
+			.invoke("prop", "value", "option1");
+
+		// act: select second option with keyboard
+		cy.get("#sel")
+			.realClick();
+
+		cy.get("#sel")
+			.realPress("ArrowDown");
+
+		cy.get("#sel")
+			.realPress("Enter");
+
+		// assert: value is updated after ArrowDown + Enter
+		cy.get("#sel")
+		.should("have.attr", "value", "option2")
+		.invoke("prop", "value", "option2");
+	});
+});
+
 describe("Select - Accessibility", () => {
 	it("tests options tooltip is set displayed", () => {
 		const EXPECTED_TOOLTIP = "Tooltip";

package/cypress/specs/TableGrowing.cy.tsx

@@ -22,7 +22,7 @@ function TableGrowingSample(props: { rowCount: number, overflow: boolean }) {
 	return (
 		<div id="wrapper" style={{ height: "200px", overflow: props.overflow ? "auto" : "" }}>
 			<Table id="table">
-				<TableGrowing slot="features" type="Scroll"></TableGrowing>
+				<TableGrowing slot="features" mode="Scroll"></TableGrowing>
 				<TableHeaderRow slot="headerRow">
 					<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
 				</TableHeaderRow>
@@ -43,10 +43,10 @@ describe("TableGrowing - Button", () => {
 
 			cy.get("[ui5-table-growing]")
 				.shadow()
-				.find("#growing-button")
+				.find("#button")
 				.should("exist")
 				.should("have.attr", "role", "button")
-				.should("have.attr", "aria-labelledby", "growing-text growing-subtext");
+				.should("have.attr", "aria-labelledby", "text subtext");
 
 			cy.get("[ui5-table")
 				.shadow()
@@ -55,17 +55,17 @@ describe("TableGrowing - Button", () => {
 
 			cy.get("[ui5-table-growing]")
 				.shadow()
-				.find("#growing-text")
+				.find("#text")
 				.should("have.text", "More");
 		});
 
 		it("tests correct custom texts are rendered", () => {
-			const growingText = "My Custom Growing Text",
-				growingSubtext = "My Custom Growing Subtext";
+			const text = "My Custom Growing Text",
+				subtext = "My Custom Growing Subtext";
 
 			cy.mount(
 				<Table>
-					<TableGrowing slot="features" growingText={growingText} growingSubText={growingSubtext} />
+					<TableGrowing slot="features" text={text} subtext={subtext} />
 					<TableHeaderRow slot="headerRow">
 						<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
 					</TableHeaderRow>
@@ -77,20 +77,20 @@ describe("TableGrowing - Button", () => {
 
 			cy.get("[ui5-table-growing]")
 				.shadow()
-				.find("#growing-button")
+				.find("#button")
 				.should("exist")
 				.should("have.attr", "role", "button")
-				.should("have.attr", "aria-labelledby", "growing-text growing-subtext");
+				.should("have.attr", "aria-labelledby", "text subtext");
 
 			cy.get("[ui5-table-growing]")
 				.shadow()
-				.find("#growing-text")
-				.should("have.text", growingText);
+				.find("#text")
+				.should("have.text", text);
 
 			cy.get("[ui5-table-growing]")
 				.shadow()
-				.find("#growing-subtext")
-				.should("have.text", growingSubtext);
+				.find("#subtext")
+				.should("have.text", subtext);
 		});
 
 		it("tests growing button not shown when no data", () => {
@@ -130,7 +130,7 @@ describe("TableGrowing - Button", () => {
 
 			cy.get<TableGrowing>("[ui5-table-growing]")
 				.shadow()
-				.find("#growing-button")
+				.find("#button")
 				.should("be.visible")
 				.focus();
 
@@ -141,7 +141,7 @@ describe("TableGrowing - Button", () => {
 
 			cy.get<TableGrowing>("[ui5-table-growing]")
 				.shadow()
-				.find("#growing-button")
+				.find("#button")
 				.should("be.visible")
 				.focus();
 
@@ -194,7 +194,7 @@ describe("TableGrowing - Scroll", () => {
 
 			cy.get("[ui5-table-growing]")
 				.shadow()
-				.find("#growing-button")
+				.find("#button")
 				.should("not.be.visible");
 
 			cy.get("[ui5-table]")
@@ -208,7 +208,7 @@ describe("TableGrowing - Scroll", () => {
 
 			cy.get("[ui5-table-growing]")
 				.shadow()
-				.find("#growing-button")
+				.find("#button")
 				.should("exist");
 
 			cy.get("[ui5-table]")
@@ -264,7 +264,7 @@ describe("TableGrowing - Scroll", () => {
 
 			cy.get("[ui5-table-growing]")
 				.shadow()
-				.find("#growing-button")
+				.find("#button")
 				.should("not.be.visible");
 
 			cy.get("[ui5-table]")

package/cypress/specs/TableNavigation.cy.tsx

@@ -118,11 +118,11 @@ describe("Table - Keyboard Navigation", () => {
 			{ element: cy.get("@rows").eq(1), type: "{pagedown}", condition: "be.focused" },
 			{ element: cy.get("@rows").eq(21), type: "{pagedown}", condition: "be.focused" },
 			{ element: cy.get("@rows").eq(24), type: "{pagedown}", condition: "be.focused" },
-			{ element: cy.get("#growing").shadow().find("#growing-button"), type: "{pageup}", condition: "be.focused" },
+			{ element: cy.get("#growing").shadow().find("#button"), type: "{pageup}", condition: "be.focused" },
 			{ element: cy.get("@rows").eq(5), type: "{pageup}", condition: "be.focused" },
 			{ element: cy.get("@rows").eq(0), type: "{end}", condition: "be.focused" },
 			{ element: cy.get("@rows").eq(24), type: "{end}", condition: "be.focused" },
-			{ element: cy.get("#growing").shadow().find("#growing-button"), type: "{home}", condition: "be.focused" },
+			{ element: cy.get("#growing").shadow().find("#button"), type: "{home}", condition: "be.focused" },
 			{ element: cy.get("@rows").eq(0), type: "{home}", condition: "be.focused" },
 			{ element: cy.get("@headerRow"), condition: "be.focused" }
 		]);
@@ -146,7 +146,7 @@ describe("Table - Keyboard Navigation", () => {
 			{ element: getCell(0, 0, true), type: "{pagedown}", condition: "be.focused" },
 			{ element: getCell(19, 0, false), type: "{pagedown}", condition: "be.focused" },
 			{ element: getCell(24, 0, false), type: "{pagedown}", condition: "be.focused" },
-			{ element: cy.get("#growing").shadow().find("#growing-button"), type: "{home}", condition: "be.focused" },
+			{ element: cy.get("#growing").shadow().find("#button"), type: "{home}", condition: "be.focused" },
 			{ element: cy.get("@rows").eq(0), type: "{home}", condition: "be.focused" },
 			{ element: cy.get("@headerRow"), type: "{downarrow}{rightarrow}", condition: "be.focused" },
 			{ element: getCell(0, 0, false), type: "{downarrow}{rightarrow}", condition: "be.focused" },

package/cypress/specs/TableRowActions.cy.tsx

@@ -64,10 +64,14 @@ describe("TableRowActions", () => {
 			cy.get("@row3").find("ui5-table-row-action-navigation").shadow().find("ui5-icon").should("have.attr", "name", "navigation-right-arrow");
 			cy.get("@row4").find("ui5-table-row-action-navigation").shadow().find("ui5-button").should("have.attr", "icon", "navigation-right-arrow");
 
+			cy.get("#addAction").invoke("on", "click", cy.stub().as("addActionClick"));
 			cy.get("#addAction").realClick();
+			cy.get("@addActionClick").should("have.been.calledOnce");
 			cy.get("@rowActionClick").invoke("getCall", 0).its("args.0.detail.row.id").should("equal", "addRow");
 			cy.get("@rowActionClick").invoke("getCall", 0).its("args.0.detail.action.id").should("equal", "addAction");
+			cy.get("#navigationAction").invoke("on", "click", cy.stub().as("navigationActionClick"));
 			cy.get("#navigationAction").realClick();
+			cy.get("@navigationActionClick").should("have.been.calledOnce");
 			cy.get("@rowActionClick").invoke("getCall", 1).its("args.0.detail.row.id").should("equal", "navigationRow");
 			cy.get("@rowActionClick").invoke("getCall", 1).its("args.0.detail.action.id").should("equal", "navigationAction");
 
@@ -104,7 +108,9 @@ describe("TableRowActions", () => {
 			cy.get("@menuItems").eq(1).should("have.attr", "text", "Edit").and("have.attr", "icon", "edit");
 			cy.get("@menuItems").eq(2).should("have.attr", "text", "Delete").and("have.attr", "icon", "delete");
 
+			cy.get("#addAction").invoke("on", "click", cy.stub().as("addActionClick"));
 			cy.get("@menuItems").eq(0).ui5MenuItemClick();
+			cy.get("@addActionClick").should("have.been.calledOnce");
 			cy.get("@rowActionClick").invoke("getCall", 0).its("args.0.detail.action.id").should("equal", "addAction");
 			cy.get("ui5-menu").invoke("get", 0).its("open").should("be.false");
 

package/cypress/specs/Tree.cy.tsx

@@ -28,3 +28,21 @@ describe("Tree Tests", () => {
 			.and("have.attr", "accessible-description-ref", "lblDesc2");
 	});
 });
+
+describe("Tree Props", () => {
+	it("noDataText is properly rendered", () => {
+		cy.mount(
+			<>
+				<Tree noDataText="No data"></Tree>
+			</>
+		);
+
+		cy.get("[ui5-tree]")
+			.shadow()
+			.find("[ui5-tree-list]")
+			.shadow()
+			.find("[ui5-busy-indicator]")
+			.find(".ui5-list-nodata")
+			.should("exist")
+	});
+});

package/cypress/support/commands/Calendar.commands.ts

@@ -1,9 +1,15 @@
 Cypress.Commands.add("ui5CalendarGetDay", (calendarSelector, timestamp) => {
-	return cy.get(calendarSelector)
+	cy.get(calendarSelector)
+		.as("calendar");
+	
+	cy.get("@calendar")
 		.shadow()
 		.find("[ui5-daypicker]")
-		.shadow()
-		.find(`div[data-sap-timestamp=${timestamp}]`);
+		.as("daypicker");
+	
+	return cy.get("@daypicker")
+			.shadow()
+			.find(`div[data-sap-timestamp=${timestamp}]`);
 });
 
 Cypress.Commands.add("ui5CalendarGetMonth", (calendarSelector, timestamp) => {

package/cypress/support/commands/ColorPicker.commands.ts

@@ -22,3 +22,17 @@ Cypress.Commands.add("ui5ColorPickerUpdateInput", { prevSubject: true }, (subjec
 		.realType(value)
 		.realPress("Enter");
 });
+
+Cypress.Commands.add("ui5ColorPickerValidateInput", { prevSubject: true }, (subject, name, value) => {
+	cy.wrap(subject)
+		.as("colorPicker")
+		.should("be.visible");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find(name)
+		.as("input");
+
+	cy.get("@input")
+		.should("have.value", value);
+});

package/cypress/support/commands/DatePicker.commands.ts

@@ -4,7 +4,7 @@ Cypress.Commands.add("ui5DatePickerGetInnerInput", { prevSubject: true }, subjec
 
 	cy.get("@datePicker")
 		.shadow()
-		.find("ui5-input")
+		.find("ui5-datetime-input")
 		.shadow()
 		.find("input")
 		.as("innerInput");

package/cypress/support/commands/DateTimePicker.commands.ts

@@ -0,0 +1,60 @@
+Cypress.Commands.add("ui5DateTimePickerOpen", selector => {
+	cy.get(selector)
+		.then($dateTimePicker => {
+			cy.wrap($dateTimePicker).invoke("attr", "open", true);
+		});
+});
+
+Cypress.Commands.add("ui5DateTimePickerClose", selector => {
+	cy.get(selector).invoke("attr", "open", false);
+});
+
+Cypress.Commands.add("ui5DateTimePickerGetPopover", selector => {
+	return cy.get(selector)
+		.shadow()
+		.find("ui5-responsive-popover");
+});
+
+Cypress.Commands.add("ui5DateTimePickerIsOpen", selector => {
+	return cy
+		.get(selector)
+		.invoke("attr", "open")
+		.then(attr => Boolean(attr));
+});
+
+Cypress.Commands.add("ui5DateTimePickerGetSubmitButton", selector => {
+	return cy.get(selector)
+		.shadow()
+		.find("ui5-responsive-popover")
+		.find("#ok");
+});
+
+Cypress.Commands.add("ui5DateTimePickerGetCancelButton", selector => {
+	return cy
+		.get(selector)
+		.shadow()
+		.find("ui5-responsive-popover")
+		.find("#cancel");
+});
+
+Cypress.Commands.add("ui5DateTimePickerTimeSelectionClocksCount", selector => {
+	return cy
+		.get(selector)
+		.shadow()
+		.find("ui5-responsive-popover")
+		.find("ui5-time-selection-clocks")
+		.shadow()
+		.find("ui5-time-picker-clock")
+		.its("length");
+});
+
+Cypress.Commands.add("ui5DateTimePickerPeriodSegmentedButtonCount", selector => {
+	return cy
+		.get(selector)
+		.shadow()
+		.find("ui5-responsive-popover")
+		.find("ui5-time-selection-clocks")
+		.shadow()
+		.find("ui5-segmented-button")
+		.its("length");
+});

package/cypress/support/commands.ts

@@ -43,6 +43,7 @@ import { internals, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import "./commands/Calendar.commands.js";
 import "./commands/ColorPalette.commands.js";
 import "./commands/ColorPicker.commands.js";
+import "./commands/DateTimePicker.commands.js";
 import "./commands/DatePicker.commands.js";
 import "./commands/Menu.commands.js";
 import "./commands/SegmentedButton.commands.js";
@@ -62,6 +63,7 @@ declare global {
 			ui5CalendarGetMonth(calendarSelector: string, timestamp: string): Chainable<JQuery<HTMLElement>>
 			ui5ColorPickerToggleColorMode(): Chainable<void>
 			ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
+			ui5ColorPickerValidateInput(name: string, value: string): Chainable<void>
 			ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
 			ui5ColorPaletteNavigateAndCheckSelectedColor(colorPalette: string, startIndex: number, key: string, expectedValue: string): Chainable<void>
 			ui5DatePickerGetInnerInput(): Chainable<JQuery<HTMLElement>>