@ui5/webcomponents 2.7.0-rc.1 → 2.7.0

package/cypress/specs/{TableDragAndDrop.cy.ts → TableDragAndDrop.cy.tsx}

@@ -1,10 +1,10 @@
-import { html } from "lit";
-
-import "../../src/Table.js";
-import "../../src/TableHeaderRow.js";
-import "../../src/TableCell.js";
-import "../../src/TableRow.js";
 import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
+import TableHeaderRow from "../../src/TableHeaderRow.js";
+import TableHeaderCell from "../../src/TableHeaderCell.js";
+import Table from "../../src/Table.js";
+import TableRow from "../../src/TableRow.js";
+import TableCell from "../../src/TableCell.js";
+import Label from "../../src/Label.js";
 
 describe("API & Events", () => {
 	function dragTo(selectors: { source: string, destination: string }, position: MovePlacement, expectMove = true, onPrevented = false) {
@@ -71,24 +71,27 @@ describe("API & Events", () => {
 
 	beforeEach(() => {
 		cy.viewport(1920, 1080);
-		cy.mount(html`
-			<ui5-table id="table">
-				<ui5-table-header-row slot="headerRow">
-					<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
-					<ui5-table-header-cell><span>ColumnB</span></ui5-table-header-cell>
-				</ui5-table-header-row>
-				${Array.from({ length: 10 }).map((_, index) => html`
-					<ui5-table-row row-key="${index}" movable>
-						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
-						<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
-					</ui5-table-row>
-				`)}
-				<ui5-table-row row-key="10">
-						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
-						<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
-				</ui5-table-row>
-			</ui5-table>
-		`);
+		cy.mount(
+			<Table id="table">
+				<TableHeaderRow slot="headerRow">
+					<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
+					<TableHeaderCell><span>ColumnB</span></TableHeaderCell>
+				</TableHeaderRow>
+				${Array.from({ length: 10 }).map((_, index) =>
+					<TableRow rowKey={`${index}`} movable={true}>
+						<TableCell><Label>Cell A</Label></TableCell>
+						<TableCell><Label>Cell B</Label></TableCell>
+					</TableRow>
+				)}
+				<TableRow rowKey="10">
+					<TableCell><Label>Cell A</Label></TableCell>
+					<TableCell><Label>Cell B</Label></TableCell>
+				</TableRow>
+			</Table>
+		);
+
+		cy.get("[ui5-table]")
+			.should("be.visible");
 	});
 
 	it("tests if draggable=true is set", () => {

package/cypress/specs/{TableGrowing.cy.ts → TableGrowing.cy.tsx}

@@ -1,30 +1,45 @@
-import { html } from "lit";
-
-import "../../src/Table.js";
-import "../../src/TableHeaderRow.js";
-import "../../src/TableCell.js";
-import "../../src/TableRow.js";
-import "../../src/TableGrowing.js";
-
-import type TableGrowing from "../../src/TableGrowing.js";
+import Table from "../../src/Table.js";
+import TableHeaderRow from "../../src/TableHeaderRow.js";
+import TableHeaderCell from "../../src/TableHeaderCell.js";
+import TableRow from "../../src/TableRow.js";
+import TableCell from "../../src/TableCell.js";
+import TableGrowing from "../../src/TableGrowing.js";
+import Label from "../../src/Label.js";
+
+function TableSample() {
+	return <Table id="table">
+		<TableGrowing slot="features"></TableGrowing>
+		<TableHeaderRow slot="headerRow">
+			<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
+		</TableHeaderRow>
+		<TableRow>
+			<TableCell><Label>Cell A</Label></TableCell>
+		</TableRow>
+	</Table>;
+}
+
+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>
+				<TableHeaderRow slot="headerRow">
+					<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
+				</TableHeaderRow>
+				{Array.from({ length: props.rowCount }).map(() => (
+					<TableRow>
+						<TableCell><Label>Cell A</Label></TableCell>
+					</TableRow>
+				))}
+			</Table>
+		</div>
+	);
+}
 
 describe("TableGrowing - Button", () => {
-	function mountTable() {
-		cy.mount(html`
-			<ui5-table id="table">
-				<ui5-table-growing slot="features"></ui5-table-growing>
-				<ui5-table-header-row slot="headerRow">
-					<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
-				</ui5-table-header-row>
-				<ui5-table-row>
-					<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
-				</ui5-table-row>
-			</ui5-table>
-		`);
-	}
 	describe("Rendering", () => {
 		it("tests button is rendered", () => {
-			mountTable();
+			cy.mount(<TableSample></TableSample>);
 
 			cy.get("[ui5-table-growing]")
 				.shadow()
@@ -47,17 +62,18 @@ describe("TableGrowing - Button", () => {
 		it("tests correct custom texts are rendered", () => {
 			const growingText = "My Custom Growing Text",
 				growingSubtext = "My Custom Growing Subtext";
-			cy.mount(html`
-				<ui5-table>
-					<ui5-table-growing slot="features" growing-text="${growingText}" growing-sub-text="${growingSubtext}"/>
-					<ui5-table-header-row slot="headerRow">
-						<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
-					</ui5-table-header-row>
-					<ui5-table-row>
-						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
-					</ui5-table-row>
-				</ui5-table>
-			`);
+
+			cy.mount(
+				<Table>
+					<TableGrowing slot="features" growingText={growingText} growingSubText={growingSubtext} />
+					<TableHeaderRow slot="headerRow">
+						<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
+					</TableHeaderRow>
+					<TableRow>
+						<TableCell><Label>Cell A</Label></TableCell>
+					</TableRow>
+				</Table>
+			);
 
 			cy.get("[ui5-table-growing]")
 				.shadow()
@@ -78,14 +94,14 @@ describe("TableGrowing - Button", () => {
 		});
 
 		it("tests growing button not shown when no data", () => {
-			cy.mount(html`
-				<ui5-table>
-					<ui5-table-growing slot="features"></ui5-table-growing>
-					<ui5-table-header-row slot="headerRow">
-						<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
-					</ui5-table-header-row>
-				</ui5-table>
-			`);
+			cy.mount(
+				<Table>
+					<TableGrowing slot="features"></TableGrowing>
+					<TableHeaderRow slot="headerRow">
+						<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
+					</TableHeaderRow>
+				</Table>
+			);
 
 			cy.get("[ui5-table]")
 				.shadow()
@@ -96,23 +112,26 @@ describe("TableGrowing - Button", () => {
 
 	describe("Event & Focus", () => {
 		it("tests loadMore event fired upon pressing button", () => {
-			mountTable();
+			cy.mount(<TableSample></TableSample>);
 
 			cy.get<TableGrowing>("[ui5-table-growing]")
 				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")))
-				.click();
+				.realClick();
 
 			cy.get("@loadMore")
 				.should("have.been.calledOnce");
 		});
 
 		it("test loadMore event fired upon pressing Enter", () => {
-			mountTable();
+			cy.mount(<TableSample></TableSample>);
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
 
 			cy.get<TableGrowing>("[ui5-table-growing]")
-				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")))
 				.shadow()
 				.find("#growing-button")
+				.should("be.visible")
 				.focus();
 
 			cy.realPress("Enter");
@@ -123,6 +142,7 @@ describe("TableGrowing - Button", () => {
 			cy.get<TableGrowing>("[ui5-table-growing]")
 				.shadow()
 				.find("#growing-button")
+				.should("be.visible")
 				.focus();
 
 			cy.realPress("Space");
@@ -132,7 +152,7 @@ describe("TableGrowing - Button", () => {
 		});
 
 		it("tests focus is set to first newly added row", () => {
-			mountTable();
+			cy.mount(<TableSample></TableSample>);
 
 			cy.get<TableGrowing>("[ui5-table-growing]")
 				.then(tableGrowing => {
@@ -144,7 +164,7 @@ describe("TableGrowing - Button", () => {
 						table!.appendChild(row);
 					});
 				})
-				.click();
+				.realClick();
 
 			cy.get("[ui5-table]")
 				.children("ui5-table-row")
@@ -156,10 +176,10 @@ describe("TableGrowing - Button", () => {
 		});
 
 		it("tests focus is set to growing button when no new rows are added", () => {
-			mountTable();
+			cy.mount(<TableSample></TableSample>);
 
 			cy.get<TableGrowing>("[ui5-table-growing]")
-				.click();
+				.realClick();
 
 			cy.get("[ui5-table-growing]")
 				.should("have.focus");
@@ -168,32 +188,14 @@ describe("TableGrowing - Button", () => {
 });
 
 describe("TableGrowing - Scroll", () => {
-	function mountTable(rowCount: number = 10, overflow = false) {
-		cy.mount(html`
-			<div id="wrapper" style="height: 200px; ${overflow ? "overflow: auto" : ""}">
-			<ui5-table id="table">
-				<ui5-table-growing slot="features" type="Scroll"></ui5-table-growing>
-				<ui5-table-header-row slot="headerRow">
-					<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
-				</ui5-table-header-row>
-				${Array.from({ length: rowCount }).map(() => html`
-					<ui5-table-row>
-						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
-					</ui5-table-row>
-				`)}
-			</ui5-table>
-			</div>
-		`);
-	}
-
 	describe("Rendering", () => {
 		it("tests no button shown, when scrollable", () => {
-			mountTable(10, true);
+			cy.mount(<TableGrowingSample rowCount={10} overflow={true}></TableGrowingSample>);
 
 			cy.get("[ui5-table-growing]")
 				.shadow()
 				.find("#growing-button")
-				.should("not.exist");
+				.should("not.be.visible");
 
 			cy.get("[ui5-table]")
 				.shadow()
@@ -202,7 +204,7 @@ describe("TableGrowing - Scroll", () => {
 		});
 
 		it("tests button shown when not scrollable", () => {
-			mountTable(1, false);
+			cy.mount(<TableGrowingSample rowCount={1} overflow={false}></TableGrowingSample>);
 
 			cy.get("[ui5-table-growing]")
 				.shadow()
@@ -218,7 +220,10 @@ describe("TableGrowing - Scroll", () => {
 
 	describe("Event", () => {
 		it("tests loadMore event fire upon scrolling to table end", () => {
-			mountTable(10, true);
+			cy.mount(<TableGrowingSample rowCount={10} overflow={true}></TableGrowingSample>);
+
+			cy.get("[ui5-table]")
+				.should("be.visible");
 
 			cy.get<TableGrowing>("[ui5-table-growing]")
 				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
@@ -226,12 +231,15 @@ describe("TableGrowing - Scroll", () => {
 			cy.get("[ui5-table-row]:last-child")
 				.scrollIntoView();
 
+			cy.get("[ui5-table-row]:last-child")
+				.should("be.visible");
+
 			cy.get("@loadMore")
 				.should("have.been.calledOnce");
 		});
 
 		it("tests button fires load-more, button vanishes, scroll to end fires load-more", () => {
-			mountTable(1, true);
+			cy.mount(<TableGrowingSample rowCount={1} overflow={true}></TableGrowingSample>);
 
 			cy.get<TableGrowing>("[ui5-table-growing]")
 				.then(tableGrowing => {
@@ -245,7 +253,7 @@ describe("TableGrowing - Scroll", () => {
 					});
 					tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore"));
 				})
-				.click();
+				.realClick();
 
 			cy.get("@loadMore")
 				.should("have.been.calledOnce");
@@ -257,7 +265,7 @@ describe("TableGrowing - Scroll", () => {
 			cy.get("[ui5-table-growing]")
 				.shadow()
 				.find("#growing-button")
-				.should("not.exist");
+				.should("not.be.visible");
 
 			cy.get("[ui5-table]")
 				.shadow()

package/cypress/specs/TableLoading.cy.tsx

@@ -0,0 +1,48 @@
+import Table from "../../src/Table.js";
+import TableHeaderRow from "../../src/TableHeaderRow.js";
+import TableHeaderCell from "../../src/TableHeaderCell.js";
+import TableRow from "../../src/TableRow.js";
+import TableCell from "../../src/TableCell.js";
+import Label from "../../src/Label.js";
+
+describe("Table - loading", () => {
+	it("tests busy indicator is displayed", () => {
+		cy.mount(
+			<>
+				<input id="before" />
+				<Table loading={true} loadingDelay={0}>
+					<TableHeaderRow slot="headerRow">
+						<TableHeaderCell ><span>ColumnA</span></TableHeaderCell>
+					</TableHeaderRow>
+					<TableRow>
+						<TableCell><Label>Cell A</Label></TableCell>
+					</TableRow>
+				</Table>
+				<input id="after" />
+			</>
+		);
+
+		cy.get("[ui5-table]")
+			.shadow()
+			.find("#loading")
+			.shadow()
+			.find(".ui5-busy-indicator-busy-area")
+			.should("exist");
+
+		cy.get("#before")
+			.realClick();
+
+		cy.get("#before")
+			.should("be.focused");
+
+		cy.realPress("Tab");
+
+		cy.focused()
+			.should("have.class", "ui5-busy-indicator-busy-area");
+
+		cy.realPress("Tab");
+
+		cy.get("#after")
+			.should("be.focused");
+	});
+});

package/cypress/specs/{TableRowActions.cy.ts → TableRowActions.cy.tsx}

@@ -1,29 +1,30 @@
 /* eslint-disable cypress/no-unnecessary-waiting */
 /* eslint-disable newline-per-chained-call */
-import "../../src/Table.js";
-import "../../src/TableHeaderRow.js";
+import Table from "../../src/Table.js";
 import "../../src/TableHeaderCell.js";
-import "../../src/TableRow.js";
 import "../../src/TableCell.js";
-import "../../src/TableRowAction.js";
-import "../../src/TableRowActionNavigation.js";
 import "../../src/Menu.js";
 import "../../src/MenuItem.js";
-import "@ui5/webcomponents-icons/dist/add.js";
-import "@ui5/webcomponents-icons/dist/edit.js";
-import "@ui5/webcomponents-icons/dist/delete.js";
-import "@ui5/webcomponents-icons/dist/share.js";
+import add from "@ui5/webcomponents-icons/dist/add.js";
+import edit from "@ui5/webcomponents-icons/dist/edit.js";
+import share from "@ui5/webcomponents-icons/dist/share.js";
+import deleteIcon from "@ui5/webcomponents-icons/dist/delete.js";
 import "@ui5/webcomponents-icons/dist/overflow.js";
 import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import TableHeaderRow from "../../src/TableHeaderRow.js";
+import TableRowAction from "../../src/TableRowAction.js";
+import TableRowActionNavigation from "../../src/TableRowActionNavigation.js";
+import TableRow from "../../src/TableRow.js";
+import type { JSX } from "@ui5/webcomponents-base/jsx-runtime";
 
 describe("TableRowActions", () => {
-	function mountTable(rowActionCount = 0, rows = "") {
-		cy.mount(`
-			<ui5-table row-action-count="${rowActionCount}">
-				<ui5-table-header-row slot="headerRow"></ui5-table-header-row>
-				${rows}
-			</ui5-table>
-		`);
+	function mountTable(rowActionCount = 0, content: () => JSX.Element) {
+		cy.mount(
+			<Table rowActionCount={rowActionCount}>
+				<TableHeaderRow slot="headerRow"></TableHeaderRow>
+				{content()}
+			</Table>
+		);
 
 		cy.get("[ui5-table]").as("table").children("ui5-table-row").as("rows");
 		cy.get("@table").children("ui5-table-header-row").first().as("headerRow");
@@ -40,20 +41,21 @@ describe("TableRowActions", () => {
 
 	describe("Rendering", () => {
 		it("tests single row action", () => {
-			mountTable(1, `
-				<ui5-table-row id="addRow">
-					<ui5-table-row-action slot="actions" id="addAction" icon="add" text="Add"></ui5-table-row-action>
-				</ui5-table-row>
-				<ui5-table-row>
-					<ui5-table-row-action slot="actions" icon="add" text="Add" invisible></ui5-table-row-action>
-				</ui5-table-row>
-				<ui5-table-row>
-					<ui5-table-row-action-navigation slot="actions"></ui5-table-row-action-navigation>
-				</ui5-table-row>
-				<ui5-table-row id="navigationRow">
-					<ui5-table-row-action-navigation slot="actions" id="navigationAction" interactive></ui5-table-row-action-navigation>
-				</ui5-table-row>
-			`);
+			mountTable(1, () => <>
+				<TableRow id="addRow">
+					<TableRowAction slot="actions" id="addAction" icon={add} text="Add"></TableRowAction>
+				</TableRow>
+				<TableRow>
+					<TableRowAction slot="actions" icon={add} text="Add" invisible={true}></TableRowAction>
+				</TableRow>
+				<TableRow>
+					<TableRowActionNavigation slot="actions"></TableRowActionNavigation>
+				</TableRow>
+				<TableRow id="navigationRow">
+					<TableRowActionNavigation slot="actions" id="navigationAction" interactive={true}></TableRowActionNavigation>
+				</TableRow>
+			</>
+			);
 
 			cy.get("@headerRow").shadow().find("#actions-cell").should("exist");
 			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 8}px`);
@@ -75,14 +77,15 @@ describe("TableRowActions", () => {
 		});
 
 		it("tests multiple row actions - all visible", () => {
-			mountTable(2, `
-				<ui5-table-row>
-					<ui5-table-row-action-navigation slot="actions" interactive></ui5-table-row-action-navigation>
-					<ui5-table-row-action slot="actions" id="addAction" icon="add" text="Add"></ui5-table-row-action>
-					<ui5-table-row-action slot="actions" id="editAction" icon="edit" text="Edit"></ui5-table-row-action>
-					<ui5-table-row-action slot="actions" icon="delete" text="Delete"></ui5-table-row-action>
-				</ui5-table-row>
-			`);
+			mountTable(2, () => <>
+				<TableRow>
+					<TableRowActionNavigation slot="actions" interactive={true}></TableRowActionNavigation>
+					<TableRowAction slot="actions" id="addAction" icon={add} text="Add"></TableRowAction>
+					<TableRowAction slot="actions" id="editAction" icon={edit} text="Edit"></TableRowAction>
+					<TableRowAction slot="actions" icon={deleteIcon} text="Delete"></TableRowAction>
+				</TableRow>
+			</>
+			);
 
 			cy.get("@headerRow").shadow().find("#actions-cell").should("exist");
 			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 4 + 36 + 8}px`);
@@ -151,13 +154,14 @@ describe("TableRowActions", () => {
 		});
 
 		it("tests that invisible actions occupy space for alignment", () => {
-			mountTable(3, `
-				<ui5-table-row>
-					<ui5-table-row-action slot="actions" icon="add" text="Add"></ui5-table-row-action>
-					<ui5-table-row-action slot="actions" icon="edit" text="Edit" invisible></ui5-table-row-action>
-					<ui5-table-row-action slot="actions" icon="delete" text="Delete"></ui5-table-row-action>
-				</ui5-table-row>
-			`);
+			mountTable(3, () => <>
+				<TableRow>
+					<TableRowAction slot="actions" icon={add} text="Add"></TableRowAction>
+					<TableRowAction slot="actions" icon={edit} text="Edit" invisible={true}></TableRowAction>
+					<TableRowAction slot="actions" icon={deleteIcon} text="Delete"></TableRowAction>
+				</TableRow>
+			</>
+			);
 
 			cy.get("@row1").find("ui5-table-row-action").then($actions => {
 				const firstAction = $actions[0];
@@ -168,14 +172,15 @@ describe("TableRowActions", () => {
 		});
 
 		it("tests that avoiding overflow is more important than aligment", () => {
-			mountTable(3, `
-				<ui5-table-row>
-					<ui5-table-row-action slot="actions" icon="add" text="Add" invisible></ui5-table-row-action>
-					<ui5-table-row-action slot="actions" icon="edit" text="Edit"></ui5-table-row-action>
-					<ui5-table-row-action slot="actions" icon="delete" text="Delete"></ui5-table-row-action>
-					<ui5-table-row-action slot="actions" icon="share" text="Share" invisible></ui5-table-row-action>
-				</ui5-table-row>
-			`);
+			mountTable(3, () => <>
+				<TableRow>
+					<TableRowAction slot="actions" icon={add} text="Add" invisible={true}></TableRowAction>
+					<TableRowAction slot="actions" icon={edit} text="Edit"></TableRowAction>
+					<TableRowAction slot="actions" icon={deleteIcon} text="Delete"></TableRowAction>
+					<TableRowAction slot="actions" icon={share} text="Share" invisible={true}></TableRowAction>
+				</TableRow>
+			</>
+			);
 
 			cy.get("@row1").shadow().find("#actions-cell").children().as("actions");
 			cy.get("@actions").should("have.length", 2);
@@ -184,14 +189,15 @@ describe("TableRowActions", () => {
 		});
 
 		it("tests that the aligment of navigation is more important than avoiding overflow", () => {
-			mountTable(3, `
-				<ui5-table-row>
-					<ui5-table-row-action-navigation slot="actions" invisible></ui5-table-row-action-navigation>
-					<ui5-table-row-action slot="actions" icon="add" text="Add"></ui5-table-row-action>
-					<ui5-table-row-action slot="actions" icon="edit" text="Edit"></ui5-table-row-action>
-					<ui5-table-row-action slot="actions" icon="delete" text="Delete"></ui5-table-row-action>
-				</ui5-table-row>
-			`);
+			mountTable(3, () => <>
+				<TableRow>
+					<TableRowActionNavigation slot="actions" invisible={true}></TableRowActionNavigation>
+					<TableRowAction slot="actions" icon={add} text="Add"></TableRowAction>
+					<TableRowAction slot="actions" icon={edit} text="Edit"></TableRowAction>
+					<TableRowAction slot="actions" icon={deleteIcon} text="Delete"></TableRowAction>
+				</TableRow>
+			</>
+			);
 
 			cy.get("@row1").shadow().find("#actions-cell").children().as("actions");
 			cy.get("@actions").should("have.length", 3);

package/cypress/specs/{TableVirtualizer.cy.ts → TableVirtualizer.cy.tsx}

@@ -1,25 +1,22 @@
-import { html } from "lit";
-import "../../src/Table.js";
-import "../../src/TableHeaderRow.js";
-import "../../src/TableHeaderCell.js";
+import Table from "../../src/Table.js";
+import TableHeaderRow from "../../src/TableHeaderRow.js";
+import TableHeaderCell from "../../src/TableHeaderCell.js";
 import "../../src/TableRow.js";
 import "../../src/TableCell.js";
-import "../../src/TableVirtualizer.js";
 
-import type Table from "../../src/Table.js";
-import type TableVirtualizer from "../../src/TableVirtualizer.js";
+import TableVirtualizer from "../../src/TableVirtualizer.js";
 import type { RangeChangeEventDetail } from "../../src/TableVirtualizer.js";
 
 describe("TableVirtualizer", () => {
 	function mountTable(rowHeight = 50, rowCount = 100, tableHeight = 250) {
-		cy.mount(html`
-			<ui5-table style="height: ${tableHeight}px">
-				<ui5-table-header-row slot="headerRow" hidden>
-					<ui5-table-header-cell>Column</ui5-table-header-cell>
-				</ui5-table-header-row>
-				<ui5-table-virtualizer slot="features" row-height="${rowHeight}" row-count="${rowCount}"></ui5-table-virtualizer>
-			</ui5-table>
-		`);
+		cy.mount(
+			<Table style={{ height: `${tableHeight}px` }}>
+				<TableHeaderRow slot="headerRow" hidden>
+					<TableHeaderCell>Column</TableHeaderCell>
+				</TableHeaderRow>
+				<TableVirtualizer slot="features" rowHeight={rowHeight} rowCount={rowCount}></TableVirtualizer>
+			</Table>
+		);
 
 		cy.get<TableVirtualizer>("[ui5-table-virtualizer]").as("virtualizer").then($virtualizer => {
 			$virtualizer[0].addEventListener("range-change", updateRows as EventListener);