Recently on the Internet to read a lot about the JS unit testing related documents, tools, but, for Qunit and jscoverage use method, lack of detailed instructions, for the beginning of the front end of the people, it is difficult to understand the meaning of this article, I hope to reduce everyone to learn qunit and Jscoverage time to use the method. QUNIT:JS Unit Test Tool jscoverage: Display unit Test coverage reference: Http://siliconforks.com/jscoverage/manual.html and http://www.oschina.net/p /jscoverage "description" The following demo uses the Hbuilder editor to demonstrate
first, prepare the materialHttps://github.com/chaishi/QunitAndJSCoverage required materials are available here. It can also be downloaded from the Internet itself. One of Qunit: http://qunitjs.com/, jscoverage:http://siliconforks.com/jscoverage/download.html
Second, Qunit use method
The first step: New project Jsunit, directory contents, as shown, directory Description: "Code": Code--JS: Store the project to be tested JS file. Need to write for yourself. Code-Qunit: The QUNIT.CSS and qunit.js required to store unit tests. Direct download from the Internet; code->TESTJS: Store unit test codes. Write it yourself. Qunittest.html: Executes the unit test code in the Testjs. Use a template. "Jscoverage": Empty folder, which is used to store the generated jscoverage.html and other files.
Step Two: Write the following code in the Compute.js file;
functionif(A + B > 0) returntrueElse returnfalsefunctionif(A-b > 0) return true Else returnfalse;}
Step three: Write the test code in Compute.test.js, as follows
Test ("Add ()",function() {equal (add),true, "add");}); Test ("Reduc () Test ",function() {equal (Reduc),false," Reduc ") equal (Reduc (2,1), True, "Reduc");});
Fourth Step: Write the following code in qunittest.html
<! DOCTYPE html>
Fifth Step: Open the qunittest.html with a browser, such as: http://192.168.1.115:8020/qunitExample/code/qunitTest.html. At this point, the unit test has been demonstrated to completion.three, jscoverage use methodThe first step: Opens the downloaded jscoverage, and the "Doc" folder in the "description" file is deleted.Step Two: Copy Jscoverage.exe to C:\Windows\System32 (It's important here .)Step three: Open the command line, enterSOURCE-DIRECTORYDESTINATION-DIRECTORY
whichsource-directory:Represents the directory in which the Web file containing the javascrīpt script (qunittest.html) is located, such as: E:\HBulider_InstallPath\qunitExample\ Codedestination-directory:Represents the test directory, jscoverage copies all files in the directory containing the Web file that contains the Javascrīpt script to the test directory, such as: E:\HBulider_InstallPath\qun Itexample\jscoverageExample Command input: Jscoverage E:\HBulider_InstallPath\qunitExample\code E:\HBulider_InstallPath\qunitExample\jsCoverage after the command is executed, The file shown in the Jscoverage directory,Fourth Step: Open jscoverage.html in Browser, enter address: file:///E:/HBulider_InstallPath/qunitExample/jsCoverage/jscoverage.html, the following problems occur Input address: http://192.168.1.115:8020/qunitExample/jsCoverage/jscoverage.html, display normal (Start the serverIt follows that the page should be accessed in the second way.Fifth step (last step): Enter the qunittest.html address in the URL. (access mode same as jscoverage.html)Qunit and Jscoverage use method (JS unit test)