Implement end-to-end testing with Cypress

.github/workflows/continuous-integration.yml

@@ -81,12 +81,6 @@ jobs:
   end_to_end_test:
     name: End to End Test
     if: ${{ github.event_name == 'pull_request' && github.event.pull_request.user.login != 'dependabot[bot]' }}
+    uses: inovex/scrumlr.io/.github/workflows/cypressTests.yml
     needs: deploy_to_dev_cluster
-    runs-on: ubuntu-latest
-    steps:
-      - name: run tests
-        uses: OctoMind-dev/automagically-action-execute@v2
-        with:
-          url: https://${{ github.event.pull_request.number }}.development.scrumlr.fra.ics.inovex.io
-          token: ${{ secrets.AUTOMAGICALLY_TOKEN }}
-          testTargetId: ${{ secrets.AUTOMAGICALLY_TEST_TARGET_ID }}
+

.github/workflows/cypressTests.yml

@@ -0,0 +1,13 @@
+name: End-to-end tests
+on: push
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          browser: chrome
+          config: baseURL=https://${{ github.event.pull_request.number }}.development.scrumlr.fra.ics.inovex.io

cypress.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000'
+  },
+});

cypress/e2e/landingPageToBoard-spec.cy.ts

@@ -0,0 +1,57 @@
+/// <reference types="cypress" />
+/// <reference path="../support/index.d.ts" />
+
+import { columnTemplates } from "../../src/routes/NewBoard/columnTemplates"
+import translationEn from "../../src/i18n/en/translation.json"
+
+describe("When clicking the CTA on the homepage", () => {
+    it("it should navigate to the next page", () => {
+        // go to homepage
+        cy.visit("/")
+        // switch to english
+        cy.changeLanguageToEnglish()
+        cy.acceptCookies()
+
+        // click CTA
+        cy.get("a").contains(translationEn.Homepage.startButton).click()
+
+        // navigates to /login
+        cy.url().should("include", "/login")
+        cy.get("h1").contains(translationEn.LoginBoard.title)
+
+        // terms and conditions checkbox
+        cy.get("[type='checkbox']").should("not.be.checked")
+        cy.get("[type='checkbox']").check()
+
+        // click CTA
+        cy.get("button").contains(translationEn.LoginBoard.login).click()
+
+        // check templates
+        cy.get("h1").contains(translationEn.NewBoard.basicConfigurationTitle)
+        Object.values(columnTemplates).forEach(templateName => {
+            cy.contains(templateName.name)
+        })
+
+        cy.get("button")
+        .contains(translationEn.NewBoard.createNewBoard)
+        .parent()
+        .should("be.disabled")
+
+        // select template
+        cy.get("input[type='radio']").siblings().contains("Lean Coffee").click()
+
+        cy.get("button")
+        .contains(translationEn.NewBoard.createNewBoard)
+        .parent()
+        .should("not.be.disabled")
+
+        // click CTA
+        cy.get("button")
+        .contains(translationEn.NewBoard.createNewBoard)
+        .click()
+
+        // navigates to the board
+        cy.url().should("include", "/board/")
+        cy.get("h2").contains("Lean Coffee")
+    })
+  })

cypress/fixtures/example.json

@@ -0,0 +1 @@
+{}

cypress/support/commands.ts

@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+/// <reference path="../support/index.d.ts" />
+
+import translationEn from "../../src/i18n/en/translation.json"
+
+Cypress.Commands.add("acceptCookies", () => {
+    cy.contains(translationEn.CookieNotice.accept).click()
+});
+
+Cypress.Commands.add("changeLanguageToEnglish", () => {
+    cy.get(`button[aria-label=${translationEn.Language.english}]`).click({ force: true })
+});

cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'

cypress/support/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+    interface Chainable {
+      /**
+       * Custom command to accept the cookies so the cookie banner is dismissed.
+       */
+      acceptCookies(): Chainable<void>
+
+            /**
+       * Custom command to change the language to english.
+       */
+      changeLanguageToEnglish(): Chainable<void>
+    }
+  }

package.json

@@ -71,6 +71,7 @@
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "cross-env": "^7.0.3",
+    "cypress": "^13.11.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",

tsconfig.json

@@ -20,7 +20,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "sourceMap": true,
+    "sourceMap": false,
     "rootDir": "src",
     "noImplicitReturns": true,
     "noImplicitThis": true,
@@ -29,7 +29,8 @@
     "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "experimentalDecorators": true,
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "ignoreDeprecations": "5.0"
   },
   "include": ["src"]
 }