Qunit jquery's TDD framework _jquery

Source: Internet
Author: User
Tags how to write test cases

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/

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.