feat!: bump node to v24 and setup playwright

.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

@@ -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;
   }

playwright.config.ts

@@ -0,0 +1,37 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  timeout: 30_000,
+  expect: {
+    timeout: 10_000,
+  },
+  use: {
+    baseURL: "http://localhost:9080",
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium-desktop",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "chromium-mobile",
+      use: { ...devices["Pixel 5"] },
+    },
+  ],
+  webServer: {
+    command: "yarn dev:web",
+    env: {
+      NODE_ENV: "test",
+      WEB_IS_DEV: "false",
+      GOOGLE_CLIENT_ID: "test-client-id",
+      API_BASEURL: "http://localhost:3000/api",
+      API_PORT: "3000",
+      POSTHOG_KEY: "test-posthog-key",
+      POSTHOG_HOST: "https://app.posthog.com",
+    },
+    port: 9080,
+    reuseExistingServer: !process.env.CI,
+  },
+});