Qunit and Jscoverage use method (JS unit test) recently on the Web browsing a lot about the JS unit test related documents, tools, but, for Qunit and jscoverage use method, lack of detailed description, for the first-entry front-end people, it is difficult to understand the meaning of it, I would like to collate this article in the hope of reducing the time for you to learn Qunit and Jscoverage use methods. 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;
function Add (b) {if (A + B > 0) return true; else return false;} function Reduc (A, a,) {if (b > 0) ret Urn true; else return false;}
Step three: Write the test code in Compute.test.js, as follows
Test ("Add ()", function () {equal (add), True, "add");}); Test ("Reduc ()", 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 (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\jscoverage sample Command input: Jscoverage E:\HBulider_InstallPath\qunitExample\code E:\HBulider_InstallPath\ Qunitexample\jscoverage This command executes, the file shown in the Jscoverage directory appears,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) tag: JS unit test Qunit Jscoverage Qunit and Jscoverage use methods