qunit directly, or from npm test, it will by default run test/**.js files in which you place QUnit.test() blocks to define your test cases.
karma-runner which lets you run QUnit tests in Headless Firefox/Chrome direclty from the CLI. The above examle-node-and-browser is for projects where your program is meant to support both node and browser. If you only need to support the browser, then you can use karma to run it in a browser from the CLI. Example: https://github.com/qunitjs/qunit/tree/main/test/integration/karma-qunit
npm run .. or npm test. To instal it globally in your path would mean that your computer in general has 1 central version of QUnit. This is useful for generic utilities like 'npm' itself, but
scripts.<something> where the command is available (the sub-shell that npm uses has $PWD/node_modules/.bin/ in its path), or that if you are debugging it to run directly, that you know to prefix it with ./node_modules/.bin/<command> or npx <command> or npm run <script> -- <args>
Okay, in that case the two main options I can recommend are:
karma. This would mean you set
files:in the karma config to the same list of scripts that your test HTML file currently loads, e.g. the source TS files and unit test files. You can use wildcards for simplicity. You will then need to enable a preprocessor in Karma for TypeScript. This is suppoted by Karma. I suspect you can skip the Webpack step, but it depends on whether you use it for any special features or not. This isn't specific to QUnit, but happy to help.Alternatively, you can ues grunt-contrib-qunit. This has the benefit of letting you re-use the existing unit test HTML page and existing webpack config. The downside is that you will then need to run webpack before starting the tests. For example
"test": "npm run build:dev && grunt qunit".
Pages/unittest.html as a file (not a URL). From what I can see, there is no such file in the repository at that location. There is src/Pages/unittests.html but this contains no JS. I'm guessing this is a template file that you serve through another web server? If so, specify the URL to that web server in Gruntfile.
Hello guys,
This is my first-ever javascript/html test.
I need to test my function on multiple html inputs.
For example see:
https://github.com/MozgC/chess.com/blob/main/QUnit/test.html &
https://github.com/MozgC/chess.com/blob/main/QUnit/test3.html
As you can see, there's a lot of code duplication at the beginning of html files.
How can avoid this duplication? <--- MAIN QUESTION
Let's say I need to test my getPgn() function on 10 different htmls and get 10 different returned values.
You can see I tried to load html for a 2nd test here:
https://github.com/MozgC/chess.com/blob/main/QUnit/test.html#L22
But it doesn't work
@MozgC When loading content from a separate file, this is usually asynchronous in JavaScript. That means it is kind of like it happens in the background while the code moves on. This is not specific to QUnit, but I can point you in the right direction.
For example, if you use the following, I imagine it works as expected:
QUnit.test('bla2', function(assert) {
$("#mainDiv").html(`<vertical-move-list board-id="board-vs-personalities">...</vertical-move-list>`);
var res2 = getPgn();
});Usually in JavaScript we use a Promise here and then await it from an async function. QUnit supports this as well, to make it easy to run an asynchronous preparation step like this, and then continue with the test after that is done.
For example:
QUnit.test('bla2', async function(assert) {
var loading = new Promise(function (resolve) {
$("#mainDiv").load("./test2.html", resolve);
} );
await loading;
var res2 = getPgn();
});Or, another way that may be simpler by using $.ajax directly instead of jQuery load():
QUnit.test('bla2', async function(assert) {
var myHtml = await jQuery.ajax( {
url: "./fixture2.html",
dataType: "html"
});
$("#mainDiv").html(myHtml);
var res2 = getPgn();
});More examples at https://api.qunitjs.com/QUnit/test/
Looks good? Any further improvement suggestions?
@MozgC Yeah, data providers could shorten this code a bit further.
If you like arrow function syntax, one could shorten loadHtmlFile a bit further as well, e.g. await new Promise(resolve => $(where).load(filename, resolve));
If you want to automate the testing during development (e.g. via npm test in VSCode, or manually on Windows with PowerShell, Git Bash, or WSL) or possibly to integrate with Jenkins CI or GitHub Actions, then you can checkout https://qunitjs.com/intro/#integrations. For example, you could use Node.js with npm and grunt-contrib-qunit and then have it so that npm test will run the test and print the results. If needed, you can keep setting --allow-file-access-from-files as now via Gruntfile.js.
But... that's a fair bit of extra work. That can be useful if you make a lot of changes or need to review changes by other people. Up to you! Testing manually as you do now certainly work as well. All the Node.js and npm stuff is optional with QUnit.