chore(deps): update dependency cypress to ^14.0.1

[Mash707]

Towards #11491

[patternfly-build]

Preview: https://patternfly-react-pr-11625.surge.sh

A11y report: https://patternfly-react-pr-11625-a11y.surge.sh

[Mash707]

Need to make some migration changes.
https://docs.cypress.io/app/references/migration-guide

[Mash707]

Need to replace cypress.json with cypress.config.ts as cypress.json support was removed since cypress v10.
https://docs.cypress.io/app/references/migration-guide#Configuration-File-Changes
@thatblindgeye could you review this. Also I am working on the integration tests, could you also check that once why it is failing? Do we need to manually update the spec.ts files?

[Mash707]

I have observed that test cases with multiple it blocks are failing. Combining them into one it block fixes the issue. For example I have pushed some changes regarding aboutmodal.spec.ts

[thatblindgeye]

Unless we absolutely have to (as in, part of the v14 of Cypress they only allow a single it block), I don't think we shouldn combine all tests into a single it block. It'd be rather tedious a task, but also would make things a lot more confusing to read and debug if tests start to fail.

[Mash707]

We can use Hooks to allow multiple it blocks. Something like

before(() => {
    cy.visit('test-url')
})

[thatblindgeye]

@Mash707 does that resolve the issue in test suites where there a more it blocks? Something like Accordion where there's the it for visiting the URL followed by several actual tests

[Mash707]

@thatblindgeye How can I test integration tests locally? I run yarn test:integration but get a error regarding

From Node.js Internals:
  Error: connect ECONNREFUSED 127.0.0.1:3000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1611:16)]]></failure>

It is probably occurring because I don't have any web server running at localhost:3000 .

[thatblindgeye]

So you'll need 2 terminals: one to run yarn start:demo-app and another to run yarn start:cypress. The latter should (eventually) open a separate window where you can either run all tests or click a specific suite to run the tests for (which will open a separate browser window to run the tests in)

[Mash707]

@Mash707 does that resolve the issue in test suites where there a more it blocks? Something like Accordion where there's the it for visiting the URL followed by several actual tests

For now before() hook is also failing with more it blocks. I am currently exploring other options, will give an update once I make some progress.

[Mash707]

@thatblindgeye needed to set testIsolation: false (default:true) which allowed most of the test cases to pass.
https://docs.cypress.io/app/references/configuration#e2e:~:text=the%20default%20reporter.-,testIsolation,-true

[Mash707]

added support file to enable cypress-plugins-tab

[Mash707]

drawer.spec.ts , drawerresize.spec.ts, form.spec.ts are currently failing.

[Mash707]

• Reduced the css expressions for drawer.spec.ts and drawerresize.spec.ts.
• Added focus() to form.spec.ts

[Mash707]

@thatblindgeye expandablesectiontruncate.ts is not named correctly hence it is not included in the testing. Should we fix this in this PR?

[thatblindgeye]

@Mash707 if you wouldn't mind that would be great. Probably skirting the line of "scope creep" territory but if it's literally just updating the file name it's a super small update.

[Mash707]

@thatblindgeye tried testing the file, but it has some errors regarding conditional rendering. I suppose that is why it is not included in testing for now. Do we have a issue opened regarding this?

patternfly-react/packages/react-integration/cypress/integration/expandablesectiontruncate.ts

Lines 11 to 19 in 42eea0f

	it('Verify toggle button renders conditionally', () => {
	cy.get('#expandable-section-truncate-resizable button').should('not.exist');
	cy.viewport(400, 660);
	cy.get('#expandable-section-truncate-resizable button').should('exist').click();
	// Want to verify resizing doesn't remove the toggle button
	cy.get('#expandable-section-truncate button').should('exist');
	cy.viewport(800, 660);
	cy.get('#expandable-section-truncate-resizable button').should('not.exist');
	});

[thatblindgeye]

@Mash707 doesn't seem so, can you open a followup to look into fixing that test file and enabling it to be ran with the rest of the integration tests?

[Mash707]

Sure, will open a followup and look into fixing it.