The jquery team builds the JavaScript Unit test Tool Qunit Introduction _jquery

Source: Internet
Author: User
Tags assert
What is unit testing?

Unit testing, also known as module testing, is a test work for correctness testing of program modules (the smallest unit of software design). Unit tests are primarily used to verify the internal logic of a program, also known as an individual test, a structural test, or a logic-driven test. This is usually done by the programmer who writes the code.

Typically, the programmer will perform at least one unit test every time a program is modified, there is a good chance that you will be able to perform multiple unit tests before the program is programmed to prove that the program reaches the working targets required by the software spec book (en:specification), and that there is no worms; , but it's not bad, it's a policy decision that involves the management of the case.

--Wikipedia ( Chinese , English )

Advantages of Unit Testing

1, it is a validation behavior.
Every function in a program is a test to verify its correctness. It provides support for future development. Even in the late stages of development, we can easily add functionality or change the structure of the program without worrying about breaking important things in the process. And it provides a guarantee for the refactoring of the code. In this way, we can be more free to improve the program.

2, it is a design behavior.
Writing unit tests will enable us to observe and think from the caller. In particular, the first write test (Test-first), forcing us to design into easy to invoke and testable, that is, forcing us to remove the coupling in the software.

3, it is a document-writing behavior.
A unit test is a priceless document that is the best document to show how a function or class is used. This document is compiled, can be run, and it stays up to date and always synchronizes with code.

4. It has a regressive nature.
Automated unit testing avoids the return of code, and can quickly run tests anytime, anywhere, after writing is complete.

Reference:

Http://miiceic.org.cn/phrase/200602281036115.html

Http://tech.ddvip.com/2009-06/1245992965124860.html

Http://www.blogjava.net/square/articles/158103.html

Unit Test framework in Javscript

  • JsUnit
    A systematic solution, based on the Xnuit specification, should be easy to use, including the server Side (Java), if you are using a framework such as JUnit, NUnit, and so on. http://www.jsunit.net/
    Evaluation: Very comprehensive, professional, suitable for large enterprise-level development.
  • Test.simple & Test.more
    This is the test framework recommended by the father of jquery, John Resig, in his book Pro Javascript http://openjsan.org/doc/t/th/theory/Test/Simple/0.21/lib/ Test/simple.html .
    Evaluation: Very easy to use, very concise, suitable for small and medium-sized projects to quickly introduce unit testing.
  • Fireunit
    This was made by John Resig, and in his blog, John Resig-fireunit:javascript Unit testing Extension, released him with a man who had been in the Odvarko Cooperative development based on Firebug extended Fireunit.

    Simply put, Fireunit adds a label panel to Firebug and provides a few simple JavaScript APIs to record and view the tests. More http://shawphy.com/2008/12/fireunit.html.
    Evaluation: There are traces of test.simple, oh, John Resig is very good at learning and innovation of the guy. Fireunit is very good at ease of use, very suitable for the front-end engineers based on Firebug debugging environment.

  • Qunit
    Qunit is a JavaScript unit test tool developed by the jquery team and can be downloaded to http://docs.jquery.com/QUnit

    Evaluation: Easy to use and beautiful interface.

Reference:
Http://www.cnblogs.com/kaima/archive/2009/04/09/javascritp_unittest.html

Here are our main points to introduce Qunit

Qunit Introduction

JavaScript still needs to be readable, so refactoring is essential, and we know that no unit test refactoring is unreliable, and that having good unit test coverage makes it easier and cheaper to refactor, so it's very important for good JavaScript programmers to have a unit test framework, Qunit is a powerful and easy-to-use JavaScript test framework that is used in the testing of jquery and its plug-ins, and it can also test common JavaScript code.

using Qunit

