test: update cypress, add component testing in CI, add Cypress Cloud

[marktnoonan]

Description

Related Issue

Resolves: #152

Motivation and Context

I realized when we set up component testing, we did not set it to run in GitHub Actions for this project. Also in talking with Chad we decided to set up a Cypress Cloud project to help with test times by running things in parallel. This also gives us a place to review results and assets like videos/screenshots from tests.

The Cloud integration will fail until we set a CYPRESS_RECORD_KEY environment variable in this repository. This run was recorded against my fork of this project.

Additionally I've made a couple of other changes around the testing setup, lets go through them file by file:

code-quality.yml

• Add cypress-install step job, needed for parallelization - it runs npm ci and provides a common starting point for the parallel runs.
• Updated the container used for tests to get a more recent version of chrome (107).
• Set failure policy and number of containers to use for parellization
• Use latest version of Cypress's github action
• Add wait-on: 'http://localhost:3000' to ensure Next dev server has properly stood up before e2e testing begins.
• add cypress-run-component job and rename cypress-run to cypress-run-e2e, and give each one a matching group. This allows results from the two separate sets of test to be merged in a single "run" within Cypress.
• add references to secrets GITHUB_TOKEN and CYPRESS_RECORD_KEY. We must add the CYPRESS_RECORD_KEY for the project, but the GITHUB_TOKEN is provided automatically when the action runs - we do not need anybody to generate a github authentication token.

cypress.config.ts

• add project ID to connect this project to Cypress Cloud
• add base URL to avoid repetition in e2e tests - this also avoids an annoying page refresh at the start of e2e tests when developing locally, while Cypress "switches" to the visited URL.

cypress/e2e/contactuspage.cy.ts and cypress/e2e/contactuspage.cy.ts

Remove http://localhost:3000 from tests, as that is now configured as the baseUrl for this project.

package.json

Update Cypress to the latest version.

How Has This Been Tested?

Here is an example run showing the e2e and component tests have both run, and been parallelized and recorded to Cypress Cloud.

Screenshots (if appropriate):

Run information in Cypress cloud.

[vercel[bot]]

Someone is attempting to deploy a commit to a Personal Account owned by @TechIsHiring on Vercel.

@TechIsHiring first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
techishiring-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 21, 2023 0:09am