✅ Chrome unit testing (#3)

* 🚧 Backend work on omnibox apis

* 🚚 Move config files into `.config`

* ✅ Create a chrome level test runner

* 👷 Add unit tests to CI

* 🔨 Correct build script config path

* 👷 Run chrome tests under `xvfb`

.webpack/webpack.config.cjs → .config/webpack.config.cjs

@@ -28,6 +28,7 @@ exports.default = (env, argv) => {
       { title: 'Settings', folder: 'settings', outFolder: 'settings' },
       { title: 'Bookmarks', folder: 'bookmarks', outFolder: 'bookmarks' },
       { title: 'Credits', folder: 'credits', outFolder: 'credits' },
+      { title: 'Test runner', folder: 'tests', outFolder: 'tests' },
     ],
     dev,
   )
@@ -61,6 +62,9 @@ const sharedSettings = (contentFiles, dev) => {
     },
     resolve: {
       extensions: ['.ts', '.mjs', '.js', '.svelte'],
+      alias: {
+        '@shared': resolve('src/content/shared'),
+      },
     },
 
     devtool: dev ? 'inline-source-map' : 'source-map',
@@ -123,6 +127,10 @@ const sharedSettings = (contentFiles, dev) => {
           test: /\.(png|jpe?g|gif|svg|webp)$/i,
           type: 'asset/resource',
         },
+        {
+          test: /\.txt$/,
+          type: 'asset/source',
+        },
       ],
     },
     plugins: [

.github/workflows/main.yml

@@ -71,6 +71,11 @@ jobs:
       - name: Build
         run: pnpm build
 
+      - name: Run tests
+        uses: coactions/setup-xvfb@v1
+        with:
+          run: pnpm script:unit-test
+
       - name: De-symlink
         run: rsync .store/rt/ rt_dist/ -a --copy-links
       - name: Upload artifact

package.json

@@ -9,23 +9,27 @@
     "scripts:build": "tsc -p ./tsconfigs/tsconfig.scripts.json",
     "script:setup": "node ./.scripts/setup.js",
     "script:license-check": "node ./.scripts/license-check.js",
+    "script:unit-test": "node ./.scripts/unit-test.js",
     "app:start": "MOZ_ENABLE_WAYLAND=1 ./.store/rt/quark-runtime -no-remote",
     "app:startX": "./.store/rt/quark-runtime -no-remote",
     "build": "rm -rf dist && concurrently -c auto pnpm:build-*",
-    "build-content": "webpack --mode production",
+    "build-content": "webpack --mode production -c ./.config/webpack.config.cjs",
     "build-modules": "tsc -p ./tsconfigs/tsconfig.modules.json",
     "build-actors": "tsc -p ./tsconfigs/tsconfig.actors.json",
     "dev": "concurrently -c auto pnpm:dev-*",
-    "dev-content": "webpack serve --mode development",
+    "dev-content": "webpack serve --mode development -c ./.config/webpack.config.cjs",
     "dev-modules": "tsc -w -p ./tsconfigs/tsconfig.modules.json",
     "dev-actors": "tsc -w -p ./tsconfigs/tsconfig.actors.json",
     "rt:slink": "rm --force ./.store/artifact.tar.bz2 && ln -s ../../experiment-runtime/dist/experiment-runtime-1.0.0.en-US.linux-x86_64.tar.bz2 ./.store/artifact.tar.bz2",
-    "format": "pnpm script:license-check --fix && prettier . --write"
+    "format": "pnpm script:license-check --fix && prettier . --write",
+    "data": "concurrently -c auto pnpm:data:*",
+    "data:tld": "wget https://data.iana.org/TLD/tlds-alpha-by-domain.txt -O ./src/content/shared/search/providers/data/tld.txt"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@tinyhttp/app": "^2.2.1",
     "@tsconfig/svelte": "^5.0.2",
     "@types/node": "^20.8.4",
     "concurrently": "^8.2.1",
@@ -50,7 +54,8 @@
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
-    "webpack-license-plugin": "^4.4.2"
+    "webpack-license-plugin": "^4.4.2",
+    "zora": "^5.2.0"
   },
   "dependencies": {
     "@catppuccin/palette": "^0.2.0",
@@ -63,5 +68,17 @@
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]"
     }
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "src/prefs.js",
+        "options": {
+          "semi": true
+        }
+      }
+    ]
   }
 }

scripts/license-check.ts

@@ -10,7 +10,9 @@ import { walkDirectory } from './lib/fs.js'
 import { autoFix, isValidLicense } from './lib/license.js'
 import { failure } from './lib/logging.js'
 
-const IGNORED_FILES = new RegExp('.*\\.(json|patch|md|jpeg|png|gif|tiff|ico)')
+const IGNORED_FILES = new RegExp(
+  '.*\\.(json|patch|md|jpeg|png|gif|tiff|ico|txt)',
+)
 
 const shouldFix = argv.includes('--fix')
 const filesToCheck = [

scripts/unit-test.ts

@@ -0,0 +1,46 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { argv, exit } from 'node:process'
+import { App } from '@tinyhttp/app'
+import { type ExecaChildProcess, execa } from 'execa'
+
+// If you update this port, you should update the port in the test runner
+const TEST_PORT = 3948
+const TEST_RUNNER_URL = 'chrome://browser/content/tests/index.html'
+
+const shouldWatch = argv.includes('--watch')
+let testProcess: ExecaChildProcess<string>
+
+// This is the way that the test runner communicates with the test app
+new App()
+  .get('/config', (_, res) => void res.send({ shouldWatch }))
+  .post('/results', (req, res) => {
+    req.on('data', (chunk: Buffer) => {
+      console.log(chunk.toString())
+    })
+    req.on('close', () => {
+      res.send('ok')
+
+      if (!shouldWatch) {
+        testProcess?.kill()
+        exit()
+      }
+    })
+  })
+  .listen(TEST_PORT)
+
+if (!shouldWatch) {
+  testProcess = execa('./.store/rt/quark-runtime', [
+    '--no-remote',
+    '--chrome',
+    TEST_RUNNER_URL,
+  ])
+
+  // Timeout to ensure that tests actually start
+  setTimeout(() => {
+    testProcess?.kill()
+    exit(1)
+  }, 10_000)
+}

src/content/browser/components/tabs/tab.ts

@@ -3,13 +3,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { writable, type Writable } from 'svelte/store'
+import mitt from 'mitt'
+
 import {
   createBrowser,
   getBrowserRemoteType,
   setURI,
 } from '../../lib/xul/browser'
 import { domContentLoaded } from '../../lib/xul/domevents'
-import mitt from 'mitt'
 import { spinLock } from '../../lib/spinlock'
 import {
   viewableWritable,