Detailed introduction to Javascript unit testing framework QUnitjs_javascript skills

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 the official test suite for jQuery. But QUnit is generally sufficient to test any regular javascript code, and it may even be possible to test server-side JavaScript through some javascript engines such as Rhino or V8.
If you are unfamiliar with the concept of "unit testing", don't worry. It’s not that hard to understand:

Copy the codeThe code is as follows:

In computer programming, unit testing (also known as modules Testing) is the testing work to check the correctness of the program module (the smallest unit of software design). A program unit is the smallest testable component of an application. In procedural programming, a unit is a single program, function, process, 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 those tests pass, then you can be sure that the code has no defects (usually, again, it depends on how good your tests are) depends thoroughly).

2. Why should you 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 there are any problems, and try to solve the problems you find, using this There are many problems with the method.
First of all, this is boring. Clicking is actually not an easy job as you have to make sure everything is clicked and there is a good chance you missed one or two.

Secondly, everything you do for testing is not reusable, which means it is difficult to regress. What is regression? Imagine you write some code, test it, fix any defects you find, and then release it. At this point, a user sends in some feedback about a new bug and requires some new functionality. You go back into the code, fix these new defects and add new features. What may happen next is that some old defects reappear. This is called "regression". See, now you have to click again, and chances are you won't find these old bugs yet; and even if you do, it'll be a while before you figure out that your problem is caused by a regression. With unit testing, you write tests to find defects, and once the code is modified, you filter through the tests again. If a regression occurs, some tests will fail, and you can easily identify them and know which part of the code contains the error. Now that you know what you just modified, 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 in one browser, you fix it and re-run the test cases to make sure it doesn't cause regressions in other browsers. Once they all pass, you can be sure Say, all target browsers support it.

I would like to mention a project of John Resig: TestSwarm(http://testswarm.com/). It takes Javascript unit testing to the next level by making it distributed, it's a website with lots of test cases and anyone can go there and run some test cases and the results are returned back to the server. In this way, the code can be tested very quickly in different browsers and even different platforms.

3. 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:

Copy the code The code is as follows:

   
   
   
   
   
   
   


   

QUnit Test Suite

   

   

   

   

正如你所见，在这里使用了一个被托管的QUnit框架版本。
将要被测试的代码已被添加到 myProject.js 中，而且你的测试应该插入到 myTest.js 。要运行这些测试，只需在一个浏览器中打开这个 HTML 文件。现在到了写些测试的时间了。
单元测试的基石是断言：

断言是一个命题，预测你的代码的返回结果。如果预测是假的，断言失败，你就知道出了问题。

运行断言，你应该把它们放入测试案例：

复制代码 代码如下:

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

这里我们定义一个函数：isEven，用来检测一个数字是否为奇数，并且我们希望测试这个函数来确认它不会返回错误答案。
我们首先调用 test()，它构建了一个测试案例；第一个参数是一个将被显示在结果中的字符串，第二个参数是包括我们断主的一个回调函数。
我们写了5个断言，所有的都是布尔型的。一个布尔型的断言，期望它的第一个参数为true。第二个参数依然是要显示在结果中的消息。
这里是你想要得到的，只要你运行测试：

四、深入学习参考

以上只简单的介绍了 qunit.js ，其断言方法还有很多，具体可参考 api 文档：
http://api.qunitjs.com/
单元测试是一个在你发布你的代码前测试你的代码的非常好的方法。如果你以前没有写过任何的单元测试，现在是时候开始了！