Before we discuss jquery TDD, let's take a look at what is a standard TDD framework. As a standard TDD framework, there are several requirements that must be met:
1. You can continue to run the next script even if the test script goes wrong
2. Be able to write test cases without relying on the test code, even if the code is not implemented, you can write test cases first
3. Ability to display detailed error information and location
4. Ability to count the number of passed and failed use cases
5. A dedicated visual interface for statistical and tracking test cases
6. Easy to use, with a few simple instructions to start writing test code immediately.
All these requirements qunit have done, which is why I recommend Qunit.
Qunit has now been able to run away from jquery independently, which is another reason for its success, namely, compatibility, in fact, it is not a jquery test framework in the strict sense, but the JavaScript test framework. Interestingly, you will find that Qunit's notes have undergone minor changes, as follows
This also means that Qunit's code has been tweaked to make it run out of jquery.
Download Qunit
Download Qunit code can go to Http://github.com/jquery/qunit, where the code is up to date.
How to use Qunit
Using Qunit is simple, you need only the following HTML code, and the initial setup is complete.
<!DOCTYPE Html Public "-//w3c//dtd XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns= "Http://www.w3.org/1999/xhtml" > <Head> <Title>My Foo Tests</Title> <Link Href= "Qunit.css" Type= "Text/css" Rel= "stylesheet"/> <Script Language= "JavaScript" Src= "Jquery-1.4.2.js" Type= "Text/javascript" /> <Script Language= "JavaScript" Src= "Qunit.js" 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 a test script function, but also provides a standardized test interface for your unit tests, as shown in the following illustration, where the red indicates that the test case did not pass and the green expression passed. Each frame ratio represents a test function, which may have the result of multiple assertion statements, in which the caption (x,y,z) indicates a total of z asserts, Y is correct, and X is wrong.
Just a preliminary look at the next interface, now we come to learn how to use, I from http://github.com/jquery/jquery/raw/master/test/unit/ Core.js Downloads a core.js sample test code, which is the code that jquery uses to test its core modules.
Add <script language= "JavaScript" src= "Core.js" type= "Text/javascript" ></script in
Then you run the HTML file we created just now, and you'll see the results like the one above, which is Core.js's test results. If you are testing your own functions, you can follow the red error hints to track the problem until you turn all the test results into green.
How to write a test script
To test the script, I suggest you refer to Http://docs.jquery.com/Qunit, which contains references to a number of test cases, which you can use to study how to write test cases, even though some test cases have run out of work.
The more commonly used functions are:
Expect (amount)-Specifies how many assertions will be in a function, usually written at the beginning of a test function.
Module (name)-modules are a collection of test functions that you can use to categorize test functions into modules in the UI.
OK (state, message) – Boolean assertion, message is specifically displayed on the Qunit interface to distinguish between different assertions
Equals (actual, expected, message)-equality assertion, actual and expected values are equal to pass.
Same (actual, expected, message)-The exact equality assertion differs from equals in that it compares child elements and is useful for arrays and some custom objects.
These are the most commonly used, others can refer to Qunit official documents themselves.
First Qunit test case
Let's say we write a function that calculates the results of a+b, as follows
function Calculateaplusb (a,b)
{return
a+b;}
Add a separate JS reference to the page to write the unit test function, such as Test.js
<script language= "JavaScript" src="test.js" type=" text/javascript"/>
The specific test code is as follows
Test (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 (function () {OK (isNaN (CALCULATEAPLUSB (null,5)), "Pass NULL as the" the "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 that Qunit uses to define the testing method, whose first argument represents the name of the test case, and the second is the implementation. equals is used to compare expectations with actual values, OK is used to determine whether the result is true.
If all goes well, you will see results similar to the following.
You should congratulate yourself, because all the test results are green, which means that these tests are passed. Of course here are just 2 examples, you can write more test cases to test this method, such as measuring the value of overflow.
Resources
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
