{"id":21134248,"url":"https://github.com/okainov/qunit-getting-stated","last_synced_at":"2025-07-31T16:11:12.498Z","repository":{"id":83933709,"uuid":"144867465","full_name":"okainov/qunit-getting-stated","owner":"okainov","description":"Tutorial-like repo explaining how to start with QUnit (including command-line testing and CI setup)","archived":false,"fork":false,"pushed_at":"2018-08-15T17:40:31.000Z","size":10,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-10T16:50:11.228Z","etag":null,"topics":["getting-started","javascript","qunit","tdd","testing","travis-ci","tutorial"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/okainov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-15T15:00:38.000Z","updated_at":"2021-09-22T03:24:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"80fbd5dc-2775-4fa5-a0cb-6037603a278b","html_url":"https://github.com/okainov/qunit-getting-stated","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okainov%2Fqunit-getting-stated","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okainov%2Fqunit-getting-stated/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okainov%2Fqunit-getting-stated/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/okainov%2Fqunit-getting-stated/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/okainov","download_url":"https://codeload.github.com/okainov/qunit-getting-stated/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243581060,"owners_count":20314162,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["getting-started","javascript","qunit","tdd","testing","travis-ci","tutorial"],"created_at":"2024-11-20T06:25:44.421Z","updated_at":"2025-03-14T12:41:47.581Z","avatar_url":"https://github.com/okainov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Unofficial QUnit Getting Started [![Build Status](https://travis-ci.org/okainov/qunit-getting-stated.svg?branch=master)](https://travis-ci.org/okainov/qunit-getting-stated)\n\n[QUnit](https://qunitjs.com/) is a powerful, easy-to-use JavaScript unit testing framework.\n\nThe purpose of this repo is to provide some set of useful examples working with QUnit. \n\n**What is covered in this tutorial**:\n- Writing first test in QUnit, test results in HTML;\n- Configuring QUnit command-line runner, \"exporting\" functions from your file;\n- Having several test files;\n- Setting up Travis CI for simple JS project.\n\n**What is _not_ covered**\n- Any other JS unit-testing libraries and comparison, \"why QUnit?\";\n- Why should you use unit testing at all?\n\nIf you are not interested in the very basics, feel free to skip first sections and proceed directly to [Command-line runner](#command-line-runner)  section\n\n## Hello, QUnit!\n\nHow to start from scratch?\n\nSimple file tree structure may look like:\n\n```sh\n    project\n    │   index.js \u003c--- Your script with logic\n    │   package.json \u003c--- most probably you'll have npm file since qunit executable is installed via npm\n    └───test\n            tests.html \u003c--- QUnit tests included in standard HTML page for \"running\" locally\n            tests.js \u003c--- QUnit test code\n```\n\nLet's start from your main functional script `index.js`. For now just create it empty. All your functional code will go there.\nThen create tests files. The simplest `tests.js` may look like:\n```js\nQUnit.test(\"true is true\", function (assert) {\n    assert.ok(true === true, \"Passed!\");\n});\n```\n\nFollowing the quickstart from the official page, create HTML file `tests.html` where QUnit will put test report\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width\"\u003e\n  \u003c!-- Uncomment next line if you want automatic page reload --\u003e\n  \u003c!-- \u003cmeta http-equiv=\"refresh\" content=\"7\"\u003e --\u003e\n  \u003ctitle\u003eHi command-line testing in QUnit!\u003c/title\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://code.jquery.com/qunit/qunit-2.6.1.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"qunit\"\u003e\u003c/div\u003e\n  \u003cdiv id=\"qunit-fixture\"\u003e\u003c/div\u003e\n  \u003c!-- Don't forget to include both your script and test scripts here --\u003e\n  \u003cscript type=\"text/javascript\" src=\"../index.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://code.jquery.com/qunit/qunit-2.6.1.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"tests.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThat's it. Now you can open `tests.html` in your favorite browser and see the magic happening.\n\n![Tests are green!](https://i.imgur.com/WBzRQAB.png)\n\n\n## First function\nBut that's not very interesting, huh? Let's write something more functional. I recommend you to try TDD approach \n(for further reading see [DWYL](https://github.com/dwyl/learn-tdd) TDD tutorial), so  let's try to write red test first.\nWe may want to write something like `calculateSum` function which wil basically  add two numbers and return the result. \nBut we don't need to function itself to start working with it - so we start with test. Probably, sum of 0 and 0 should be 0,\nhere is the corresponding test, just add it to `tests.js` in addition to existing test checking true :)\n\n```js\nQUnit.test(\"0 + 0 = 0\", function (assert) {\n    assert.equal(calculateSum(0,0), 0, \"Passed!\");\n});\n```\n\nIf you check the test result page now you'll obviously see a red test. \n\n\u003e  Died on test #1 calculateSum is not defined\n\u003e Source:\tReferenceError: calculateSum is not defined\n\nBut this is not the red test you need according to TDD, because it's an *error*, but not a *failure*. To make it proper red, \nwe need to add calculateSum function to our `index.js`.\n```js\nfunction calculateSum() {\n}\n```\n\nThis makes the error disappear and now we have a proper red test\n\n\u003e Expected: 0\n \u003e Result: undefined\n\n![Red tests are normal](https://i.imgur.com/tgmp1h8.png)\n\nAnd now we're ready to make it green again by adding `return 0;` statement. There is nothing to refactor, so we can continue further.\n\nAt this point we already covered main functionality and it's possible to develop and test some JS functions you need. \nBut of course for more complicated projects you may need something else...\n\n## Command-line runner\n\nIt's nice to have pretty HTML page which can display test results, but what if you prefer \"hardcore\" shell way or you want to run it on remote machine?\nLuckily for us, QUnit has its own command-line runner. Probably the simplest option will be to install it using node: `npm install -g qunit`. \nAfter that you can type `qunit` and hope that it will work... but in reality it's a bit more difficult. \nThe error you'll see in the terminal is again about undefined function:\n\n\u003e  Died on test #1 calculateSum is not defined\n\u003e Source:\tReferenceError: calculateSum is not defined\n\n But this time we know that it's now due to our code, but we need to tweak the system a bit. The issue here is that test \n code doesn't know about functional code (`index.js`). In case of HTML page we included both scripts and they magically matched each other. \n However now there is not HTML page combining scripts together and, more unfortunate, there is no build-in Javascript functionality to \"import\" scripts. \n Luckily, there is some in node.js already and since QUnit runner was installed from node, it already has all the dependencies. \n \n We will import our script into test code using `require` function which comes from node. Add following on top of `tests.js`\n \n ```js\n// Use \"require\" only if run from command line\nif (typeof(require) !== 'undefined') {\n    calculateSum = require('../index.js').calculateSum;\n}\n```\n\nIf you wonder about condition, it's required to keep HTML page working, because browser doesn't know anything about `require`.\nIn addition to importing file, it's necessary to export desired functions *from* `index.js`. This can be easily done by adding\nfollowing lines to the very bottom of the file:\n\n```js\n// Export only if run in command-line mode\nif (typeof module !== 'undefined' \u0026\u0026 module.exports) {\n    exports.calculateSum = calculateSum;\n}\n```\n\nIf everything is set up correctly, now you should be able to see green tests both in browser AND in terminal using `qunit` command.\n\n![CLI runner](https://i.imgur.com/aBst7EV.png)\n\n## CI\n\nIt's always nice to have machine checking your code, because it will not forget and you won't be able to say \"it's working on my machine\" any more. \nOne of the most popular and simpe option is [Travis CI](https://travis-ci.org/). To enable our project we will need to add two additional files to the repository\n\nFirst is `package.json` file to tell Travis (and other people visiting your repo!) about project's dependencies. In our case there is only one - QUnit itself.\nAnd this is devDependency because it's not required to use your script, but only for development and testing. ALso we specify command which should be executed when \n`npm test` is called, which is standard way to run tests for node projects. \n```json\n{\n  \"dependencies\": {},\n  \"devDependencies\": {\n    \"qunit\": \"^2.6.1\"\n  },\n  \"scripts\": {\n    \"test\": \"qunit\"\n  }\n}\n``` \n\nFinally, we need to tell Travis about our set up. For this purposes we create `.travis.yml` and specify our project type (node) and node version \n(`node` stands for \"latest stable\")\n ```yaml\nlanguage: node_js\nnode_js:\n  - \"node\"\n```\n\n\nInspired by [QUnit](https://qunitjs.com/) and [DWYL tutorials](https://github.com/dwyl/learn-qunit).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fokainov%2Fqunit-getting-stated","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fokainov%2Fqunit-getting-stated","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fokainov%2Fqunit-getting-stated/lists"}