@ui5/webcomponents 2.9.0-rc.2 → 2.9.0

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/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/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");