Added Cypress with basic home and scenario multi-lingual e2e tests

.github/workflows/cypress.yml

@@ -0,0 +1,17 @@
+name: Cypress Tests
+
+on: push
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      # Install npm dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          build: yarn build
+          start: yarn start

README.md

@@ -1,5 +1,7 @@
 # Green Connection's Oil & Water
 
+[![Tests](https://github.com/OpenUpSA/green-connection-oil-water/actions/workflows/cypress.yml/badge.svg)](https://github.com/OpenUpSA/green-connection-oil-water/actions/workflows/cypress.yml)
+
 A web quiz by Green Connection and OpenUp.
 
 ## Dev
@@ -9,8 +11,14 @@ yarn install
 yarn dev
 ```
 
-## Production Deploy
+## Testing
 
+Using Cypress e2e tests. Automatic on push to Github using Github Actions.
+
+```
+yarn test
 ```
-yarn deploy --prod
-```
+
+## Production Deploy
+
+Automatic `main` deployment on Netlify.

cypress.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    supportFile: false,
+    setupNodeEvents(on, config) {
+      on("task", {
+        log(message) {
+          console.log(message);
+
+          return null;
+        },
+      });
+    },
+  },
+});

cypress/e2e/multi-lingual.cy.ts

@@ -0,0 +1,39 @@
+import { locales } from "i18n";
+
+describe("Test home page with default locale", () => {
+  it("passes", () => {
+    const defaultLocale = locales[0];
+    cy.readFile(`messages/${defaultLocale}.json`).then((messages) => {
+      cy.visit("http://localhost:3000/");
+      cy.get("h1").should("contain", messages.global.title);
+    });
+  });
+});
+
+describe("Test home page with available locales", () => {
+  locales.map((locale) => {
+    it("passes", () => {
+      cy.readFile(`messages/${locale}.json`).then((messages) => {
+        cy.visit(`http://localhost:3000/${locale}`);
+        cy.get("h1").should("contain", messages.global.title);
+      });
+    });
+  });
+});
+
+describe("Test scenarios with available locales", () => {
+  it("passes", () => {
+    locales.map((locale) => {
+      cy.readFile(`messages/${locale}.json`).then((messages) => {
+        messages.global.scenarios.map(
+          (scenario: { slug: string; title: string }) => {
+            cy.visit(
+              `http://localhost:3000/${locale}/scenarios/${scenario.slug}`
+            );
+            cy.get("h2").should("contain", scenario.title);
+          }
+        );
+      });
+    });
+  });
+});

package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "deploy": "netlify deploy"
+    "test": "cypress run"
   },
   "dependencies": {
     "@next/third-parties": "^14.2.5",
@@ -20,6 +20,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "cypress": "^13.13.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",