Qunit 和 jsCoverage使用方法（js单元测试）
生活随笔
收集整理的這篇文章主要介紹了
Qunit 和 jsCoverage使用方法（js单元测试）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Qunit 和 jsCoverage使用方法（js單元測(cè)試）
近日在網(wǎng)上瀏覽過很多有關(guān)js單元測(cè)試相關(guān)的文檔，工具，但是，針對(duì)Qunit 和 jsCoverage使用方法，缺少詳細(xì)說明，對(duì)于初入前端的人來說，很難明白其中的意思，特此整理這篇文章，希望能夠減少大家學(xué)習(xí)Qunit 和 jsCoverage使用方法的時(shí)間。 Qunit：js單元測(cè)試工具 jsCoverage： 顯示單元測(cè)試覆蓋率 參考資料：http://siliconforks.com/jscoverage/manual.html?和?http://www.oschina.net/p/jscoverage 【說明】以下演示使用HBuilder編輯器進(jìn)行演示 一、準(zhǔn)備材料 https://github.com/chaishi/QunitAndJSCoverage?所需材料，此處均有。也可從網(wǎng)上自行下載。 Qunit 下載地址之一:?http://qunitjs.com/， 如圖 jsCoverage下載地址:?http://siliconforks.com/jscoverage/download.html? 二、Qunit使用方法 第一步：新建工程jsUnit，目錄內(nèi)容，如下圖所示， 目錄說明： "code": code -> js ：存放工程待測(cè)試的js文件。需要自己寫。 code -> qunit： 存放單元測(cè)試需要的qunit.css和qunit.js。從網(wǎng)上直接下載； code - >testJs：存放單元測(cè)試代碼。自己寫。 qunitTest.html：執(zhí)行testJs中的單元測(cè)試代碼。使用模板。 "jsCoverage"：空文件夾，后面用來存放生成的jscoverage.html等文件。 第二步： 在compute.js文件里面寫入以下代碼; function add(a,b){if(a + b > 0)return true;elsereturn false; }function reduc(a,b){if(a - b > 0)return true;elsereturn false; } 第三步：在compute.test.js里面寫入測(cè)試代碼，如下 test("add()測(cè)試",function(){equal(add(1,2),true,"add(1,2)"); });test("reduc()測(cè)試",function(){equal(reduc(1,2),false,"reduc(1,2)");equal(reduc(2,1),true,"reduc(1,2)"); });?
第四步：在qunitTest.html寫入如下代碼 <!DOCTYPE html> <html><head><meta charset="utf-8"><title>單元測(cè)試</title><link rel="stylesheet" href="qunit/qunit.css" /><script type="text/javascript" src="qunit/qunit.js" ></script><script type="text/javascript" src="js/compute.js" ></script><script type="text/javascript" src="testjs/compute.test.js" ></script></head><body><div id="qunit"></div><div id="qunit-fixture">test markup</div></body> </html>?
第五步：用瀏覽器打開?qunitTest.html， 如：?http://192.168.1.115:8020/qunitExample/code/qunitTest.html。 至此，單元測(cè)試已經(jīng)演示完成。 三、jsCoverage使用方法 第一步：打開已下載的 jsCoverage,如圖， 【說明】原文件中還有"doc"文件夾，此處已刪除。 第二步：將 jscoverage.exe 拷貝到 C:\Windows\System32（此處很重要） 第三步：打開命令行，輸入? jscoverage SOURCE-DIRECTORY DESTINATION-DIRECTORY 其中? SOURCE-DIRECTORY：表示包含Javascrīpt腳本的Web文件（qunitTest.html）所在的目錄，? 如： E:\HBulider_InstallPath\qunitExample\code DESTINATION-DIRECTORY：表示測(cè)試目錄，JSCoverage會(huì)把包含Javascrīpt腳本的Web文件所在的目錄的所有文件拷貝到測(cè)試目錄中 如：E:\HBulider_InstallPath\qunitExample\jsCoverage 示例命令輸入：jscoverage E:\HBulider_InstallPath\qunitExample\code E:\HBulider_InstallPath\qunitExample\jsCoverage 該命令執(zhí)行后，jsCoverage 目錄下出現(xiàn) 下圖所示文件， 第四步：用瀏覽器打開jscoverage.html， 輸入地址：file:///E:/HBulider_InstallPath/qunitExample/jsCoverage/jscoverage.html，出現(xiàn)以下問題 輸入地址：http://192.168.1.115:8020/qunitExample/jsCoverage/jscoverage.html， 顯示正常（啟動(dòng)服務(wù)器） 由此可知，應(yīng)該使用第二種方式訪問頁(yè)面。 第五步（最后一步）： 在URL中輸入 qunitTest.html地址。（訪問方式同?jscoverage.html?）轉(zhuǎn)載于:https://www.cnblogs.com/SZLLQ2000/p/5368700.html
總結(jié)
以上是生活随笔為你收集整理的Qunit 和 jsCoverage使用方法（js单元测试）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： p3p sso
- 下一篇： java学习笔记（4）