First we have to find the qunit.js and qunit.css two files in the http://docs.jquery.com/QUnit , and the Qunit framework is as follows:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<script src= "Http://code.jquery.com/jquery-latest.js" ></script>
<link rel= "stylesheet" href= "Qunit.css" type= "text/css" media= "screen"/>
<script type= "Text/javascript" src= "Qunit.js" ></script>
<script>
$ (document). Ready (function () {
});
</script>
<body>
<H1 id= "Qunit-header" >qunit example<H2 id= "Qunit-banner" ><H2 id= "Qunit-useragent" ><ol id= "Qunit-tests" ></ol>
</body>

Note: The element ID in the body must be named according to the following form, otherwise it will not display properly, we can put the content of the test in $ (document). Ready ().
Let's look at a simple example first
Copy code code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/tr/html4/loose.dtd%22>
<script src= "http://code.jquery.com/jquery-latest.js%22></script>
<link rel= "stylesheet" href= "Qunit.css" type= "text/css" media= "screen"/>
<script type= "Text/javascript" src= "Qunit.js" ></script>
<script>
$ (document). Ready (function () {
Test ("A basic test Example", function () {
Ok (True, "test Boolean type");
var value = "Hello";
Equals ("Hello", value, "We expect Hello");
});
});
</script>
<body>
<H1 id= "Qunit-header" >qunit example<H2 id= "Qunit-banner" ><H2 id= "Qunit-useragent" ><ol id= "Qunit-tests" ></ol>
</body>

Save this file as HTML and run directly locally, as the result

test (name, expected, test) : Add a test to run, which can contain a number of assertion functions, such as ok,equals.

OK (state, [message]) is a commonly used judgment function in Qunit to determine the Boolean type, the integer non-zero to True, and the string not "" to true.
equals (actual, expected, [message]) is a commonly used sentence function in Qunit
Let's look at a slightly more complicated example:

Copy Code code as follows:

<script src= "Http://code.jquery.com/jquery-latest.js" ></script>
<link rel= "stylesheet" href= "Qunit.css" type= "text/css" media= "screen"/>
<script type= "Text/javascript" src= "Qunit.js" ></script>
<script>
$ (document). Ready (function () {
Test ("A basic test Example", function () {
Ok (true, "This test is fine");
var value = "Hello";
Equals ("Hello", value, "We expect value to be hello");
});
Module ("Module A");
Test ("Within module", function () {
Ok (true, "all Pass");
});
Test ("Second Test within module", function () {
Ok (true, "all Pass");
});
Module ("Module B");
Test ("Some other test", function () {
Expect (2);
Equals (True, false, "failing test");
Equals (True, true, "passing Test");
});
});
</script>
<body>
&LT;H1 id= "Qunit-header" >qunit example&LT;H2 id= "Qunit-banner" >&LT;H2 id= "Qunit-useragent" ><ol id= "Qunit-tests" ></ol>
</body>

The results obtained:

module (name, lifecycle): is used to group test modules, [lifecycle] is used to initialize test and cleanup tests.

Refer to the following examples:

Copy Code code as follows:

Module ("Module2", {
Setup:function () {
Ok (true, "once extra assert per test");
This.testdata = "Foobar";
},
Teardown:function () {
Ok (true, "and one extra assert after each test");
}
});
Test ("Test with Setup and teardown", function () {
Expect (3);
Same (This.testdata, "foobar");
});

Asynchronous test:
Copy Code code as follows:

Codeasynctest ("Asynchronous Test", function () {
Expect (2);
$.getjson ("/home/josndemo", function (Result) {
Equals (Result.x, "SSS");
Equals (Result.y, "SSS");
Start ();
});
});

"/home/josndemo" is an address that provides JSON data, and it should be noted that the start () function must be called after the assertion function has been written.

Qunit also provides some more advanced applications for testing, such as wanting to do some work at the beginning of a test, and so on, see Http://docs.jquery.com/QUnit#Integration_into_Browser_ Automation_tools

Many of the core suites of jquery are tested using Qunit, and there are a lot of examples inhttp://docs.jquery.com/QUnit#Reference_Test_Suites that can be used for reference.
Example Downloads

Related Article

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.