Javascript unit testing framework QUnitjs details

2020-03-30 02:53:51
OfStack

What is QUnit

QUnit (http://qunitjs.com/) is a very powerful javascript unit testing framework that lets you debug your code. It was written by a member of the jQuery team and is the official test suite for jQuery. But QUnit is generally good enough to test any regular javascript code, and it may even test server-side javascript through some javascript engine such as Rhino or V8.
If you are unfamiliar with the concept of "unit testing," don't worry. It's not hard to understand:


 In computer programming, unit tests (also known as module tests) are for program modules ( The smallest unit of software design ) To carry out the test work of correctness check. A program unit is the smallest testable part of an application. In procedural programming, a unit is a single program, function, procedure, etc. For object-oriented programming, the smallest units are methods, including methods in a base class (superclass), an abstract class, or a derived class (subclass).   -   From wikipedia.

Simply put, you write tests for every feature of your code, and if all of those tests pass, you can be sure that the code has no defects (usually, depending on how thorough your tests are).

Why are you testing your code

If you've never written any unit tests before, you might just post your code on the web site, click on it to see if anything goes wrong, and try to fix what you find. There are a lot of problems with this approach.
First of all, it's very annoying. Clicking isn't actually an easy job, because you have to make sure everything is clicked on and there's a good chance you missed one or two.

Second, everything you do for testing is not reusable, which means it's hard to get back. What is regression? Imagine writing some code, testing it, fixing all the bugs you find, and then releasing it. At this point, a user sends some feedback about a new defect and needs some new functionality. You go back to the code, fix these new bugs and add new functionality. What may happen next is that some of the old defects reappear. This is called a "regression." See, now you're going to have to click again, and there's a chance you won't be able to find these old caches; Even if you do, it will take a while to figure out that your problem is caused by regression. With unit tests, you write tests to find defects, and once the code is modified, you filter through the tests again. If regression occurs, some tests are bound to fail, and you can easily identify which parts of the code contain errors. Now that you know what you just changed, you can fix it easily.

I would like to mention one of John Resig's projects: TestSwarm (http://testswarm.com/). It takes Javascript unit testing to a new level, by making it distributed, and this is a website that contains a lot of test cases, and anyone can go there and run some test cases, and then return the results back to the server. In this way, the code can be quickly tested in different browsers and even run on different platforms.

How to write unit tests with QUnit

So, how do you write unit tests correctly with QUnit? First, you need to set up a test environment:


<!DOCTYPE html>
<html>
<head>
    <title>QUnit Test Suite</title>
    <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen">
    <script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/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 version of the QUnit framework 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:

An assertion is a proposition that predicts the return of your code. If the prediction is false and the claim fails, you know something is wrong.

To run assertions, you should put them into test cases:


// 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');
})

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201458101554325.png? 201448101618 ">

Four, in-depth study of reference

The above is only a brief introduction of qunit.js, there are many assertion methods, specific can refer to the API documentation:
http://api.qunitjs.com/
Unit testing is a great way to test your code before you release it. If you haven't written any unit tests before, now is the time to start!