Before discussing jQuery TDD, let’s first understand what a standard TDD framework is. As a standard TDD framework, several requirements must be met:
1. Even if the test script error occurs, you must continue to run the next script.
2. Can write test cases without relying on the tested code. Even if the code is not implemented, you can write test cases first.
3. Able to display detailed error information and location
4. Be able to count the number of passed and failed use cases
5. There is a dedicated visual interface for statistics and tracking test cases
6. Easy to get started, you can start writing test code immediately with some simple instructions.
QUnit has achieved all the above requirements, which is why I recommend QUnit.
QUnit can now run independently without jQuery, which is another reason for its success, that is, its compatibility is good. In fact, in strict sense, it is no longer a jQuery testing framework, but a JavaScript testing framework. Interestingly, you will find that the comments of QUnit have changed slightly, as follows
This also shows that the QUnit code has been specially adjusted to enable it to run without JQuery.
Download Qunit
Download the qunit code and go to/jquery/qunit, the code there is the latest.
How to use QUnit
Using QUnit is very simple. You only need the following html code and the initial setup is completed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/"> <html xmlns="http:///1999/xhtml" > <head> <title>My Foo Tests</title> <link href="" type="text/css" rel="stylesheet"/> <script language="javascript" src="jquery-1.4." type="text/javascript" /> <script language="javascript" src="" type="text/javascript"/> </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>
QUnit not only provides you with test script functions, but also provides a standardized test interface for your unit tests. As shown in the figure below, the red indicates that the test case did not pass, and the green indicates that the test case is passed. Each box ratio represents a test function, which may have the result of multiple assertion statements. In the title (x, y, z) means that there are z assertions in total, y is correct, and x is wrong.
I just took a preliminary look at the interface. Now let's learn how to use it./jquery/jquery/raw/master/test/unit/Download a sample test code, which is the code used by jQuery to test its core module.
Add <script language="javascript" src="" type="text/javascript"></script> to <head></head>, and be careful to be after the declaration, because the defined functions are used.
At this time, you run the html file we created just now, and you will see the results similar to the above picture. This is the test result. Is it clear? If you are testing your own function, you can track the problem according to the red error prompt until all the test results turn green.
How to write a test script
I suggest you refer to the writing method of the test script/Qunit#Reference_Test_Suites, There are some test cases files mentioned here, you can use them to study how to write test cases, although some test cases are no longer available.
The most commonly used functions are:
expect(amount) - Specifies how many assertions there will be in a function, usually written at the beginning of a test function.
module(name) - A module is a collection of test functions that can be classified by module in the UI.
ok(state, message) – Boolean assertion, message is specially displayed on the QUnit interface to distinguish different assertions
equals(actual, expected, message) - Equal assertion, only when the actual and expected values are equal.
same(actual, expected, message) - Complete equality assertion, the difference between equals is that it compares child elements, which is very useful for comparing arrays and some custom objects.
These are the most commonly used ones, and you can refer to the official Qunit document for the others yourself.
The first QUnit test case
Suppose we write a function like this and calculate the result of a+b, as follows
function CalculateAPlusB(a,b) { return a+b; }
Add a separate js reference to the page to write function specifically for unit tests, such as:
<script language="javascript" src="" type="text/javascript"/>
The specific test code is as follows
test("basic calculation", function() { equals(CalculateAPlusB(1,5),6,"1+5=6"); equals(CalculateAPlusB(1.2,5.5),6.7,"1.2+5.5=6.7"); equals(CalculateAPlusB(-1,10),9,"-1+10=9"); }); test("pass null test", function() { ok(isNaN(CalculateAPlusB(null,5)),"pass null as the first argument"); ok(isNaN(CalculateAPlusB(5,null)),"pass null as the second argument"); ok(isNaN(CalculateAPlusB(null,null)),"no argument pass in"); });
The test method is a statement used by qunit to define the test method. The first parameter represents the name of the test case, and the second parameter is the specific implementation. equals is used to compare whether the expected value and the actual value are consistent, and ok is used to determine whether the result is true.
If all goes well, you will see results similar to the one below.
Congratulations to yourself at this time, because all the test results are green, which means that these tests have passed. Of course, here are just two examples. You can write more test cases to test this method, such as the case of overflow of test values.
References
/blogs/chad_myers/archive/2008/08/28/
/Qunit
/2009/11/24/test-driven-development-with-jquery-qunit/
/essays/
/2010/javascript-unit-testing-qunit/