From the Uncluttered course
Go to file
HaQadosch 2a2e068329 fix 2023-11-26 20:43:18 +00:00
test-utils fix 2023-11-26 20:43:18 +00:00
.gitignore add info in doc 2023-11-25 08:13:09 +00:00
LICENSE Initial commit 2023-11-25 08:00:08 +01:00 create first html page 2023-11-26 20:36:58 +00:00 adding script to launch ffox 2023-11-25 19:23:17 +00:00
mochaChai.html fix 2023-11-26 20:43:18 +00:00


Org shortcut

Evaluate the line, apply the config in place
C-c C-c



So we need a webserver to display the HTML page. Since I'm keen on trying fancy pancy standard stuff in Webdev, let's do it to with GNU. Let's try and choose a webserver in Guile.

  guix install guile
  guile --version
guile (GNU Guile) 3.0.9
Copyright (C) 2023 Free Software Foundation, Inc.

License LGPLv3+: GNU LGPL 3 or later <>.
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

or Rust ?

We're exploring Rust as well, so maybe there is some fancy stuff here as well. I mean while we wait and learn about Guile anyway. Well, there's Rocket for Rust but I guess we can wait.

Nah, let's stick to Esbuild

Because this is what the book is doing and we don't want to waste too much time (it's 9:29pm) and I'm too tired for that.

Set up


Setting up the project is done via the repo template on github.1 Let's clone it from gitlab, or gitea ?


Recommended way is via curl, see the install page.

  curl -fsSL | sh

Now that you have esbulid, install it in your local path if you fancy. We can start a server from here.

  esbuild --serve=8888 --servedir=.
 > Local:
 > Network:
 > Network:
 > Network:
 > Network:


Local servers are considered secure by default. There is no need to over-engineer the setup. At least at this point. As for CORS and other security rules, we will fix them as they arise. No need to fix a problem until it actually becomes a pbm. The solution will be measured agains the reality of the situation. This is the sure way to avoid scope creeps.


Because you don't want to share the development setup with other projects or the usual browsing, e.g. same cookie origins, indexdb, and localstorage, … we can launch firefox with a dedicated profile. Assuming we all know where our firefox is launched from and that the esbuild server is running.

  set -eu

  DATA_DIR="$(mktemp -d -t 'firefox_unsafe_data_dir.XXXXXXXXXX')"
  /usr/local/bin/firefox/firefox-bin \
      -profile $DATA_DIR \
      -no-remote \
      -devtools \
      -url http://localhost:8888 \
      > /dev/null 2>&1 &!

Any good script should be checked against shellcheck Looks like there is a good doc about esbuild for dev server.

HTML file

The html file contains the testing libraries and loads the tools. It is using Mocha and Chai2.

And then some

Let's create 3 HTML files:

  • chai+mocha.html
  • tape.html
  • qunit.html

And see which one works best.


There is a page that describe the starter HTML page. It's using unpkg for both libraries. I'm going to do just that. Let's download the css and js file from the URL as used in the template html file.

Installing Chai is done by downloading the chai.js file from the repo. Last realease is 4.3.10 as per the URL but the exports says 4.3.8 🤷 Putting that in a folder test-utils/

  cd test-utils
  curl -O

As for mocha, we would use the unpkg URL directly.

  <!DOCTYPE html>
  <html lang="en">
      <meta charset="utf-8" />
      <title>Mocha Tests</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="/test-utils/mocha.css" />
          <script type="importmap">
           "imports": {
      <div id="mocha"></div>

      <script src="/test-utils/chai.js"></script>
      <script src="/test-utils/mocha.js"></script>

      <script class="mocha-init" type="module">
        mocha.setup({ ui: "tdd", timeout: "2000"})
        window.addEventListener("load", function () {
          // Callback so that the test results get reported to CI
 (failures) {
            window._testResults = {
              done: true,
              succeeded: failures ? false : true,
      <!-- Include the test files as script elements. -->
      <!-- <script src="/path/to/file.js" type="module"></script> -->

Displaying the file via esbuild will show 0 tests run.




2I don't know, possible alternatives are:

  • Tape
  • Qunit

They have really good scores in

1Which causes 2 problems:

  • It's github
  • I want to set up the project from scratch 🤷