Before discussing jQuery TDD, let's first understand what is a standard TDD framework. As a standard TDD framework, the following requirements must be met:
1. Even if the test script has an error, continue to run the subsequent script.
2. Write test cases without relying on the tested code. You can write test cases first even if the code is not implemented.
3. Displays detailed error information and locations.
4. 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 use. With some simple instructions, you can immediately start writing test code.
The above requirements are met by QUnit, which is why I recommend QUnit.
Currently, QUnit can run independently from jQuery. This is another reason for its success, that is, its compatibility is good. In fact, it is strictly not a jQuery testing framework, it is a JavaScript testing framework. Interestingly, you will find that the comment of QUnit has undergone minor changes, as shown below:
This also shows that the QUnit code has been specially adjusted to enable it to run without JQuery.
Download Qunit
To download the qunit code, go to http://github.com/jquery/qunit, where the code is the latest.
How to Use QUnit
Using QUnit is simple. You only need the following html code to complete the initial settings.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">QUnit not only provides you with the test script function, but also provides a standardized test interface for your unit test, as shown in red, indicating that the test case has not passed and the test case has passed in green. Each frame ratio represents a test function, which may have the results of multiple asserted statements. In the title (x, y, z), there are a total of z assertions, and y are correct, x is incorrect.
Just a preliminary look at the interface, now we are going to learn how to use it.
Add <script language = "javascript" src = "core. js "type =" text/javascript "> </script>. Be sure to use qunit. js declaration later, because core. qunit is used in js. functions Defined by js.
Then you run the html file we just created, and you will see similar results. This is the test result of core. js. Is it clear? If you are testing your function, you can track the problem based on the red error prompt until all the test results are green.
How to Write test scripts
Test script writing method. I suggest you refer to idea.
Common functions include:
Round CT (amount)-specifies the number of assertions in a function, usually written at the beginning of the test function.
Module (name)-a set of test functions. You can use this function to classify test functions by module in the UI.
OK (state, message)-Boolean assertions. message is specially displayed on the QUnit interface to distinguish different assertions.
Equals (actual, expected, message)-equal assertions. The values of actual and expected are equal.
Same (actual, expected, message)-completely equal assertions. The difference with equals is that it compares subelements and is very useful for arrays and some custom objects.
These are the most common ones. For other users, refer to the official Qunit documentation.
First QUnit test case
Suppose we write such a function and calculate the result of a + B, as shown below:
function CalculateAPlusB(a,b){ return a+b;}Add a separate js reference to the page for writing unit test functions, such as test. js.
<script language="javascript" src="test.js" 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 the statement used by qunit to define the test method. The first parameter indicates the name of the test case, and the second parameter indicates the specific implementation. Equals is used to compare whether the expected value is consistent with the actual value, and OK is used to determine whether the result is true.
If everything goes well, you will see a result similar to the following.
Congratulations, because all the test results are green, which means these tests have passed. Of course, here is only two examples. You can write more test cases to test this method, for example, test value overflow.
References
Http://www.lostechies.com/blogs/chad_myers/archive/2008/08/28/getting-started-with-jquery-qunit-for-client-side-javascript-testing.aspx
Http://docs.jquery.com/Qunit
Http://www.swift-lizard.com/2009/11/24/test-driven-development-with-jquery-qunit/
Http://www.agiledata.org/essays/tdd.html
Http://www.oncoding.cn/2010/javascript-unit-testing-qunit/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
