feat!: bump node to v24 and setup playwright (#1116)

* chore: update .gitignore to include Playwright and test report directories

* feat: add end-to-end testing support with Playwright

* feat(e2e): add Playwright configuration and login tests

* feat(e2e): update Node.js version requirement and add E2E workflow

* deps: update yarn.lock

* deps(scripts): update @types/node to version 24.7.2 in package.json and yarn.lock

* chore(github): update Node.js version to 24 in CI workflows

* chore(github): rename test files for clarify

* chore(web): fix webpack URL message

* chore: update playwright and e2e vars

* deps(web): update html-webpack-plugin to version 5.6.4 in package.json and yarn.lock

* fix(web): improve error message for missing GOOGLE_CLIENT_ID in webpack config

* Potential fix for code scanning alert no. 42: Workflow does not contain permissions

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

* fix(scripts): update clientId variable

* fix(e2e): simplify e2e test to check for login redirect

* fix(e2e): mock /auth/google response

* fix(e2e): mock auth apis

* fix(e2e): enhance login redirect tests with detailed logging and debugging

* fix(e2e): enhance Playwright config for CI with timeouts and retries

* chore: revert debugging and simplify test

* test(e2e): simplify test

* chore: reduce timeout

* Update e2e/render.spec.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update packages/web/webpack.config.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

.github/workflows/copilot-setup-steps.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: "24"
           cache: "yarn"
 
       - name: Install dependencies

.github/workflows/test-e2e.yml

@@ -0,0 +1,36 @@
+name: Test
+
+on:
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: read
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile --network-timeout 300000
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run e2e tests
+        env:
+          TZ: Etc/UTC
+          GOOGLE_CLIENT_ID: test-client-id
+          API_BASEURL: http://localhost:3000/api
+          API_PORT: 3000
+        run: yarn test:e2e

.github/workflows/test.yml .github/workflows/test-unit.yml.github/workflows/test.yml renamed to .github/workflows/test-unit.yml

@@ -3,7 +3,7 @@ name: Test
 on: [push]
 
 jobs:
-  install-test-compile:
+  unit:
     runs-on: ubuntu-latest
 
     steps:
@@ -13,7 +13,7 @@ jobs:
       - name: Install Node.js and Yarn
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 24
           cache: "yarn"
 
       - name: Install Dependencies

.gitignore

@@ -28,6 +28,9 @@ build/
 buildcache/
 logs/
 node_modules/
+playwright-report/
+test-results/
+blob-report/
 
 #core
 packages/core/build/
@@ -45,4 +48,4 @@ packages/backend/.env
 packages/backend/.prod.env
 
 
-!.env.example
+!.env.example

e2e/render.spec.ts

@@ -0,0 +1,8 @@
+import { expect, test } from "@playwright/test";
+
+test("DOM is not empty", async ({ page }) => {
+  await page.goto("/");
+
+  const html = await page.content();
+  expect(html.length).toBeGreaterThan(0);
+});

package.json

@@ -7,7 +7,7 @@
   "browserslist": "last 2 Chrome versions",
   "main": "",
   "engines": {
-    "node": ">=18.18.0"
+    "node": ">=24.0.0"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
@@ -28,6 +28,7 @@
     "dev:web": "node packages/scripts/src/commands/devWeb.js",
     "postinstall": "husky install | chmod ug+x .husky/*",
     "test": "cross-env-shell TZ=Etc/UTC yarn jest",
+    "test:e2e": "playwright test",
     "test:backend": "yarn test backend",
     "test:core": "yarn test core",
     "test:web": "yarn test web",
@@ -51,6 +52,7 @@
     "@eslint/compat": "^1.2.6",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.20.0",
+    "@playwright/test": "^1.56.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",

packages/scripts/package.json

@@ -17,7 +17,7 @@
   "devDependencies": {
     "@types/inquirer": "^9.0.1",
     "@types/lodash.uniqby": "^4.7.9",
-    "@types/node": "^20.6.3",
+    "@types/node": "^24.7.2",
     "@types/shelljs": "^0.8.15",
     "ts-node-dev": "^2.0.0",
     "tsconfig-paths": "^4.0.0",

packages/scripts/src/commands/devWeb.js

@@ -5,7 +5,7 @@ const path = require("path");
 const envPath = path.join(__dirname, "..", "..", "..", "backend", ".env");
 dotenv.config({ path: envPath });
 
-const clientId = process.env.CLIENT_ID;
+const clientId = process.env.GOOGLE_CLIENT_ID || process.env.CLIENT_ID;
 const port = process.env.PORT;
 const baseUrl = process.env.BASEURL || `http://localhost:${port}/api`;
 const posthogKey = process.env.POSTHOG_KEY;

packages/web/package.json

@@ -19,7 +19,7 @@
     "classnames": "^2.3.1",
     "css-loader": "^6.3.0",
     "dayjs": "^1.10.7",
-    "html-webpack-plugin": "^5.3.2",
+    "html-webpack-plugin": "^5.6.4",
     "http-server": "^14.1.0",
     "immutability-helper": "^3.1.1",
     "lodash.debounce": "^4.0.8",

packages/web/webpack.config.js

@@ -22,10 +22,10 @@ module.exports = (env, argv) => {
   const POSTHOG_KEY = env.POSTHOG_KEY;
   const POSTHOG_HOST = env.POSTHOG_HOST;
 
-  if (!argv.mode || GOOGLE_CLIENT_ID === "undefined") {
-    console.error(`Oopsies, you're missing a required parameter.
+  if (GOOGLE_CLIENT_ID === "undefined") {
+    console.error(`Oopsies, you're missing the GOOGLE_CLIENT_ID variable.
       Make sure you include all required environment variables in the .env file.
-      Reference: https://docs.compasscalendar.com/docs/get-started/configuration/env
+      Reference: https://docs.compasscalendar.com/docs/get-started/setup
     `);
     return;
   }