HaQadosch/Uncluttered
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

create first html page

Browse Source
This commit is contained in:
HaQadosch 2023-11-26 20:36:58 +00:00
parent 916864d316
commit c3b01ef0aa
5 changed files with 20745 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
README.org
View File

@ -88,19 +88,84 @@ Looks like there is a [[https://how-to.dev/how-to-set-up-a-dev-server-with-esbui
** HTML file
The html file contains the testing libraries and loads the tools.
It is using Mocha and Chai[fn:2].
*** As intended
*** And then some
Let's create 3 HTML files:
- mocha.html
- chai+mocha.html
- tape.html
- qunit.html
And see which one works best.
*** Chai+Mocha
There is a [[https://mochajs.org/#running-mocha-in-the-browser][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.
[[https://www.chaijs.com/guide/installation/][Installing]] Chai is done by downloading the =chai.js= file from the repo.
Last realease is =4.3.10= as per the [[https://github.com/chaijs/chai/blob/v4.3.10/chai.js][URL]] but the exports says ~4.3.8~ :shrug:
Putting that in a folder =test-utils/=
#+name: download chai
#+begin_src shell
cd test-utils
curl https://github.com/chaijs/chai/blob/v4.3.10/chai.js -O
#+end_src
#+RESULTS: download chai
As for mocha, we would use the unpkg URL directly.
#+begin_src html
<!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>
#+end_src
Displaying the file via ~esbuild~ will show 0 tests run.
*** Tape
*** Qunit
* Footnotes
[fn:2] I don't know, possible alternatives are:
[fn:2]I don't know, possible alternatives are:
- Tape
- Qunit
They have really good scores in [[https://libraries.io/search?q=&platforms=NPM&sort=dependents_count][libraries.io]]

40
mochaChai.html Normal file
View File

@ -0,0 +1,40 @@
<!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/chai2.js"></script>
<script src="/test-utils/mocha2.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>

1
test-utils/chai.js Normal file
View File

File diff suppressed because one or more lines are too long

1
test-utils/mocha.css Normal file
View File

@ -0,0 +1 @@
Found. Redirecting to /mocha@10.2.0/mocha.css

20635
test-utils/mocha2.js Normal file
View File

File diff suppressed because it is too large Load Diff