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";

packages/browser-tests/types/dotenv-flow.d.ts

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es2021: true
+  },
+  extends: ["eslint:recommended"],
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: "module"
+  },
+  rules: {
+    // Disable rules that might cause issues with this package
+    "no-undef": "off"
+  }
+};

packages/headless-tests/.eslintrc.cjs

@@ -0,0 +1,23 @@
+# Waku Headless Tests
+
+This package contains a minimal browser application used for testing the Waku SDK in a browser environment. It is used by the browser-tests package to run end-to-end tests on the SDK.
+
+## Usage
+
+### Build the app
+
+```bash
+npm run build
+```
+
+### Start the app
+
+```bash
+npm start
+```
+
+This will start a server on port 8080 by default.
+
+## Integration with browser-tests
+
+This package is designed to be used with the browser-tests package to run end-to-end tests on the SDK. It exposes the Waku API via a global object in the browser. 

packages/headless-tests/README.md

@@ -1,4 +1,5 @@
-import { API } from "@src/api/shared";
+/* eslint-disable */
+import { API } from "../browser-tests/src/api/shared.ts";
 
 runApp().catch((err) => {
   console.error(err);
@@ -7,9 +8,7 @@ runApp().catch((err) => {
 async function runApp() {
   if (typeof window !== "undefined") {
     // Expose shared API functions for browser communication
-    // eslint-disable-next-line no-undef
     window.wakuAPI = API;
-    // eslint-disable-next-line no-undef
     window.subscriptions = [];
   }
 }

packages/browser-tests/headless/favicon.ico renamed to packages/headless-tests/favicon.ico

@@ -1,8 +1,9 @@
 {
-    "name": "headless",
+    "name": "@waku/headless-tests",
     "version": "0.1.0",
     "private": true,
     "homepage": "/headless",
+    "type": "module",
     "devDependencies": {
         "@babel/core": "^7.24.0",
         "@babel/preset-env": "^7.24.0",
@@ -20,6 +21,7 @@
     "scripts": {
         "start": "serve .",
         "build": "webpack",
-        "deploy": "gh-pages -d ."
+        "deploy": "gh-pages -d .",
+        "format": "eslint --fix webpack.config.js"
     }
 }

packages/browser-tests/headless/favicon.png renamed to packages/headless-tests/favicon.png

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "module": "commonjs",
+    "allowJs": true,
+    "checkJs": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": [
+    "**/*.js"
+  ]
+}

packages/browser-tests/headless/index.html renamed to packages/headless-tests/index.html

@@ -1,9 +1,15 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const path = require("path");
+/* eslint-disable */
+/**
+ * This webpack configuration file uses ES Module syntax.
+ */
+import path from 'path';
+import { fileURLToPath } from 'url';
+import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
 
-const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
-module.exports = {
+export default {
   entry: "./index.js",
   output: {
     filename: "bundle.js",