首頁 > 開發者 > JavaScript
JS自動化測試 單元測試之Qunit
因為公司開發了一套javascript SDK需要測試，在網上找了很久，找到了JQuery團隊開發的QUnit，和基於JUnit的JsUnit，還有一些還沒有看，先講講QUnit吧 登入JQuery官網www.bkjia.com直接首頁右邊可以下載最新版本的QUnit。 或者直接點擊下載qunit-1.16.0.js，使用QUnit還需要下載官方css檔案。www.bkjia.com 使用QUnit前提條件 1、需要引用qunit-1.16.0.js和qunit-1.16.0.css，有人會問，css可以不引用嗎，答案是不行。展示執行用例結果的樣式，需要css來顯示。 2、需要在body標籤中加入兩行HTML代碼，id屬性不能去掉的哦~ <div id="qunit"></div><div id="qunit-fixture"></div> 3、需要寫一個js用於測試。這裡隨便寫了一個user.js 有登入登出和判斷使用者名稱是否存在的方法。引用這個user.js 貼出user.js代碼 // JavaScript Document// 建立user類var user={ ///登入 userName：使用者名稱 userPwd：密碼 login:function(userName,userPwd){ return userName+userPwd; }, ///退出 返回1為成功 返回0為失敗 logout:function(){ ///省去登出代碼 return "1"; }, getUser:function(){ return {userName:'',userPwd:''}; }, ///判斷使用者名稱是否存在 返回1存在 返回0不存在 ///測試非同步作業 需要提供一個回呼函數 用於消極式載入 existUserName:function(userName,callBack){ setTimeout(function(){ var state =0; if (userName=='milan'){ state= 1; } else{ state= 0; } if (callBack){ callBack(state); } },1000); } , callback:null, existUserName2:function(userName){ setTimeout(function(){ var state =0; if (userName=='milan'){ state= 1; } else{ state= 0; } if (user.callback){ user.callback(state); } },1000); } }; 使用QUnit 1、test ：所有用例必須在test方法中執行，表示一個測試案例，一般一個用例有N個斷言。 ///測試登入test('user.login',function(){ equal(user.login('milan','123'),'milan123',"登入測試");}) 2、斷言函數 ok（ result, message）斷言傳回值為true/falseequal( actual, expected, message )actual為實際值、expected為預期值；淺對比，判斷實際值是否與預期值相等。相當於==propEqual( actual, expected, message )用於判斷對象和值是否相等deepEqual( actual, expected, message )深對比，用於判斷兩個實值型別和值是否相等，相當於===以上2、3、4條分別提供了功能相反的函數 notEqual、notPropEqual、notDeepEqual。參數跟2、3、4條是一樣的。 大家也可以在qunit-1.16.0.js的原始碼中搜尋“notPropEqual”(或者其他函數名稱)，搜尋到同級函數都是QUnit提供的斷言函數，可以方便大家查看及擴充。 如： 3、使用斷言函數 樓主一般喜歡一個介面一個測試案例，當然每個人的習慣不一樣。不能一概而論，反正只要做到清晰易讀就可以啦！ ///登出測試test('user.logout',function(){ ok(user.logout()==1,"登出測試ok"); //驗證實際值不等於斷言值為正確，這裡實際是相等的，所以是錯的 notEqual(user.logout()==1,true,"登出測試notEqual"); //驗證實際值等於斷言值 equal(user.logout()==1,true,"登出測試notEqual"); //驗證傳回值是否同類型同值 deepEqual(user.logout(),1,"登出測試deepEqual");});///擷取使用者資訊測試test("user.getUser",function(){ ///判斷兩個對象是否相等 此方法 不適用於判斷基本的數值或者字串 propEqual(user.getUser(),{"userName": "12","userPwd": ""},"登出測試propEqual"); ///判斷是否不相等，不相等為通過 notPropEqual(user.getUser(),{"userName": "12","userPwd": ""},"登出測試propEqual");}); 4、QUnit實現非同步測試 大家都知道，要測試介面/方法，必須等到介面的傳回值，才能測試，如果沒有傳回值，我們也不知道結果對不對啦。 所以非同步測試一般有兩種辦法：一種是把回調當作參數傳入方法中；二是開發人員提供一個變數，我們可以把回呼函數賦值給變數；等非同步處理完畢之後再執行我們寫的回呼函數 這裡我們用setTimeout來類比非同步延遲返回操作。 用例代碼： //模組化 module("非同步測試");///方法一 回調用參數的方式傳入 非同步測試 user.existUserName('milan',function(result){ ///注意啦 這裡是先調方法，再寫用例哦。 test("user.existUserName",function(){ ok(result==1,"判斷使用者名稱是否存在ok"); notEqual(result==1,true,"判斷使用者名稱是否存在notEqual"); });});//方法二 回調用內建變數賦值的方式傳入 非同步測試user.callback=function(result){ test("user.existUserName2",function(){ ok(result==1,"判斷使用者名稱是否存在ok"); notEqual(result==1,true,"判斷使用者名稱是否存在notEqual"); });};user.existUserName2('milan'); 5、模組化 在上面的非同步測試中，我們看到每個用例的開頭都多了“非同步測試”這幾個字。那麼這幾個字是怎麼來的呢？ 很多時候，要測試的用例過多，我們也會眼花繚亂了。QUnit提供module("模組名稱")來實現用例分組。 使用方法直接放在要模組化的地方就行啦。參照第4接非同步測試的代碼和結果 貼出教程所有html的代碼 結論 在很多時候，我們不可能把每一種方法都講到極致，沒有講到的，還需要大家多多去試一試。第一次寫部落格，寫得不好，有什麼建議或者問題，都可以在下面回複。樓主會在看到後第一時間解決的。謝謝！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>無標題文檔</title> <link rel="stylesheet" href="../../qunit/qunit-1.16.0.css"><script src="../../qunit/qunit-1.16.0.js"></script><script src="user.js"></script> </head><body><div id="qunit"></div><div id="qunit-fixture"></div> <script type="text/javascript" language="javascript">///測試登入test('user.login',function(){ equal(user.login('milan','123'),'milan123',"登入測試"); })//模組測試module("基本測試");///登出測試test('user.logout',function(){ ok(user.logout()==1,"登出測試ok"); //驗證實際值不等於斷言值為正確，這裡實際是相等的，所以是錯的 notEqual(user.logout()==1,true,"登出測試notEqual"); //驗證實際值等於斷言值 equal(user.logout()==1,true,"登出測試notEqual"); //驗證傳回值是否同類型同值 deepEqual(user.logout(),1,"登出測試deepEqual");});///擷取使用者資訊測試test("user.getUser",function(){ ///判斷兩個對象是否相等 不適用於判斷基本的數值或者字串 propEqual(user.getUser(),{"userName": "12","userPwd": ""},"登出測試propEqual"); ///判斷是否不相等，不相等為通過 notPropEqual(user.getUser(),{"userName": "12","userPwd": ""},"登出測試propEqual");});//模組化module("非同步測試");///回調用參數的方式傳入 非同步測試 user.existUserName('milan',function(result){ ///注意啦 這裡是先調方法，再寫用例哦。 test("user.existUserName",function(){ ok(result==1,"判斷使用者名稱是否存在ok"); notEqual(result==1,true,"判斷使用者名稱是否存在notEqual"); });});//回調用內建變數賦值的方式傳入 非同步測試user.callback=function(result){ test("user.existUserName2",function(){ ok(result==1,"判斷使用者名稱是否存在ok"); notEqual(result==1,true,"判斷使用者名稱是否存在notEqual"); });};user.existUserName2('milan'); </script> </body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
