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

package/cypress/specs/Carousel.mobile.cy.tsx

@@ -0,0 +1,67 @@
+import Button from "../../src/Button.js";
+import Carousel from "../../src/Carousel.js";
+
+describe("Carousel general interaction", () => {
+	before(() => {
+		cy.ui5SimulateDevice("phone");
+	});
+
+	it("Buttons (navigation arrows) are rendered in the content without hovering", () => {
+		cy.mount(
+			<Carousel id="carousel2">
+				<Button>Button 1 </Button>
+				<Button>Button 2 </Button>
+				<Button>Button 3 </Button>
+				<Button>Button 4 </Button>
+				<Button>Button 5 </Button>
+				<Button>Button 6 </Button>
+				<Button>Button 7 </Button>
+				<Button>Button 8 </Button>
+				<Button>Button 9 </Button>
+			</Carousel>);
+
+		cy.get("#carousel2")
+			.shadow()
+			.find(".ui5-carousel-navigation-arrows .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
+			.should("have.length", 1);
+	});
+
+	it("Buttons (navigation arrows) are rendered in the navigation without hovering (arrows-placement)", () => {
+		cy.mount(
+			<Carousel id="carousel3" arrowsPlacement="Navigation">
+				<Button>Button 1</Button>
+				<Button>Button 2</Button>
+				<Button>Button 3</Button>
+			</Carousel>);
+
+		cy.get("#carousel3")
+			.shadow()
+			.find(".ui5-carousel-navigation-button[data-ui5-arrow-forward]")
+			.realClick();
+
+		cy.get("#carousel3")
+			.shadow()
+			.find(".ui5-carousel-navigation-wrapper .ui5-carousel-navigation-button:not(.ui5-carousel-navigation-button--hidden)")
+			.should("have.length", 2);
+	});
+
+	it("Arrows (navigation arrows) and Dots (page indicator) not displayed in case of single page", () => {
+		cy.mount(
+			<Carousel id="carousel6">
+				<Button>Button 1</Button>
+			</Carousel>);
+
+		cy.get("#carousel6")
+			.shadow()
+			.find(".ui5-carousel-navigation-wrapper")
+			.should("not.exist");
+
+		cy.get("#carousel6")
+			.shadow()
+			.find(".ui5-carousel-navigation-arrows")
+			.should("not.exist");
+
+		cy.get("#carousel6")
+			.should("have.prop", "pagesCount", 1);
+	});
+});

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.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 })