diff --git a/cypress/support/commands.tsx b/cypress/support/commands.tsx
index fa8d0559cd7..b85b117f650 100644
--- a/cypress/support/commands.tsx
+++ b/cypress/support/commands.tsx
@@ -1,8 +1,8 @@
-import type { MountOptions, MountReturn } from 'cypress/react18';
-import { mount } from 'cypress/react18';
-import type { ReactNode } from 'react';
import type { ThemeProviderPropTypes } from '@ui5/webcomponents-react';
import { ThemeProvider } from '@ui5/webcomponents-react';
+import type { MountOptions, MountReturn } from 'cypress/react';
+import { mount } from 'cypress/react';
+import type { ReactNode } from 'react';
declare global {
namespace Cypress {
diff --git a/package.json b/package.json
index e6f73fa2305..944587f12dd 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
"@vitejs/plugin-react": "^4.2.0",
"chromatic": "^11.0.0",
"cssnano": "^7.0.0",
- "cypress": "13.17.0",
+ "cypress": "14.0.0",
"cypress-real-events": "^1.8.1",
"dedent": "^1.0.0",
"documentation": "14.0.3",
diff --git a/packages/base/src/hooks/useStylesheet.cy.tsx b/packages/base/src/hooks/useStylesheet.cy.tsx
index 8c1b9dcc9b1..dcb957929f3 100644
--- a/packages/base/src/hooks/useStylesheet.cy.tsx
+++ b/packages/base/src/hooks/useStylesheet.cy.tsx
@@ -25,12 +25,12 @@ describe('useStyleSheet', () => {
>
);
cy.findAllByText('Content').should('be.visible').and('have.length', 2);
- cy.findAllByText('Object Status').should('not.be.visible');
+ cy.findAllByText('Object Status').should('have.css', 'font-size', '0px');
cy.findAllByText('Object Status').should('have.length', 2);
cy.findByTestId('btn-1').click();
cy.findAllByText('Content').should('be.visible').and('have.length', 1);
- cy.findAllByText('Object Status').should('not.be.visible');
+ cy.findAllByText('Object Status').should('have.css', 'font-size', '0px');
cy.findAllByText('Object Status').should('have.length', 1);
});
});
diff --git a/packages/cypress-commands/TestSetup.mdx b/packages/cypress-commands/TestSetup.mdx
index acbdd55dc06..13ae8ad0b60 100644
--- a/packages/cypress-commands/TestSetup.mdx
+++ b/packages/cypress-commands/TestSetup.mdx
@@ -57,7 +57,9 @@ You can define the command for example in the `commands.ts/js` file:
Example file
```tsx
-import { mount } from 'cypress/react18';
+import { mount } from 'cypress/react';
+// if you are using Cypress v12 or v13, you need to import the mount command from 'cypress/react18'
+// import { mount } from 'cypress/react18';
import { ThemeProvider } from '@ui5/webcomponents-react';
declare global {
diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json
index 62e071e74b7..e0d8046f46b 100644
--- a/packages/cypress-commands/package.json
+++ b/packages/cypress-commands/package.json
@@ -25,7 +25,7 @@
"peerDependencies": {
"@ui5/webcomponents": "~2.6.0",
"@ui5/webcomponents-base": "~2.6.0",
- "cypress": "^12.0.0 || ^13.0.0"
+ "cypress": "^12 || ^13 || ^14"
},
"peerDependenciesMeta": {
"@ui5/webcomponents": {
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index 03451a1733d..3f406a5c1a5 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -1937,8 +1937,23 @@ describe('AnalyticalTable', () => {
subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Visible}
/>
);
+ cy.wait(300);
+
+ // ToDo: with Cypress 14 the "not.be.visible" assertion is false here, check if this is still the case for next updates
+ // cy.findByText('SubComponent 1').should('exist').and('not.be.visible');
+ cy.findByText('SubComponent 1')
+ .should('exist')
+ .then(($sub) => {
+ if (!$sub.is(':visible')) {
+ throw new Error('Remove workaround for visibility check in "AnalyticalTable - render subcomponents" test!');
+ }
+ const [sub] = $sub;
+ const container = document.querySelector('[data-component-name="AnalyticalTableBody"]');
+ const isNotVisible = container.getBoundingClientRect().bottom < sub.getBoundingClientRect().top;
+ // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+ expect(isNotVisible).to.be.true;
+ });
- cy.findByText('SubComponent 1').should('exist').and('not.be.visible');
cy.findByTitle('Expand Node').should('not.exist');
cy.findByTitle('Collapse Node').should('not.exist');
diff --git a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
index 1f72f5ae0bf..4bec04c3abf 100644
--- a/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
+++ b/packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx
@@ -210,7 +210,7 @@ describe('ObjectStatus', () => {
);
if (stateObj.hiddenText) {
- cy.findByText(stateObj.hiddenText).should('exist').and('not.be.visible');
+ cy.findByText(stateObj.hiddenText).should('exist').and('have.css', 'font-size', '0px');
}
if (!item.inverted) {
cy.findByText('Content').should('have.css', 'color', rgbValColorString);
@@ -235,7 +235,7 @@ describe('ObjectStatus', () => {
cy.findByText('Content').click();
cy.get('@clickSpy').should('not.be.called');
cy.findByRole('button').should('not.exist');
- cy.findByText('Object Status').should('exist').and('not.be.visible');
+ cy.findByText('Object Status').should('exist').and('have.css', 'font-size', '0px');
cy.mount(
@@ -249,7 +249,7 @@ describe('ObjectStatus', () => {
cy.get('@clickSpy').should('have.been.calledTwice');
cy.findByText('Content').realPress('Space');
cy.get('@clickSpy').should('have.been.calledThrice');
- cy.findByText('Object Status Button').should('exist').and('not.be.visible');
+ cy.findByText('Object Status Button').should('exist').and('have.css', 'font-size', '0px');
});
it('emptyIndicator', () => {
@@ -267,7 +267,7 @@ describe('ObjectStatus', () => {
);
cy.findByText(VALUE_STATE_ERROR.defaultText).should('not.exist');
- cy.findByText('Custom Text').should('exist').and('not.be.visible');
+ cy.findByText('Custom Text').should('exist').and('have.css', 'font-size', '0px');
});
it('large', () => {
diff --git a/yarn.lock b/yarn.lock
index 25c94ee5b52..daf4705e50e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5936,7 +5936,7 @@ __metadata:
peerDependencies:
"@ui5/webcomponents": ~2.6.0
"@ui5/webcomponents-base": ~2.6.0
- cypress: ^12.0.0 || ^13.0.0
+ cypress: ^12 || ^13 || ^14
peerDependenciesMeta:
"@ui5/webcomponents":
optional: true
@@ -9021,9 +9021,9 @@ __metadata:
languageName: node
linkType: hard
-"cypress@npm:13.17.0":
- version: 13.17.0
- resolution: "cypress@npm:13.17.0"
+"cypress@npm:14.0.0":
+ version: 14.0.0
+ resolution: "cypress@npm:14.0.0"
dependencies:
"@cypress/request": "npm:^3.0.6"
"@cypress/xvfb": "npm:^1.2.4"
@@ -9070,7 +9070,7 @@ __metadata:
yauzl: "npm:^2.10.0"
bin:
cypress: bin/cypress
- checksum: 10c0/159ce620e32d2785082aaa1f4f30f203dcec466df4a8e80dfa299035358772fd513c35820070ba8db52e2bf58078a372ff7009068e26967f993656e7da62e221
+ checksum: 10c0/231af826d394b9a9f35200ab56e531e911f774b86b2ecb17a3183685982ac93d534e7c80cfe24ca36f74c99525025472fe28a3ccf2f246c8e67f85ecb768086b
languageName: node
linkType: hard
@@ -23121,7 +23121,7 @@ __metadata:
"@vitejs/plugin-react": "npm:^4.2.0"
chromatic: "npm:^11.0.0"
cssnano: "npm:^7.0.0"
- cypress: "npm:13.17.0"
+ cypress: "npm:14.0.0"
cypress-real-events: "npm:^1.8.1"
dedent: "npm:^1.0.0"
documentation: "npm:14.0.3"