自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Web開發(fā)者必備的JavaScript單元測試工具

作者：廖煜嶸
開發(fā) 前端
本文簡單介紹了如何使用兩款Javascript單元測試工具進行前端的開發(fā)單元測試，前端的單元測試在復雜的前端Javascript開發(fā)中，能夠保證前端開發(fā)的質量，值得前端開發(fā)者仔細研究學習。

當前,在軟件開發(fā)中單元測試越來越受到開發(fā)者的重視,它能提高軟件的開發(fā)效率,而且能保障開發(fā)的質量。以往，單元測試往往多見于服務端的開發(fā)中，但隨著Web編程領域的分工逐漸明細，在前端Javascript開發(fā)領域中，也可以進行相關的單元測試，以保障前端開發(fā)的質量。在本文中，將初步探討如何在Javascript中進行單元測試及其注意要點。

Javascript中的單元測試工具

在Javascript的單元測試中工具中，有很多開源的工具，本文選取其中兩個比較典型實用的工具進行介紹：jsTestDriver和Qunit。先來看下jsTestDriver(下載地址：http://code.google.com/p/js-test-driver/wiki/GettingStarted)。

jsTestDriver以客戶服務端的方式運行，在客戶端發(fā)送測試請求到服務端，整個運行是在可以捕捉的瀏覽器中進行的，其優(yōu)點為它能很容易地與代碼編輯器整合，以及能成為自動構建的一部分。jsTestDriver包括一系列能與Eclipse,Maven和IntelliJ整合的插件，甚至與Visual Studio整合也是可行的(參考這篇文章)，比如下圖是與EditPlus整合的一個示意圖：

 

開源的單元測試工具jsTestDriver

 

jsTestDriver的安裝

安裝jsTestDriver的步驟如下：

1. 從jsTestDriver的下載頁中下載相關的JAR文件，下載地址為：http://code.google.com/p/js-test-driver/downloads/list，下載其中的JsTestDriver-1.3.3a.jar 這個文件

2. 創(chuàng)建兩個文件夾，其中一個為名稱為src的存放Javascript源代碼的文件，另外一個是用來存放測試用例的文件，文件夾命名為src-test。

3. 創(chuàng)建一個配置文件，配置文件名為jsTestDriver.conf，配置文件如下：

server: http://localhost:9876

load:

- src/*.js

- src-test/*.js

這里指出了啟動位于9876的端口進行監(jiān)聽，并且先加載src文件夾下的所有js文件夾，然后在加載src-test文件夾下的js文件進行測試。

4. 接下來，我們配置jsTestDriver的服務端，以讓其監(jiān)控chrome瀏覽器，讓其運行Javascript測試用例。在命令行輸入如下代碼，具體路徑請根據(jù)實際情況修改。

"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"

這樣的話，會在4224端口啟動jsTestDriver，并且會啟動一個chrmoe瀏覽器的實例，這個實例會捕捉所有的在Chrmoe中運行的Javascript單元測試。接下來，編寫一個.cmd文件，在命令方式下執(zhí)行，以執(zhí)行測試，測試所有放在src-test中的測試用例，代碼如下：

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

開始編寫Javascript

我們開始編寫一個簡單的Javascript來進行測試，先在src和src-test目錄下，分別編

寫如下代碼：

Src目錄下的mystuff.js

  1. myAwesomeApp = {};  
  2. 　　myAwesomeApp.MyAwesomeClass = function(){};  
  3. 　　myAwesomeApp.MyAwesomeClass.prototype.add = function(num0, num1){  
  4. 　　return num0 + num1;  
  5. 　　};  
  6. 　　Src-test 目錄下的mystuff.js  
  7. 　　TestCase("Sample Test Case",{  
  8. 　　"test Number plus Zero Equals Number": function(){  
  9. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
  10. 　　assertEquals(5, adder.add(5,0));  
  11. 　　},  
  12. 　　"test Number plus Number Equals Sum": function(){  
  13. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
  14. 　　assertEquals(8, adder.add(5,3));  
  15. 　　},  
  16. 　　"test Zero plus Number Equals Number": function(){  
  17. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
  18. 　　assertEquals(5, adder.add(0,5));  
  19. 　　},  
  20. 　　"test Number plus Negative of Number Equals Zero": function(){  
  21. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
  22. 　　assertEquals(0, adder.add(5,-5));  
  23. 　　},  
  24. 　　"test Fails miserably": function(){  
  25. 　　fail("miserably");   
  26. 　　}  
  27. 　　}); 

熟悉單元測試的開發(fā)者對它們應該不感到陌生。在上面的測試代碼組中，分別測試

了多種用例，用到的都是assertEquals斷言。更多的用法請參考其官方主頁的介紹。

接下來，我們開始運行測試用例，方法為在命令行模式下，

"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"

這樣就可以啟動chrome瀏覽器監(jiān)聽相關的Javascript單元測試用例。運行后可以看到打開了瀏覽器，如下圖：

 

開源的單元測試工具jsTestDriver

 

接下來開始進行單元測試，命令行輸入如下代碼：

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

運行后，會在瀏覽器中看到相關的輸出結果，如下：

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

從結果中可以看到，.S表示成功通過的單元測試，.F為失敗的單元測試用例，而.E為錯誤的測試用例，信息中還指出了有多少個單元測試，通過了多少，多少個沒有通過。

jsTestDriver還支持傳統(tǒng)的setup和teardown等單元測試方法。更多的相關介紹可以參考其在線幫助手冊。

#p#

開源的單元測試工具Qunit

接下來，介紹另外一款開源的單元測試工具Qunit(下載地址：http://code.jquery.com/qunit)，它是完全基于瀏覽器運行的，因此不需要象jsTestDriver那么安裝麻煩，而且值得一提的是，這個框架是jQuery的單元測試Javascript框架，功能十分強大。下面是安裝方法：

1) 只需要下載qunit.js(http://code.jquery.com/qunit/qunit-git.js)和qunit.css(http://code.jquery.com/qunit/qunit-git.css)

2) 我們需要編寫一個Qunit的界面，命名為testrunner.html,代碼如下：

  1. <DOCTYPE html>   
  2. <html>   
  3. <head>   
  4.     <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>   
  5.     <script src="qunit.js" type="text/javascript"></script>   
  6.     <link rel="stylesheet" media="all" href="qunit.css" />   
  7.  
  8.     <script src="src/mystuff.js" type="text/javascript"></script>   
  9.     <script src="src-test/mystuff_qunit.js" type="text/javascript"></script>   
  10.  
  11. </head>   
  12. <body>   
  13.     <h1 id="qunit-header">MyStuff</h1>   
  14.     <h2 id="qunit-banner"></h2>   
  15.     <h2 id="qunit-userAgent"></h2>   
  16.     <ol id="qunit-tests"></ol>   
  17. </body>   
  18. </html> 

這個頁面中分別引入了jquery類庫，qunit的類庫，還有就是我們之前編寫的，位于Src目錄下的原先的javascript腳本mystuff.js，以及位于src-test目錄下的測試用例Mystuff_qunit.js。

接下來，來看下測試用例文件Mystuff_qunit.js，代碼如下：

  1. module("Sample Test Case");  
  2. 　　test("Number plus Zero Equals Number", function(){  
  3. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
  4. 　　equals( adder.add(5,0),5);  
  5. 　　});  
  6. 　　test("Number plus Number Equals Sum", function(){  
  7. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
  8. 　　equals(adder.add(5,3),8);  
  9. 　　});  
  10. 　　test("Zero plus Number Equals Number", function(){  
  11. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
  12. 　　equals(adder.add(0,5),5);  
  13. 　　});  
  14. 　　test("Number plus Negative of Number Equals Zero", function(){  
  15. 　　var adder = new myAwesomeApp.MyAwesomeClass();  
  16. 　　equals(adder.add(5,-5),0);  
  17. 　　});  
  18. 　　test("Fails miserably", function(){  
  19. 　　ok(false,"miserably");  
  20. 　　}); 

這個看上去跟jsTestDriver有點象，但注意的是在斷言方法中，參數(shù)的順序不同，即在qunit中，斷言的參數(shù)順序為：Qunit.equals(actual, expected)，即實際的數(shù)值。在前面，而期望的數(shù)值在后面，這點請注意。最后，直接在瀏覽器中運行test.html,可以看到效果如下：

 

開源的單元測試工具Qunit

 

其中，紅色部分即時表示沒能通過的單元測試。

整合jsTestDriver和Qunit

由于jsTestDriver和Qunit各有優(yōu)勢，因此我們可以考慮對其進行整合。比如，我們可以將jsTestDriver編寫的腳本移植到Qunit中去，由于它們的斷言參數(shù)順序有不同，因此可以修改一下，編寫名為jsTestDriverInQunit.js的腳本如下：

  1. function TestCase(name, tests){  
  2. 　　if(tests != null)  
  3. 　　module(name);  
  4. 　　for(var key in tests){  
  5. 　　if(tests[key] instanceof Function && key.indexOf("test") == 0){  
  6. 　　test(key,tests[key]);  
  7. 　　}  
  8. 　　}  
  9. 　　return function(){};  
  10. 　　}  
  11. 　　function assertEquals(arg0,arg1){  
  12. 　　equals(arg1,arg0);  
  13. 　　}  
  14. 　　function fail(msg){  
  15. 　　ok(false,msg);  
  16. 　　} 

并且將testrunner.html修改如下：

  1. <DOCTYPE html>   
  2.     <html>   
  3.     <head>   
  4.         <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>   
  5.         <script src="qunit.js" type="text/javascript"></script>   
  6.         <script src="jsTestDriverInQunit.js" type="text/javascript"></script>   
  7.         <link rel="stylesheet" media="all" href="qunit.css" />   
  8.       
  9.         <script src="src/mystuff.js" type="text/javascript"></script>   
  10.         <script src="src-test/mystuff.js" type="text/javascript"></script>   
  11.     </head>   
  12.     <body>   
  13.         <h1 id="qunit-header">MyStuff</h1>   
  14.         <h2 id="qunit-banner"></h2>   
  15.         <h2 id="qunit-userAgent"></h2>   
  16.         <ol id="qunit-tests"></ol>   
  17.     </body>   
  18.     </html>  

此外，還有一個開源項目提供了將Qunit轉化為jsTestDriver的功能，項目地址為：

http://code.google.com/p/js-test-driver/wiki/QUnitAdapter。

原文：http://tech.it168.com/a2011/1019/1260/000001260942_all.shtml

【編輯推薦】

  1. 學習JavaScript的最佳方法
  2. stream.js：一個新的JavaScript數(shù)據(jù)結構
  3. Dart之于JavaScript正如C#之于C++
  4. 移動網(wǎng)站開發(fā)中常用的10段JavaScript代碼
  5. JavaScript性能優(yōu)化技巧之函數(shù)節(jié)流
責任編輯：陳貽新 來源： it168
JavaScript
相關推薦

2022-09-15 17:08:20

JavaScripWeb開發(fā)

2014-04-16 10:10:58

應用測試

2009-09-01 16:45:00

C#單元測試工具

2011-03-01 13:10:06

WebjQueryHTML 5

2012-11-01 11:32:23

IBMdw

2012-11-01 11:37:05

JavaScript單元測試測試工具

2014-02-12 10:46:00

WebJavaScript音頻庫

2011-12-12 09:59:13

JavaScript

2014-02-01 21:31:10

JavaScriptJS框架

2014-06-06 09:56:02

開發(fā)者GUI測試工具

2016-12-14 09:31:18

單元測試

2021-07-10 13:48:43

Java單元工具

2014-03-14 11:44:28

安卓開發(fā)者Android開發(fā)

2014-04-01 13:50:28

安卓Android開發(fā)者

2021-04-08 10:40:24

前端工具代碼

2014-04-18 13:20:34

Android安卓開發(fā)工具

2023-11-30 15:30:19

Python編程語言

2017-01-14 23:42:49

單元測試框架軟件測試

2015-09-06 16:22:48

JavaScriptSublimeText

2011-11-30 22:03:49

ibmdwJava
點贊
收藏

51CTO技術棧公眾號