diff --git a/package.json b/package.json
index d0912ce20de5..e55402805be0 100644
--- a/package.json
+++ b/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",
diff --git a/packages/compat/.eslintignore b/packages/compat/.eslintignore
index 97ac96f4af2f..ee078a8c4111 100644
--- a/packages/compat/.eslintignore
+++ b/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
\ No newline at end of file
diff --git a/packages/compat/cypress.config.js b/packages/compat/cypress.config.js
new file mode 100644
index 000000000000..cf71d14f8322
--- /dev/null
+++ b/packages/compat/cypress.config.js
@@ -0,0 +1,3 @@
+import cypressConfig from "@ui5/cypress-internal/cypress.config.js";
+
+export default cypressConfig;
diff --git a/packages/compat/cypress/specs/Table.cy.tsx b/packages/compat/cypress/specs/Table.cy.tsx
new file mode 100644
index 000000000000..66b7e4f280eb
--- /dev/null
+++ b/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(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ 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(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ 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");
+ });
+});
diff --git a/packages/compat/cypress/support/commands.ts b/packages/compat/cypress/support/commands.ts
new file mode 100644
index 000000000000..3d44a956b147
--- /dev/null
+++ b/packages/compat/cypress/support/commands.ts
@@ -0,0 +1,40 @@
+///
+// ***********************************************
+// 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
+// drag(subject: string, options?: Partial): Chainable
+// dismiss(subject: string, options?: Partial): Chainable
+// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable
+// }
+// }
+// }
+
+import "@ui5/cypress-internal/commands.js";
+import "../../../main/cypress/support/commands.js";
\ No newline at end of file
diff --git a/packages/compat/cypress/support/component-index.html b/packages/compat/cypress/support/component-index.html
new file mode 100644
index 000000000000..ac6e79fd83df
--- /dev/null
+++ b/packages/compat/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ Components App
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/compat/cypress/support/component.ts b/packages/compat/cypress/support/component.ts
new file mode 100644
index 000000000000..ffc13665d98c
--- /dev/null
+++ b/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'
diff --git a/packages/compat/cypress/tsconfig.json b/packages/compat/cypress/tsconfig.json
new file mode 100644
index 000000000000..63e3b5e339d3
--- /dev/null
+++ b/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"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/packages/compat/package-scripts.cjs b/packages/compat/package-scripts.cjs
index 5580e8d4773a..c1b3af2ca33f 100644
--- a/packages/compat/package-scripts.cjs
+++ b/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);
diff --git a/packages/compat/package.json b/packages/compat/package.json
index 2330bc0a7203..dfe6e9b7ab0f 100644
--- a/packages/compat/package.json
+++ b/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"
}
diff --git a/packages/compat/src/Table.ts b/packages/compat/src/Table.ts
index 11cdd41449e8..21b927f97e71 100644
--- a/packages/compat/src/Table.ts
+++ b/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);
}
diff --git a/packages/compat/src/TableTemplate.tsx b/packages/compat/src/TableTemplate.tsx
index bfd7ea7031fc..092222588171 100644
--- a/packages/compat/src/TableTemplate.tsx
+++ b/packages/compat/src/TableTemplate.tsx
@@ -62,7 +62,7 @@ export default function TableTemplate(this: Table) {
{
this.rows.map(row =>
-
+
)}
{!this.rows.length && !this.hideNoData &&
diff --git a/packages/compat/test/pages/TableGrowingWithScrollWithArrowDown.html b/packages/compat/test/pages/TableGrowingWithScrollWithArrowDown.html
new file mode 100644
index 000000000000..4872ef11e680
--- /dev/null
+++ b/packages/compat/test/pages/TableGrowingWithScrollWithArrowDown.html
@@ -0,0 +1,774 @@
+
+
+
+
+
+ Table
+
+
+
+
+
+
+
+
+
+
+
+ Product
+
+
+
+ Supplier
+
+
+
+
+ Dimensions
+
+
+
+
+ Weight
+
+
+
+ Price
+
+
+
+
+
+
+