fix(compat/ui5-table): fire loadMore with arrow-down on last row

package.json

@@ -55,7 +55,7 @@
     "ci:test:main:cy:suite-1": "yarn workspace @ui5/webcomponents test:cypress:suite-1",
     "ci:test:main:cy:suite-2": "yarn workspace @ui5/webcomponents test:cypress:suite-2",
     "ci:test:fiori": "yarn workspace @ui5/webcomponents-fiori test:ssr && yarn workspace @ui5/webcomponents-fiori test:cypress && yarn workspace @ui5/webcomponents-fiori test",
-    "ci:test:compat": "yarn workspace @ui5/webcomponents-compat test:ssr && yarn workspace @ui5/webcomponents-compat test",
+    "ci:test:compat": "yarn workspace @ui5/webcomponents-compat test:ssr && yarn workspace @ui5/webcomponents-compat test:cypress && yarn workspace @ui5/webcomponents-compat test",
     "ci:test:ai": "yarn workspace @ui5/webcomponents-ai test:ssr && yarn workspace @ui5/webcomponents-ai test",
 
     "lint": "wsrun --exclude-missing lint",

packages/compat/.eslintignore

@@ -2,11 +2,13 @@
 target
 dist
 src/generated
+cypress/*
 lib
 test
 bundle.*.js
 rollup.config*.js
 wdio.conf.cjs
 postcss.config.cjs
+cypress.config.js
 package-scripts.cjs
 .eslintrc.cjs

packages/compat/cypress.config.js

@@ -0,0 +1,3 @@
+import cypressConfig from "@ui5/cypress-internal/cypress.config.js";
+
+export default cypressConfig;

packages/compat/cypress/specs/Table.cy.tsx

@@ -0,0 +1,155 @@
+import Label from "@ui5/webcomponents/dist/Label.js";
+import Table from "../../src/Table.js";
+import TableCell from "../../src/TableCell.js";
+import TableRow from "../../src/TableRow.js";
+import TableColumn from "../../src/TableColumn.js";
+
+describe("Table", () => {
+	it("tests doesn't fire loadMore with ArrowDown on last row", () => {
+		cy.mount(
+			<Table>
+				<TableColumn slot="columns" minWidth={350}>
+					<Label>Product</Label>
+				</TableColumn>
+
+				<TableColumn slot="columns" minWidth={800} popinText="Supplier">
+					<Label>Supplier</Label>
+				</TableColumn>
+
+				<TableColumn slot="columns" minWidth={600} popinText="Dimensions" demandPopin>
+					<Label>Dimensions</Label>
+				</TableColumn>
+
+				<TableRow>
+					<TableCell>
+						<Label>Product 1</Label>
+					</TableCell>
+					<TableCell>
+						<Label>Supplier 1</Label>
+					</TableCell>
+					<TableCell>
+						<Label>10x20x30</Label>
+					</TableCell>
+				</TableRow>
+
+				<TableRow>
+					<TableCell>
+						<Label>Product 2</Label>
+					</TableCell>
+					<TableCell>
+						<Label>Supplier 2</Label>
+					</TableCell>
+					<TableCell>
+						<Label>15x25x35</Label>
+					</TableCell>
+				</TableRow>
+
+				<TableRow id="row-3">
+					<TableCell>
+						<Label>Product 3</Label>
+					</TableCell>
+					<TableCell>
+						<Label>Supplier 3</Label>
+					</TableCell>
+					<TableCell>
+						<Label>20x30x40</Label>
+					</TableCell>
+				</TableRow>
+			</Table>
+		);
+
+		cy.get("[ui5-table]")
+			.then(table => table.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
+
+		cy.get("#row-3")
+			.shadow()
+			.find(".ui5-table-row-root")
+			.as("lastRow")
+
+		cy.get("@lastRow")
+			.realClick();
+
+		cy.get("@lastRow")
+			.should("be.focused");
+
+		cy.get("@lastRow")
+			.realPress("ArrowDown");
+
+		cy.get("@loadMore")
+			.should("not.have.been.calledOnce");
+	});
+
+	it("tests fire loadMore with ArrowDown on last row", () => {
+		cy.mount(
+			<Table growing="Scroll">
+				<TableColumn slot="columns" minWidth={350}>
+					<Label>Product</Label>
+				</TableColumn>
+
+				<TableColumn slot="columns" minWidth={800} popinText="Supplier">
+					<Label>Supplier</Label>
+				</TableColumn>
+
+				<TableColumn slot="columns" minWidth={600} popinText="Dimensions" demandPopin>
+					<Label>Dimensions</Label>
+				</TableColumn>
+
+				<TableRow>
+					<TableCell>
+						<Label>Product 1</Label>
+					</TableCell>
+					<TableCell>
+						<Label>Supplier 1</Label>
+					</TableCell>
+					<TableCell>
+						<Label>10x20x30</Label>
+					</TableCell>
+				</TableRow>
+
+				<TableRow>
+					<TableCell>
+						<Label>Product 2</Label>
+					</TableCell>
+					<TableCell>
+						<Label>Supplier 2</Label>
+					</TableCell>
+					<TableCell>
+						<Label>15x25x35</Label>
+					</TableCell>
+				</TableRow>
+
+				<TableRow id="row-3">
+					<TableCell>
+						<Label>Product 3</Label>
+					</TableCell>
+					<TableCell>
+						<Label>Supplier 3</Label>
+					</TableCell>
+					<TableCell>
+						<Label>20x30x40</Label>
+					</TableCell>
+				</TableRow>
+			</Table>
+		);
+
+		cy.get("[ui5-table]")
+			.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
+
+		cy.get("#row-3")
+			.shadow()
+			.find(".ui5-table-row-root")
+			.as("lastRow")
+
+		cy.get("@lastRow")
+			.realClick();
+
+		cy.get("@lastRow")
+			.should("be.focused");
+
+		cy.get("@lastRow")
+			.realPress("ArrowDown");
+
+		cy.get("@loadMore")
+			.should("have.been.calledOnce");
+	});
+});

packages/compat/cypress/support/commands.ts

@@ -0,0 +1,40 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+import "@ui5/cypress-internal/commands.js";
+import "../../../main/cypress/support/commands.js";

packages/compat/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

packages/compat/cypress/support/component.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'

packages/compat/cypress/tsconfig.json

@@ -0,0 +1,47 @@
+{
+	"include": [
+		"./**/*"
+	],
+	"compilerOptions": {
+		"jsx": "react-jsx",
+		"jsxImportSource": "@ui5/webcomponents-base",
+		"module": "NodeNext",
+		"moduleResolution": "nodenext",
+		"types": [
+			"cypress",
+			"cypress-real-events",
+			"cypress-axe",
+		],
+		"paths": {
+			"@ui5/webcomponents-base/dist/*": [
+				"../../base/src/*"
+			],
+			"@ui5/webcomponents/dist/*": [
+				"../../main/src/*"
+			],
+			"@ui5/webcomponents-localization/dist/*": [
+				"../../localization/src/*"
+			],
+			"@ui5/webcomponents-theming/dist/*": [
+				"../../theming/src/*"
+			],
+			"@ui5/webcomponents-icons/dist/*": [
+				"../../icons/src/*"
+			],
+			"@ui5/webcomponents-icons-business-suite/dist/*": [
+				"../../icons-business-suite/src/*"
+			],
+			"@ui5/webcomponents-icons-tnt/dist/*": [
+				"../../icons-tnt/src/*"
+			]
+		},
+	},
+	"references": [
+		{
+			"path": "../"
+		},
+		{
+			"path": "../../main/cypress"
+		}
+	]
+}

