feat(cypress-commands): support cypress v14 (#6828)

Author: MarcusNotheis

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 {

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",

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);
   });
 });

packages/cypress-commands/TestSetup.mdx

@@ -57,7 +57,9 @@ You can define the command for example in the `commands.ts/js` file:
 <summary>Example file</summary>
 
 ```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 {

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": {

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -1938,8 +1938,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');
 

packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx

@@ -210,7 +210,7 @@ describe('ObjectStatus', () => {
           </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(
       <ObjectStatus onClick={click} interactive>
@@ -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', () => {
       </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', () => {

yarn.lock

@@ -6109,7 +6109,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
@@ -9308,9 +9308,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"
@@ -9357,7 +9357,7 @@ __metadata:
     yauzl: "npm:^2.10.0"
   bin:
     cypress: bin/cypress
-  checksum: 10c0/159ce620e32d2785082aaa1f4f30f203dcec466df4a8e80dfa299035358772fd513c35820070ba8db52e2bf58078a372ff7009068e26967f993656e7da62e221
+  checksum: 10c0/231af826d394b9a9f35200ab56e531e911f774b86b2ecb17a3183685982ac93d534e7c80cfe24ca36f74c99525025472fe28a3ccf2f246c8e67f85ecb768086b
   languageName: node
   linkType: hard
 
@@ -23492,7 +23492,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"