1. What is QUnit
QUnit (http://qunitjs.com/) is a very powerful javascript unit testing framework that can help you debug your code. It was written by members of the jQuery team and is an official test set for jQuery. But QUnit is generally enough to test any regular javascript code, it may even test server-side JavaScript through some javascript engines such as Rhino or V8.
If you are not familiar with the concept of "unit testing", please don't worry. This is not very difficult to understand:
The code copy is as follows:
In computer programming, unit testing (also known as module testing) is a test that performs correctness testing on program modules (the smallest unit of software design). The program unit is the smallest testable component for the application. In procedural programming, a unit is a single program, function, procedure, etc.; for object-oriented programming, the smallest unit is a method, including methods in base classes (superclasses), abstract classes, or derived classes (subclasses). ― Quoted from Wikipedia.
Simply put, you write tests for every feature of your code, and if all of these tests pass, then you can be sure that the code is not flawed (usually, it depends on how thorough your test is).
2. Why do you want to test your code
If you have never written any unit tests before, you may directly upload your code to the website, click for a while to see if any problems arise, and try to solve the problems you found. There will be many problems with this method.
First of all, this is very annoying. Clicking isn't actually an easy job, because you have to make sure everything is clicked and there's a good chance you've missed one or two.
Second, everything you do for testing is not reusable, which means it is difficult to regress. What is return? Imagine you wrote some code and tested it, fix all the flaws you found, and then post it. At this point, a user sends some feedback about the new flaws and requires some new features. You go back to the code, fix these new flaws and add new features. What may happen next is that some old flaws reappear, which is called "return". Look, now you have to click again, and it is possible that you can't find these old burden flaws; even if you do, it will take some time to figure out that your problem is caused by the regression. Using unit tests, you write tests to find defects, and once the code is modified, you filter through the test again. If the regression occurs, some tests will definitely fail, and you can easily recognize them and know which part of the code contains the error. Now that you know what you modified just now, it can be easily solved.
Another advantage of unit testing, especially for web development: it makes cross-browser compatibility testing easy. Just run your test cases in different browsers. If there is a problem with one browser, you fix it and re-run these test cases to ensure that there is no regression in other browsers. Once all of them pass the test, you can say with certainty that all target browsers support it.
I want to mention a project by John Resig: TestSwarm(http://testswarm.com/). It takes Javascript unit testing to a new level, by making it distributed, this is a website that contains many test cases that anyone can go there to run some test cases and then return the results to the server. In this way, the code will be tested very quickly on different browsers, or even run on different platforms.
3. How to write unit tests with QUnit
So, how do you correctly write unit tests with QUnit? First, you need to set up a test environment:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<title>QUnit Test Suite</title>
<link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit/qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit/qunit.js"></script>
<!-- Your project file goes here -->
<script type="text/javascript" src="myProject.js"></script>
<!-- Your tests file goes here -->
<script type="text/javascript" src="myTests.js"></script>
</head>
<body>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>
As you can see, a managed QUnit framework version is used here.
The code to be tested has been added to myProject.js, and your test should be inserted into myTest.js. To run these tests, simply open the HTML file in a browser. Now it's time to write some tests.
The cornerstone of unit testing is the assertion:
Assertion is a proposition that predicts the return result of your code. If the prediction is false and the assertion fails, you know something is wrong.
Run assertions and you should put them into the test case:
The code copy is as follows:
// Let's test this function
function isEven(val) {
return val % 2 === 0;
}
test('isEven()', function() {
ok(isEven(0), 'Zero is an even number');
ok(isEven(2), 'So is two');
ok(isEven(-4), 'So is negative four');
ok(!isEven(1), 'One is not an even number');
ok(!isEven(-7), 'Neither is negative seven');
})
Here we define a function: isEven, which is used to detect whether a number is an odd number, and we want to test this function to confirm that it will not return the wrong answer.
We first call test(), which builds a test case; the first parameter is a string to be displayed in the result, and the second parameter is a callback function that includes our interrupted master.
We wrote 5 assertions, all of which are boolean. A boolean assertion that expects its first argument to be true. The second parameter is still the message to be displayed in the result.
Here is what you want to get, as long as you run the test:
4. In-depth learning reference
The above only briefly introduces qunit.js, and there are many assertion methods. For details, please refer to the API documentation:
http://api.qunitjs.com/
Unit testing is a very good way to test your code before you publish it. If you haven't written any unit tests before, now is the time to start!