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"