Run headless browser test in CI and document example script

Author: jmatsushita

.github/workflows/build.yml

@@ -24,3 +24,6 @@ jobs:
 
       - name: Build and test project
         run: ./run_tests.sh
+
+      - name: Build and test in headless browser
+        run: ./run_headless_tests.sh

README.md

@@ -70,6 +70,10 @@ mocha.run();
 
 Running `npm run test:watch` in one terminal window and `npm run test:browser` in another will watch purescript source and tests files and automatically run node and browser tests.
 
+### Usage with headless browser 
+
+You can run `yarn test:headless` or `npm run test:headless` in this repo to see an example using the `test/index.html` file together with `mocha-headless-chrome`. Note that we need to disable-web-security in chromium to allow cross-origin requests.
+
 ## API Documentation
 
 See [docs on Pursuit](https://pursuit.purescript.org/packages/purescript-spec-mocha).

package.json

@@ -4,17 +4,19 @@
     "test:build:module": "spago bundle-module --main Test.Main --to ./output/test_module.js",
     "test:watch": "spago bundle-app --watch --main Test.Main --to ./output/test.js --then \"mocha ./output/test.js\"",
     "test:node": "$npm_execpath run test:build && mocha ./output/test.js",
+    "test:headless": "$npm_execpath run test:build && mocha-headless-chrome -f test/index.html -a disable-web-security",
     "test:browser": "$npm_execpath run test:build && parcel test/index.html --open",
     "test:browser:module": "$npm_execpath run test:build:module && parcel test/index_module.html --open"
   },
   "dependencies": {
     "bower": "^1.8.14",
     "esbuild": "^0.18.15",
-    "mocha": "^10.2.0",
+    "mocha": "^9.2.0",
     "purescript": "^0.15.10",
     "spago": "^0.21.0"
   },
   "devDependencies": {
+    "mocha-headless-chrome": "^4.0.0",
     "parcel": "^2.9.3"
   }
 }

run_headless_tests.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+
+set -e
+
+npx spago bundle-app --main Test.Main --to output/bundle.js
+
+# need to disable-web-security in chromium to allow cross-origin requests
+npx mocha-headless-chrome -f test/index.html -o output/test-output-headless.txt -a disable-web-security || echo "Checking test output..."
+
+fail() {
+    echo -e "\nTests output:\n"
+    cat output/test-output-headless.txt
+    exit 1
+}
+
+test_single() {
+    str="$1"
+    echo -n "${str}? "
+    if ! grep -q "$str" output/test-output-headless.txt; then
+        echo "Nope."
+        fail
+    else
+        echo "Yes!"
+    fi
+}
+
+test_single "\"passes\":2"
+test_single "\"pending\":1"
+test_single "\"failures\":2"