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

package/cypress/specs/FormSupport.cy.tsx

@@ -875,6 +875,39 @@ describe("Form support", () => {
 			.should("be.equal", "time_picker3=ok&time_picker4=1:10:10 PM");
 	});
 
+	it("Button's click doesn't submit form on prevent default", () => {
+		cy.mount(<form method="get">
+			<Button id="b1" type="Submit">Preventable button</Button>
+		</form>);
+
+		cy.get("#b1")
+			.then($item => {
+				$item.get(0).addEventListener("ui5-click", e => e.preventDefault());
+				$item.get(0).addEventListener("ui5-click", cy.stub().as("click"));
+			});
+
+		cy.get("form")
+			.then($item => {
+				$item.get(0).addEventListener("submit", e => e.preventDefault());
+				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
+			});
+
+		cy.get("#b1")
+			.realClick();
+
+		cy.get("#b1")
+			.realPress("Enter");
+
+		cy.get("#b1")
+			.realPress("Space");
+
+		cy.get("@click")
+			.should("have.been.calledThrice");
+
+		cy.get("@submit")
+			.should("have.not.been.called");
+	});
+
 	it("Normal button does not submit forms", () => {
 		cy.mount(<form method="get">
 			<Button id="b1">Does not submit forms</Button>

package/cypress/specs/Input.cy.tsx

@@ -716,8 +716,7 @@ describe("Selection-change event", () => {
 
 		cy.get("@innerInput")
 			.realClick();
-		cy.get("@innerInput")
-			.clear();
+		cy.get("@innerInput").type("{selectall}{backspace}");
 
 		cy.get("@inputSelectionChange").should("have.been.calledTwice");
 

package/cypress/specs/Popover.cy.tsx

@@ -3,6 +3,40 @@ import Toolbar from "../../src/Toolbar.js";
 import Popover from "../../src/Popover.js";
 import Button from "../../src/Button.js";
 
+describe("Rendering", () => {
+	it("tests arrow positioning", () => {
+		cy.mount(
+			<>
+				<div id="icon1" tabindex="0" style="width: 10px; height: 10px; background:red;"></div>
+				<Popover id="popup"
+						 opener="icon1"
+						 headerText="Newsletter subscription"
+						 placement="End"
+						 verticalAlign="Top">
+					<Button id="btnClosePopover">Close</Button>
+				</Popover>
+			</>
+		);
+
+		// act
+		cy.get("#popup")
+			.invoke("prop", "open", "true");
+
+		cy.get("#popup")
+			.ui5PopoverOpened();
+
+		cy.get("#popup")
+			.shadow()
+			.find(".ui5-popover-arrow")
+			.should("be.visible");
+
+		cy.get("#popup")
+			.shadow()
+			.find(".ui5-popover-arrow")
+			.should("have.css", "transform", "matrix(1, 0, 0, 1, 0, -42)");
+	});
+});
+
 describe("Popover opener", () => {
 	it("tests 'opener' set as string of abstract element's ID ", () => {
 		cy.mount(
@@ -110,7 +144,7 @@ describe("Popover opener", () => {
 		});
 
 		cy.get("#popover")
-			.should("be.visible");
+			.ui5PopoverOpened();
 
 		cy.get("@showOutsideViewport")
 			.should("have.been.calledOnce");
@@ -129,7 +163,7 @@ describe("Popover interaction", () => {
 				</>
 			);
 
-			cy.get("#pop").should("be.visible");
+			cy.get("#pop").ui5PopoverOpened();
 
 			// act
 			cy.get("body").realClick();
@@ -148,13 +182,13 @@ describe("Popover interaction", () => {
 				</>
 			);
 
-			cy.get("#pop").should("be.visible");
+			cy.get("#pop").ui5PopoverOpened();
 
 			// act
 			cy.get("#opener").realClick();
 
 			// assert
-			cy.get("#pop").should("be.visible");
+			cy.get("#pop").ui5PopoverOpened();
 		});
 
 		it("tests clicking on the opener if both the popover and the opener are located in a shadow root", () => {
@@ -197,13 +231,13 @@ describe("Popover interaction", () => {
 			);
 
 			// assert
-			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").should("be.visible");
+			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").ui5PopoverOpened();
 
 			// act
 			cy.get("#openerShadowRooTest").shadow().find("button").realClick();
 
 			// assert
-			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").should("be.visible");
+			cy.get("#openerShadowRooTest").shadow().find("[ui5-popover]").ui5PopoverOpened();
 		});
 
 		it("tests clicking outside the popover when 'mousedown' event propagation is stopped", () => {
@@ -217,7 +251,7 @@ describe("Popover interaction", () => {
 				</>
 			);
 
-			cy.get("#pop").should("be.visible");
+			cy.get("#pop").ui5PopoverOpened();
 			cy.get("#btn").then(btn => {
 				btn.get(0).addEventListener("mousedown", event => {
 					event.stopPropagation();
@@ -334,7 +368,7 @@ describe("Events", () => {
 			.invoke("prop", "open", true);
 
 		cy.get("#popoverId")
-			.should("be.visible");
+			.ui5PopoverOpened();
 	});
 
 	it("before-close", () => {
@@ -356,7 +390,7 @@ describe("Events", () => {
 			.invoke("prop", "open", true);
 
 		cy.get("#popoverId")
-			.should("be.visible");
+			.ui5PopoverOpened();
 
 		const preventDefault = (e : Event) => {
 			e.preventDefault();
@@ -370,7 +404,7 @@ describe("Events", () => {
 			.invoke("prop", "open", false);
 
 		cy.get("#popoverId")
-			.should("be.visible");
+			.ui5PopoverOpened();
 
 		cy.get("#popoverId").then($popover => {
 			$popover.get(0).removeEventListener("before-close", preventDefault);

package/cypress/specs/Table.cy.tsx

@@ -64,6 +64,26 @@ describe("Table - Rendering", () => {
 		cy.wait(500);
 	});
 
+	it("tests if table is rendered with no data slot", () => {
+		cy.mount(
+			<Table id="table">
+				<TableHeaderRow slot="headerRow">
+					<TableHeaderCell></TableHeaderCell>
+				</TableHeaderRow>
+				<div slot="noData" id="noData">
+					<Label>No data found</Label>
+				</div>
+			</Table>
+		);
+
+		cy.get("#table").shadow().find('slot[name=noData]').as("noDataSlot");
+		cy.get("@noDataSlot").should("exist");
+		cy.get("@noDataSlot").then(($noDataSlot) => {
+			const noDataElement = ($noDataSlot[0] as HTMLSlotElement).assignedElements()[0];
+			cy.wrap(noDataElement).should("have.attr", "id", "noData")
+		});
+	});
+
 	it("columns have equal widths width default width", () => {
 		cy.mount(
 			<Table style="width: 400px;" id="table">

package/cypress/specs/TableGrowing.cy.tsx

@@ -151,7 +151,7 @@ describe("TableGrowing - Button", () => {
 				.should("have.been.calledTwice");
 		});
 
-		it("tests focus is set to first newly added row", () => {
+		it("tests focus is set to first newly added row - click", () => {
 			cy.mount(<TableSample></TableSample>);
 
 			cy.get<TableGrowing>("[ui5-table-growing]")
@@ -175,6 +175,30 @@ describe("TableGrowing - Button", () => {
 				.should("have.focus");
 		});
 
+		it("tests focus is set to first newly added row - ENTER", () => {
+			cy.mount(<TableSample></TableSample>);
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => {
+					tableGrowing.get(0).addEventListener("load-more", () => {
+						const table = document.getElementById("table");
+						const row = document.createElement("ui5-table-row");
+						row.id = "new-row";
+						row.innerHTML = "<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>";
+						table!.appendChild(row);
+					});
+				})
+				.trigger("keydown", { key: "Enter", code: "Enter", which: 13 });
+
+			cy.get("[ui5-table]")
+				.children("ui5-table-row")
+				.should("have.length", 2);
+
+			cy.get("#new-row")
+				.should("exist")
+				.should("have.focus");
+		});
+
 		it("tests focus is set to growing button when no new rows are added", () => {
 			cy.mount(<TableSample></TableSample>);
 
@@ -226,16 +250,34 @@ describe("TableGrowing - Scroll", () => {
 				.should("be.visible");
 
 			cy.get<TableGrowing>("[ui5-table-growing]")
-				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
+				.then(tableGrowing => {
+					tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore"));
+					tableGrowing.get(0).addEventListener("load-more", () => {
+						const table = document.getElementById("table");
+						Array.from({ length: 10 }).forEach(() => {
+							const row = document.createElement("ui5-table-row");
+							row.innerHTML = "<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>";
+							table!.appendChild(row);
+						});
+					});
+				});
 
-			cy.get("[ui5-table-row]:last-child")
+			for (let i = 0; i <= 5; i++) {
+				cy.get("[ui5-table-row]:last-child")
 				.scrollIntoView();
 
-			cy.get("[ui5-table-row]:last-child")
-				.should("be.visible");
+				cy.get("[ui5-table-row]:last-child")
+					.should("be.visible");
 
-			cy.get("@loadMore")
-				.should("have.been.calledOnce");
+				cy.get("@loadMore")
+					.should("have.been.calledOnce");
+
+				cy.get("#wrapper")
+					.then($wrapper => {
+						const wrapper = $wrapper.get(0);
+						expect(wrapper.scrollTop).to.be.greaterThan(0);
+					});
+			}
 		});
 
 		it("tests button fires load-more, button vanishes, scroll to end fires load-more", () => {
@@ -282,6 +324,12 @@ describe("TableGrowing - Scroll", () => {
 				cy.get("[ui5-table]")
 					.children("ui5-table-row")
 					.should("have.length", 1 + 10 * i);
+
+				cy.get("#wrapper")
+					.then($wrapper => {
+						const wrapper = $wrapper.get(0);
+						expect(wrapper.scrollTop).to.be.greaterThan(0);
+					});
 			}
 		});
 	});

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

@@ -1,60 +1,105 @@
-Cypress.Commands.add("ui5DateTimePickerOpen", selector => {
-	cy.get(selector)
-		.then($dateTimePicker => {
-			cy.wrap($dateTimePicker).invoke("attr", "open", true);
-		});
+import Button from "../../../src/Button.js";
+import type DateTimePicker from "../../../src/DateTimePicker.js";
+import type ResponsivePopover from "../../../src/ResponsivePopover.js";
+
+Cypress.Commands.add("ui5DateTimePickerOpen", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	cy.wrap(subject).invoke("prop", "open", true);
+});
+
+Cypress.Commands.add("ui5DateTimePickerClose", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	cy.wrap(subject).invoke("prop", "open", false);
 });
 
-Cypress.Commands.add("ui5DateTimePickerClose", selector => {
-	cy.get(selector).invoke("attr", "open", false);
+Cypress.Commands.add("ui5DateTimePickerGetPopover", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
+		.shadow()
+		.find<ResponsivePopover>("[ui5-responsive-popover]");
 });
 
-Cypress.Commands.add("ui5DateTimePickerGetPopover", selector => {
-	return cy.get(selector)
+Cypress.Commands.add("ui5DateTimePickerExpectToBeOpen", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	cy.wrap(subject)
+		.should("have.prop", "open", true);
+
+	cy.wrap(subject)
 		.shadow()
-		.find("ui5-responsive-popover");
+		.find<ResponsivePopover>("[ui5-responsive-popover]")
+		.ui5ResponsivePopoverOpened();
 });
 
-Cypress.Commands.add("ui5DateTimePickerIsOpen", selector => {
-	return cy
-		.get(selector)
-		.invoke("attr", "open")
-		.then(attr => Boolean(attr));
+Cypress.Commands.add("ui5DateTimePickerExpectToBeClosed", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	cy.wrap(subject)
+		.should("have.prop", "open", false);
+
+	cy.wrap(subject)
+		.shadow()
+		.find<ResponsivePopover>("[ui5-responsive-popover]")
+		.ui5ResponsivePopoverClosed();
 });
 
-Cypress.Commands.add("ui5DateTimePickerGetSubmitButton", selector => {
-	return cy.get(selector)
+Cypress.Commands.add("ui5DateTimePickerGetSubmitButton", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
 		.shadow()
-		.find("ui5-responsive-popover")
-		.find("#ok");
+		.find("[ui5-responsive-popover]")
+		.find<Button>("#ok");
 });
 
-Cypress.Commands.add("ui5DateTimePickerGetCancelButton", selector => {
-	return cy
-		.get(selector)
+Cypress.Commands.add("ui5DateTimePickerGetCancelButton", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
 		.shadow()
-		.find("ui5-responsive-popover")
-		.find("#cancel");
+		.find("[ui5-responsive-popover]")
+		.find<Button>("#cancel");
 });
 
-Cypress.Commands.add("ui5DateTimePickerTimeSelectionClocksCount", selector => {
-	return cy
-		.get(selector)
+Cypress.Commands.add("ui5DateTimePickerTimeSelectionClocksCount", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
 		.shadow()
-		.find("ui5-responsive-popover")
-		.find("ui5-time-selection-clocks")
+		.find("[ui5-responsive-popover]")
+		.find("[ui5-time-selection-clocks]")
 		.shadow()
-		.find("ui5-time-picker-clock")
+		.find("[ui5-time-picker-clock]")
 		.its("length");
 });
 
-Cypress.Commands.add("ui5DateTimePickerPeriodSegmentedButtonCount", selector => {
-	return cy
-		.get(selector)
+Cypress.Commands.add("ui5DateTimePickerPeriodSegmentedButtonCount", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
 		.shadow()
-		.find("ui5-responsive-popover")
-		.find("ui5-time-selection-clocks")
+		.find("[ui5-responsive-popover]")
+		.find("[ui5-time-selection-clocks]")
 		.shadow()
-		.find("ui5-segmented-button")
+		.find("[ui5-segmented-button]")
 		.its("length");
 });
+
+declare global {
+	namespace Cypress {
+		interface Chainable {
+			ui5DateTimePickerOpen(
+				this: Chainable<JQuery<DateTimePicker>>,
+			): Chainable<void>;
+			ui5DateTimePickerExpectToBeOpen(
+				this: Chainable<JQuery<DateTimePicker>>,
+			): Chainable<void>;
+			ui5DateTimePickerClose(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<void>;
+			ui5DateTimePickerExpectToBeClosed(
+				this: Chainable<JQuery<DateTimePicker>>,
+			): Chainable<void>;
+			ui5DateTimePickerGetPopover(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<JQuery<ResponsivePopover>>;
+			ui5DateTimePickerGetSubmitButton(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<JQuery<Button>>;
+			ui5DateTimePickerGetCancelButton(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<JQuery<Button>>;
+			ui5DateTimePickerTimeSelectionClocksCount(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<number>;
+			ui5DateTimePickerPeriodSegmentedButtonCount(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<number>;
+		}
+	}
+}

package/cypress/support/commands.ts

@@ -101,6 +101,10 @@ Cypress.Commands.add("ui5SimulateDevice", (device: SimulationDevices = "phone")
 			return true;
 		});
 
+	if (device === "phone") {
+		cy.stub(internals, "windows").value(false);
+	}
+
 	cy.viewport(deviceName[device]);
 
 	cy.wrap({ isPhone })