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

.github/workflows/code-quality.yml

@@ -40,25 +40,74 @@ jobs:
       - run: npm ci
       - run: npm run format
 
+  cypress-install:
+    runs-on: ubuntu-latest
+    container: cypress/browsers:node16.16.0-chrome107-ff107-edge
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Cypress install
+        uses: cypress-io/github-action@v5.8.3
+        with:
+          # Disable running of tests within install job
+          runTests: false
 
-  cypress-run:
+  cypress-run-e2e:
 
-    name: Run Cypress Tests
+    name: Run End-to-End Tests
+    needs: cypress-install
     runs-on: ubuntu-latest
-    container: cypress/browsers:node12.18.3-chrome87-ff82
+    container: cypress/browsers:node16.16.0-chrome107-ff107-edge
+    strategy:
+      # don't fail the entire matrix on failure
+      fail-fast: false
+      matrix:
+        # run copies of the current job in parallel
+        containers: [1, 2, 3]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - name: Use Node.js
-        uses: actions/setup-node@v3
+      - name: Cypress run
+        uses: cypress-io/github-action@v5.0.9
         with:
-          node-version: 16
-      - run: npm ci
+          # Specify Browser since container image is compile with Firefox
+          browser: chrome
+          start: npm run dev
+          wait-on: 'http://localhost:3000'
+          record: true
+          parallel: true 
+          group: e2e
+        env: 
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  cypress-run-component:
+
+    name: Run Component Tests
+    needs: cypress-install
+    runs-on: ubuntu-latest
+    container: cypress/browsers:node16.16.0-chrome107-ff107-edge
+    strategy:
+      # don't fail the entire matrix on failure
+      fail-fast: false
+      matrix:
+        # run copies of the current job in parallel
+        containers: [1, 2, 3]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
 
       - name: Cypress run
         uses: cypress-io/github-action@v5.0.9
         with:
           # Specify Browser since container image is compile with Firefox
           browser: chrome
-          start: npm run dev
+          component: true
+          record: true
+          parallel: true
+          group: component
+        env: 
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

cypress.config.ts

@@ -1,7 +1,9 @@
 import { defineConfig } from "cypress";
 
 export default defineConfig({
+  projectId: "1nng13",
   e2e: {
+    baseUrl: 'http://localhost:3000',
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },

cypress/e2e/contactuspage.cy.ts

@@ -1,7 +1,7 @@
 
 describe("Contact Us Image Rendering", () => {
     beforeEach(() => {
-        cy.visit("http://localhost:3000/contact",  { timeout: 30000 });
+        cy.visit("/contact",  { timeout: 30000 });
       });
 
     it("Image rendering on desktop", () =>{

cypress/e2e/homepage.cy.ts

@@ -2,7 +2,7 @@ import validateFooter from "../util/validateFooter";
 
 describe("Homepage", () => {
   beforeEach(() => {
-    cy.visit("http://localhost:3000",  { timeout: 30000 });
+    cy.visit("/",  { timeout: 30000 });
   });
 
   it("should display the homepage", () => {

package.json

@@ -52,7 +52,7 @@
     "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.7",
     "babel-loader": "^8.2.5",
-    "cypress": "^12.12.0",
+    "cypress": "^12.17.1",
     "eslint": "8.26.0",
     "eslint-config-next": "^13.2.4",
     "eslint-plugin-storybook": "^0.6.11",