JavaScript unit testing tools necessary for Web developers (1)

At present, in software development, unit testing is increasingly valued by developers. It can improve the efficiency of software development and ensure the quality of development. In the past, unit tests were often used in server development. However, with the gradual division of work in the Web programming field, related unit tests can also be carried out in the front-end Javascript development field, to ensure the quality of front-end development. In this article, we will initially discuss how to perform unit testing in Javascript and its key points of attention.

Unit test tools in Javascript

Many open-source tools are available in Javascript unit testing. This article selects two typical and practical tools: jsTestDriver and Qunit. Let's take a look at jsTestDriver (: http://code.google.com/p/js-test-driver/wiki/GettingStarted ).

JsTestDriver runs in the form of a client server and sends a test request to the server on the client. The entire operation is carried out in a captured browser, the advantage is that it can be easily integrated with the code editor and become part of the automatic build. JsTestDriver includes a series of plug-ins that can be integrated with Eclipse, Maven, and IntelliJ, and even Visual Studio (refer to this article). For example, it is integrated with EditPlus:

JsTestDriver Installation

To install jsTestDriver, follow these steps:

1. download the relevant JAR file from the download page of jsTestDriver.

2. Create two folders, one of which is called src to store Javascript source code, the other is to store the test case file, and the folder is named src-test.

3. Create a configuration file named jsTestDriver. conf. The configuration file is as follows:

Server: http: // localhost: 9876

Load:

-Src/*. js

-Src-test/*. js

It is pointed out that port 9876 is enabled for listening, and all js folders under the src folder are loaded first, and then js files under the src-test folder are loaded for testing.

4. Next, configure the jsTestDriver server to monitor the chrome browser and run the Javascript test case. Enter the following code in the command line. Modify the path as needed.

"C: \ Program Files (x86) \ Java \ jre6 \ bin \ java"-jar JsTestDriver-1.3.2.jar -- port 4224 -- browser "C: \ Documents and Settings \ Tarwn \ Local Settings \ Application Data \ Google \ Chrome \ Application \ chrome.exe"

In this case, jsTestDriver is started on port 4224 and a chrmoe browser instance is started. This instance captures all Javascript unit tests running in Chrmoe. Next, write a. cmd file and run it in command mode to execute the test and test all the test cases placed in src-test. The Code is as follows:

 
 

  
  
"C:\Program Files (x86)\Java\jre6\bin\java" -jar JsTestDriver-1.3.2.jar --tests all  
  
  
Pause 
 
 

Start writing Javascript

We started to compile a simple Javascript code for testing. First, compile the code in the src and src-test directories separately.

Write the following code:

Mystuff. js under the Src directory

 
 

  
  
MyAwesomeApp = {};
  
  
MyAwesomeApp. MyAwesomeClass = function (){};
  
  
MyAwesomeApp. MyAwesomeClass. prototype. add = function (num0, num1 ){
  
  
Return num0 + num1;
  
  
};
  
  
Mystuff. js under the Src-test directory
  
  
TestCase ("Sample Test Case ",{
  
  
"Test Number plus Zero Equals Number": function (){
  
  
Var adder = new myAwesomeApp. MyAwesomeClass ();
  
  
AssertEquals (5, adder. add (5, 0 ));
  
  
},
  
  
"Test Number plus Number Equals Sum": function (){
  
  
Var adder = new myAwesomeApp. MyAwesomeClass ();
  
  
AssertEquals (8, adder. add (5, 3 ));
  
  
},
  
  
"Test Zero plus Number Equals Number": function (){
  
  
Var adder = new myAwesomeApp. MyAwesomeClass ();
  
  
AssertEquals (5, adder. add (0, 5 ));
  
  
},
  
  
"Test Number plus Negative of Number Equals Zero": function (){
  
  
Var adder = new myAwesomeApp. MyAwesomeClass ();
  
  
AssertEquals (0, adder. add (5,-5 ));
  
  
},
  
  
"Test Fails miserably": function (){
  
  
Fail ("miserably ");
  
  
}
  
  
});
 
 

Developers familiar with unit testing should be familiar with them. In the preceding test code group, test

Multiple Use Cases are used in assertEquals assertions. For more usage instructions, refer to the official homepage.

Next, run the test case in command line mode,

"C: \ Program Files (x86) \ Java \ jre6 \ bin \ java"-jar .. /JsTestDriver-1.3.2.jar -- port 4224 -- browser "C: \ Documents ents and Settings \ Tarwn \ Local Settings \ Application Data \ Google \ Chrome \ Application \ chrome.exe"

In this way, the chrome browser can be started to listen to related Javascript unit test cases. After running, you can see that the browser is opened, such:

Next, start the unit test. Enter the following code in the command line:

 
 

  
  
"C:\Program Files (x86)\Java\jre6\bin\java" -jar ../JsTestDriver-1.3.2.jar --tests all 
 
 

After running, the relevant output result is displayed in the browser, as shown below:

 
 

  
  
....F  
  
  
Total 5 tests (Passed: 4; Fails: 1; Errors: 0) (0.00 ms)  
  
  
Chrome 13.0.782.220 Windows: Run 5 tests (Passed: 4; Fails: 1; Errors 0) (0.00 ms)  
  
  
Object Literal Test Case.test Fails miserably failed (0.00 ms): AssertError: miserably  
  
  
AssertError: miserably  
  
  
at Object.test Fails miserably (http://localhost:4224/test/src-test/mystuff.js:22:3)  
  
  
Tests failed: Tests failed. See log for details. 
 
 

The result shows that ,. S indicates that the unit test is successful ,. F is a failed unit test case, and. E is an incorrect test case. The information also shows how many unit tests have passed, and how many failed tests.

JsTestDriver also supports traditional unit testing methods such as setup and teardown. For more information, see the online help manual.