Theme inclusion of Cypress

[rob-howells]

Background / motivation

• There is an opportunity to improve code quality and overall product quality by introducing automated testing using Cypress

Approach

• Installed Cypress package and created new test:local NPM script, which runs test scripts headlessly. Note there are options for running this within a browser too (see attached)
• Created an example test script (cypress/integrations/main-menu.js), which tests opening and closing the mobile menu. Note - the remaining folders in the cypress directory are scaffolding files automatically created by Cypress each time it initialises
• Included Cypress Eslint plugin, which enforces best practice rules when using Cypress

Additional work

• Updated eslint and prettier NPM scripts to check all JS files in theme (excluding those in .eslintignore and .prettierignore)
• Ran eslint and prettier to update any JS files in theme to appropriate standards
• Updated Google Fonts loading order in scss as noticed that font styles were not correctly being applied
• Updated theme JS file and library naming convention to match other JS files within the theme, in order to improve consistency

Next steps

If people feel like this would be a worthy addition to the theme, explore how we could run Cypress tests via CI (rather than just locally)

[rob-howells]

@iamsophiesk @AccessPaul I've added an 'on hold' label to this work, since after Lewis' demo at the dev meeting, it looks like lot of work has already been undertaken by the QA team to build Cypress into their workflow (and so adding Cypress to the theme may no longer be the most appropriate place for it). Further team discussion is required to figure out a solution for having a consistent Cypress implementation (or at least an option to enable Cypress) for each new suitable project