create first html page
This commit is contained in:
parent
916864d316
commit
c3b01ef0aa
71
README.org
71
README.org
@ -88,19 +88,84 @@ Looks like there is a [[https://how-to.dev/how-to-set-up-a-dev-server-with-esbui
|
|||||||
** HTML file
|
** HTML file
|
||||||
The html file contains the testing libraries and loads the tools.
|
The html file contains the testing libraries and loads the tools.
|
||||||
It is using Mocha and Chai[fn:2].
|
It is using Mocha and Chai[fn:2].
|
||||||
*** As intended
|
*** And then some
|
||||||
Let's create 3 HTML files:
|
Let's create 3 HTML files:
|
||||||
- mocha.html
|
- chai+mocha.html
|
||||||
- tape.html
|
- tape.html
|
||||||
- qunit.html
|
- qunit.html
|
||||||
|
|
||||||
|
|
||||||
And see which one works best.
|
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
|
*** Tape
|
||||||
*** Qunit
|
*** Qunit
|
||||||
|
|
||||||
* Footnotes
|
* Footnotes
|
||||||
[fn:2] I don't know, possible alternatives are:
|
[fn:2]I don't know, possible alternatives are:
|
||||||
- Tape
|
- Tape
|
||||||
- Qunit
|
- Qunit
|
||||||
They have really good scores in [[https://libraries.io/search?q=&platforms=NPM&sort=dependents_count][libraries.io]]
|
They have really good scores in [[https://libraries.io/search?q=&platforms=NPM&sort=dependents_count][libraries.io]]
|
||||||
|
40
mochaChai.html
Normal file
40
mochaChai.html
Normal 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
1
test-utils/chai.js
Normal file
File diff suppressed because one or more lines are too long
1
test-utils/mocha.css
Normal file
1
test-utils/mocha.css
Normal file
@ -0,0 +1 @@
|
|||||||
|
Found. Redirecting to /mocha@10.2.0/mocha.css
|
20635
test-utils/mocha2.js
Normal file
20635
test-utils/mocha2.js
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user