packages/compat/package-scripts.cjs

@@ -6,6 +6,10 @@ const options = {
 	compatPackage: true,
 	noWatchTS: true,
 	dev: true,
+	internal: {
+		cypress_code_coverage: false,
+		cypress_acc_tests: false,
+	},
 };
 
 const scripts = getScripts(options);

packages/compat/package.json

@@ -26,6 +26,9 @@
     "generateAPI": "nps generateAPI",
     "bundle": "nps build.bundle",
     "test": "wc-dev test",
+    "test:cypress": "nps test-cy-ci",
+    "test:cypress:single": "npx cypress run --component --browser chrome --spec",
+    "test:cypress:open": "nps test-cy-open",
     "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
     "create-ui5-element": "wc-create-ui5-element",
     "prepublishOnly": "tsc -b"
@@ -51,6 +54,7 @@
     "@ui5/webcomponents-theming": "2.10.0-rc.3"
   },
   "devDependencies": {
+    "@ui5/cypress-internal": "0.0.0",
     "@ui5/webcomponents-tools": "2.10.0-rc.3",
     "chromedriver": "^135.0.0"
   }

packages/compat/src/Table.ts

@@ -17,6 +17,7 @@ import {
 	isTabPrevious,
 	isSpace,
 	isEnter,
+	isDown,
 	isCtrlA,
 	isUpAlt,
 	isDownAlt,
@@ -856,6 +857,12 @@ class Table extends UI5Element {
 		this._itemNavigation.setCurrentItem(e.target as ITableRow);
 	}
 
+	onRowKeyDown(e: KeyboardEvent) {
+		if (this.growing === "Scroll" && isDown(e) && this.currentItemIdx === this.rows.length - 1) {
+			debounce(this.loadMore.bind(this), GROWING_WITH_SCROLL_DEBOUNCE_RATE);
+		}
+	}
+
 	_onColumnHeaderFocused() {
 		this._itemNavigation.setCurrentItem(this._columnHeader);
 	}

packages/compat/src/TableTemplate.tsx

@@ -62,7 +62,7 @@ export default function TableTemplate(this: Table) {
 					<tbody>
 						{
 							this.rows.map(row =>
-								<slot name={row._individualSlot}></slot>
+								<slot name={row._individualSlot} onKeyDown={this.onRowKeyDown}></slot>
 							)}
 
 						{!this.rows.length && !this.hideNoData &&