test-utils | ||
.gitignore | ||
firefox.sh | ||
LICENSE | ||
mochaChai.html | ||
README.org |
Uncluttered
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.1 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 Chai2.
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
2I don't know, possible alternatives are:
- Tape
- Qunit
They have really good scores in libraries.io
1Which causes 2 problems:
- It's github
- I want to set up the project from scratch 🤷