Introduction to the javascript unit testing tool QUnit created by the JQuery team

What is unit testing?

Unit Testing, also known as module testing, is a test of the correctness of program modules (the smallest unit of software design. Unit Testing is mainly used to test the internal logic of a program, also known as individual testing, structure testing, or logic-driven testing. Generally, the programmer who writes the code is responsible for this.

Generally, every time a program is modified, a program runs at least one RMB per modification, before and after the authentication program's process, it is likely that you have to perform the billing statement multiple times to verify that the program has passed the authentication Specification (en: Specification) the required job objectives are not smelly; although unit testing is not necessary, it is not bad. This is related to the policy decision of case management.

-- Wikipedia (Chinese and English)

Advantages of Unit Testing

1. It is a verification behavior.
Every function in the program is tested to verify its correctness. It provides a delay for future development. Even after development, we can easily add features or change the program structure without worrying about the damage to important things in this process. It also guarantees code refactoring. In this way, we can improve the program more freely.

2. It is a design behavior.
Writing Unit Tests will let us observe and think from callers. In particular, writing test-first forces us to design programs that are easy to call and testable, which forces us to lift coupling in software.

3. It is a document writing activity.
Unit testing is an invaluable document that best shows how functions or classes are used. This document can be compiled, run, and kept up-to-date, always synchronized with the code.

4. It is regression.
Automated unit tests avoid code regression. After compilation, you can run tests anytime, anywhere.

Refer:

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
  The systematic solution is based on XNuit specifications. If you use jUnit, NUnit, and other frameworks, this should be easy to use and include the server side (Java ). Http://www.jsunit.net/
  Rating: comprehensive and professional, suitable for large-scale enterprise-level development.
• Test. Simple & Test. More
  This is the http://openjsan.org/doc/t/th/theory/Test/Simple/0.21/lib/Test/Simple.html of the testing framework recommended by John Resig, the father of jQuery, in his book "Pro Javascript.
  Rating: it is very easy to use and concise. It is suitable for small and medium-sized projects to quickly introduce unit tests.
• FireUnit
  John Resig made another task. In his blog, John Resig-FireUnit: JavaScript Unit Testing Extension, he published FireUnit, a Firebug-based Extension developed in partnership with Jan Odvarko.

  In short, FireUnit adds a tag panel to Firebug and provides some simple JavaScript APIs to record and view tests. For more information, see http://shawphy.com/2008/12/fireunit.html.
  Comment: there are traces of Test. Simple. John Resig is a very good guy at learning and innovating. FireUnit has outstanding performance in ease of use and is very suitable for front-end engineers who use Firebug-based debugging environments.

• QUnit
  QUnit is a JavaScript unit test tool developed by the jQuery team. You can download it from http://docs.jquery.com/qunit.

  Rating: easy to use and beautiful interface.

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

Next we will focus on introducing QUnit

QUnit Introduction

JavaScript still requires good readability, so refactoring is essential. We know that refactoring without unit testing is unreliable, good unit test coverage makes it easier and cheaper to refactor, so it is very important for good javascript programmers to have a unit test framework, QUnit is a powerful and easy-to-use JavaScript testing framework. It is used for testing jQuery and its plug-ins. It can also test common JavaScript code.

Use QUnit

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

Copy codeThe Code is as follows: <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"
Http://www.w3.org/TR/html4/loose.dtd>
<Html>
<Head>
<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>
</Head>
<Body>
<H1 id = "qunit-header"> QUnit example <H2 id = "qunit-banner"> <H2 id = "qunit-userAgent"> <Ol id = "qunit-tests"> </ol>
</Body>
</Html>

Note: The element id in the body must be named in the following format, otherwise it cannot be displayed normally. We can put the content to be tested in $ (document). ready.
Let's look at a simple example.Copy codeThe Code is as follows: <! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"
"Http://www.w3.org/TR/html4/loose.dtd%22>
<Html>
<Head>
<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 to get hello ");
});
});
</Script>
</Head>
<Body>
<H1 id = "qunit-header"> QUnit example <H2 id = "qunit-banner"> <H2 id = "qunit-userAgent"> <Ol id = "qunit-tests"> </ol>
</Body>
</Html>

Save the file as html and run it locally. The result is as follows:

Test (name, expected, test):Join the test to run, which can contain several asserted functions, such as OK and equals.

OK (state, [message])It is a common judgment function in QUnit. It can be used to determine the boolean type. The non-zero integer type is true, and the non-"" string type is true.
Equals (actual, expected, [message])It is a commonly used criterion function in QUnit.
Let's take a look at a slightly more complex example:

Copy codeThe Code is 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 recommend CT value to be hello ");
});
Module ("Module ");
Test ("first 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 (){
Secondary CT (2 );
Equals (true, false, "failing test ");
Equals (true, true, "passing test ");
});
});
</Script>
</Head>
<Body>
<H1 id = "qunit-header"> QUnit example <H2 id = "qunit-banner"> <H2 id = "qunit-userAgent"> <Ol id = "qunit-tests"> </ol>
</Body>
</Html>

Result:

Module (name, lifecycle): Groups Test Modules. [lifecycle] is used to initialize and clean up tests.

See the following example:

Copy codeThe Code is 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 (){
CT (3 );
Same (this. testData, "foobar ");
});

Asynchronous test:Copy codeThe Code is as follows: codeasyncTest ("Asynchronous test", function (){
Secondary CT (2 );
$. GetJSON ("/Home/JosnDemo", function (result ){
Equals (result. x, "sss ");
Equals (result. y, "sss ");
Start ();
});
});

"/Home/JosnDemo" is the address that provides json data. Note that you must call the start () function after writing the asserted function.

Qunit also provides more advanced applications during testing, such as the desire to do some work at the beginning of a test. See http://docs.jquery.com/QUnit#Integration_into_Browser_Automation_Tools

Many of JQuery's core suites use Qunit for testing. There are many examples in http://docs.jquery.com/qunit?reference_test_suitesfor your reference.
Download example