Cypress improvements

[vferraro-scottlogic]

Background

As part of the Layout Management Milestone we've begun writing some e2e tests with Cypress for the first time in the project.

The tests written in #23 are a good first step, but there's improvements to be done.

As this is the first time we're setting up e2e tests in this project, we should think about best practices to make it easier to implement tests moving forward.

Tasks

Use info in the dev notes to refine a list of tasks.

Dev Notes

1. Specific improvements for screenshot.cy.js
   • Improve the selectors
     • Current selectors are based on classnames. These should be a last resort if the framework doesn't provide other selectors. A combination of Cypress & Testing Library gives support for better selectors (like aria attributes). We should use these.
   • The test was written with one partial user flow in mind (I save the layout, I see a screenshot in the dialog). We should actually consider the full user flow of the save layout feature, how this integrates with the screenshot, and write tests which reflect this flow. We won't be able to get the full user flow tested until the feature is complete, but we can make note of what we expect this full user flow to be so we know whether our e2e tests match up to this at the end. (#50)
2. Improvements for screenshot testing
   • We should also write some Component/Integration tests to cover different permutations not covered in e2e tests
     • The e2e tests should cover the most obvious, important user flows
     • Integration tests should cover less important permutations, and interactions between different layers of our application
     • For example, our e2e might be As a user, I can save a layout. Integration tests related to that might be When I save a layout, I can see a screenshot of the layout and When I save a layout, I see a dialog to confirm details of the layout to be saved (#51)
3. Design Pattern
   • We should consider implementing some kind of testing design pattern, like POM (Page Object Model), to encapsulate different parts of the application
   • E.g. rather than screenshot.cy.js defining all of the locators relevant to it, we have locators defined for each section/page of the application, which can then be used in any tests which rely on that page/section

Mike gave us some useful links to help us in this process:

• https://www.testim.io/blog/end-to-end-testing-best-practices/
• https://www.testim.io/blog/end-to-end-testing-guide/
• https://www.lambdatest.com/learning-hub/end-to-end-testing

[cfisher-scottlogic]

I've had a chat with Mike today and made a bunch of useful notes. I'll update the ticket next week with tasks we can do off the back off this meeting, and then we can discuss and refine which ones we feel are important as a team.

[cfisher-scottlogic]

Note before we close this: if we haven't already, should we add 'update documentation' to the relevant tickets?

[pling-scottlogic]

Strikethough represents aspects covered in other tickets (#49)