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
README.org	create first html page	2023-11-26 20:36:58 +00:00
firefox.sh	adding script to launch ffox	2023-11-25 19:23:17 +00:00
mochaChai.html	fix	2023-11-26 20:43:18 +00:00

README.org

Uncluttered

Org shortcut
Webserver
Set up
- Repo
- Esbuild
- HTTPS
- Firefox
- HTML file
  - And then some
  - Chai+Mocha
  - Tape
  - Qunit
Footnotes

Org shortcut

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

Webserver

Guile

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 <http://gnu.org/licenses/lgpl.html>.
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

Repo

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

Esbuild

Recommended way is via curl, see the install page.

  curl -fsSL https://esbuild.github.io/dl/v0.19.7 | 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:   http://127.0.0.1:8888/
 > Network: http://192.168.1.140:8888/
 > Network: http://192.168.122.1:8888/
 > Network: http://10.0.3.1:8888/
 > Network: http://172.17.0.1:8888/

HTTPS

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.

Firefox

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.

  #!/bin/bash
  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 Chai².

And then some

Let's create 3 HTML files:

chai+mocha.html
tape.html
qunit.html

And see which one works best.

Chai+Mocha

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 https://github.com/chaijs/chai/blob/v4.3.10/chai.js -O

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

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <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": {
           }
           }
           </script>
      -->
    </head>
    <body>
      <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"})
        mocha.checkLeaks()
        window.addEventListener("load", function () {
          // Callback so that the test results get reported to CI
          mocha.run(function (failures) {
            window._testResults = {
              done: true,
              failures,
              succeeded: failures ? false : true,
            }
          })
        })
      </script>
      <!-- Include the test files as script elements. -->
      <!-- <script src="/path/to/file.js" type="module"></script> -->
    </body>
  </html>

Displaying the file via esbuild will show 0 tests run.

Tape

Qunit

Footnotes

²I don't know, possible alternatives are:

Tape
Qunit

They have really good scores in libraries.io

¹Which causes 2 problems:

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