fix: restructure headless browser app to its own folder

Author: adklempner

.eslintrc.json

@@ -5,7 +5,15 @@
     "project": ["./tsconfig.json"]
   },
   "env": { "es6": true },
-  "ignorePatterns": ["node_modules", "build", "coverage", "proto"],
+  "ignorePatterns": [
+    "node_modules",
+    "build",
+    "coverage",
+    "proto",
+    "**/webpack.config.js",
+    "packages/headless-tests/**/*.js",
+    "packages/headless-tests/**/*.ts"
+  ],
   "plugins": ["import", "eslint-comments", "functional"],
   "extends": [
     "eslint:recommended",

.github/workflows/ci.yml

@@ -29,8 +29,8 @@ jobs:
         with:
           node-version: ${{ env.NODE_JS }}
       - uses: ./.github/actions/npm
-      - name: Install headless dependencies
-        run: cd packages/browser-tests/headless && npm install
+      - name: Install headless-tests dependencies
+        run: cd packages/headless-tests && npm install
       - run: npm run build
       - run: npm run check
       - run: npm run doc
@@ -45,8 +45,8 @@ jobs:
         with:
           node-version: ${{ env.NODE_JS }}
       - uses: ./.github/actions/npm
-      - name: Install headless dependencies
-        run: cd packages/browser-tests/headless && npm install
+      - name: Install headless-tests dependencies
+        run: cd packages/headless-tests && npm install
       - name: Generate protobuf code
         run: |
           npm run proto
@@ -72,8 +72,8 @@ jobs:
         with:
           node-version: ${{ env.NODE_JS }}
       - uses: ./.github/actions/npm
-      - name: Install headless dependencies
-        run: cd packages/browser-tests/headless && npm install
+      - name: Install headless-tests dependencies
+        run: cd packages/headless-tests && npm install
       - run: npm run build:esm
       - run: npm run test:browser
 

.github/workflows/playwright.yml

@@ -29,8 +29,8 @@ jobs:
 
     - uses: ./.github/actions/npm
 
-    - name: Install headless dependencies
-      run: cd packages/browser-tests/headless && npm install
+    - name: Install headless-tests dependencies
+      run: cd packages/headless-tests && npm install
 
     - name: Build browser test environment
       run: npm run build --workspace=@waku/browser-tests

package-lock.json

@@ -17,6 +17,7 @@
     "packages/rln",
     "packages/tests",
     "packages/browser-tests",
+    "packages/headless-tests",
     "packages/build-utils",
     "packages/react-native-polyfills"
   ],

package.json

@@ -6,7 +6,7 @@ This project provides a system for testing the Waku SDK in a browser environment
 
 The system consists of:
 
-1. **Headless Web App**: A simple web application that loads the Waku SDK and exposes shared API functions.
+1. **Headless Web App**: A simple web application (in the `@waku/headless-tests` package) that loads the Waku SDK and exposes shared API functions.
 2. **Express Server**: A server that communicates with the headless app using Playwright.
 3. **Shared API**: TypeScript functions shared between the server and web app.
 
@@ -19,9 +19,9 @@ The system consists of:
 npm install
 
 # Install headless app dependencies
-cd headless
+cd ../headless-tests
 npm install
-cd ..
+cd ../browser-tests
 ```
 
 2. Build the application:

packages/browser-tests/README.md

@@ -5,9 +5,9 @@
   "type": "module",
   "scripts": {
     "start": "npm run start:server",
-    "start:serve": "npx serve -p 8080 --no-port-switching ./headless -s",
+    "start:serve": "cd ../headless-tests && npx serve -p 8080 --no-port-switching . -s",
     "test": "npx playwright test",
-    "build:headless": "cd headless && npm run build",
+    "build:headless": "cd ../headless-tests && npm run build",
     "build:server": "tsc -p tsconfig.json",
     "build": "run-s build:*",
     "start:server": "node ./dist/server.js"
@@ -16,6 +16,7 @@
     "@types/cors": "^2.8.15",
     "@types/express": "^4.17.21",
     "@types/node": "^20.10.0",
+    "@waku/headless-tests": "*",
     "axios": "^1.8.4",
     "dotenv-flow": "^0.4.0",
     "npm-run-all": "^4.1.5",

packages/browser-tests/package.json

@@ -1,13 +1,16 @@
+// For dynamic import of dotenv-flow
+import { defineConfig, devices } from "@playwright/test";
+
 // Only load dotenv-flow in non-CI environments
 if (!process.env.CI) {
-  require("dotenv-flow/config");
+  // Need to use .js extension for ES modules
+  // eslint-disable-next-line import/extensions
+  await import("dotenv-flow/config.js");
 }
 
-import { defineConfig, devices } from "@playwright/test";
-
-const EXAMPLE_PORT = process.env.EXAMPLE_PORT;
+const EXAMPLE_PORT = process.env.EXAMPLE_PORT || "8080";
 // web-chat specific thingy
-const EXAMPLE_TEMPLATE = process.env.EXAMPLE_TEMPLATE;
+const EXAMPLE_TEMPLATE = process.env.EXAMPLE_TEMPLATE || "";
 const BASE_URL = `http://127.0.0.1:${EXAMPLE_PORT}/${EXAMPLE_TEMPLATE}`;
 
 /**
@@ -77,7 +80,7 @@ export default defineConfig({
     url: BASE_URL,
     stdout: "pipe",
     stderr: "pipe",
-    command: "npm start",
+    command: "npm run start:serve",
     reuseExistingServer: !process.env.CI,
     timeout: 5 * 60 * 1000 // five minutes for bootstrapping an example
   }

packages/browser-tests/playwright.config.ts

@@ -63,11 +63,11 @@ const messageQueue: MessageQueue = {};
 
 // Start the headless app server on port 8080
 async function startHeadlessServer(): Promise<void> {
-  return new Promise<void>((resolve, reject) => {
+  return new Promise((resolve, reject) => {
     try {
       console.log("Starting headless app server...");
       headlessServerProcess = exec(
-        `serve ${join(__dirname, "../headless")} -p 8080 -s`,
+        `serve ${join(__dirname, "../../headless-tests")} -p 8080 -s`,
         (error, stdout, stderr) => {
           if (error) {
             console.error(`Error starting serve: ${error}`);
@@ -82,8 +82,7 @@ async function startHeadlessServer(): Promise<void> {
       setTimeout(resolve, 2000);
     } catch (error) {
       console.error("Failed to start headless server:", error);
-      // Resolve anyway, we'll handle the missing server gracefully
-      resolve();
+      reject(error);
     }
   });
 }

packages/browser-tests/src/server.ts

@@ -0,0 +1,2 @@
+declare module "dotenv-flow/config";
+declare module "dotenv-flow/config.js";