前端單元測試基礎介紹

1、前端單元測試,入門與實踐,一個實例,在一個統(tǒng)計客戶端信息的js中，寫一個方法，從userAgent字符串獲取瀏覽器引擎，名稱，版本號等信息，要求能處理最常用的一些瀏覽器,,function _getBrowserInfo(ua) {…………return oBrowser;},最后采用的形式,,這個方法的測試用例,,YUI().use("test", function (Y) { window.Y =

2、Y; var testCaseBrowser = new Y.Test.Case({ setUp: function () { this.testFun = window._getBrowserInfo; }, testBrowserName: function () { for (var i = 0; i < test

3、Data.length; i++) { var ua = testData[i][0].toLowerCase(); oResult = this.testFun(ua); Y.Assert.areEqual(testData[i][1], oResult['navName'], ua); }

4、 }, …… }） //add the test cases and suites suite.add(testCaseGetInfo); ………… //run all tests Y.Test.Runner.add(suite); Y.Test.Runner.run();});,執(zhí)行測試,多瀏覽器自

5、動執(zhí)行測試用例,代碼的演化過程,從最開始的需求，到現在最后的成品代碼+測試用例，中間是如何演化的？,原始需求,在一個統(tǒng)計客戶端信息的js中，寫一個方法，從userAgent字符串獲取瀏覽器引擎，名稱，版本號等信息，要求能處理最常用的一些瀏覽器,我們開始設想和編寫代碼,if (!window['analizer']) {window['analizer'] = new function () {var

6、ua=navigator.userAgent;……self._getBrowserInfo = function {/** * code to process useragent string*/…… return oBrowser; }},我們需要支持常用各大瀏覽器,于是我們刻苦鉆研，甚至找了曾哥寫出了超簡一行正則出結果的代碼,function _getBrowserInfo(ua) {

7、 var oBrowser = {}; var match = ua.match(/(opera|ie|firefox|chrome|version)[\s\/:]([\w\d\.]+)?.*?(safari|version[\s\/:]([\w\d\.]+)|$)/) || [null, 'unknown', 0]; var mode = match[1] =

8、= 'ie' && document.documentMode; oBrowser['browserName'] = (match[1] == 'version') ? match[3] : match[1]; oBrowser['browserVersion'] = mode || ((match[1] ==

9、 'opera' && match[4]) ? match[4] : match[2]); oBrowser['browserLanguage'] = (navigator['browserLanguage'] || navigator['language']).toLowerCase(); return oB

10、rowser; },一行正則檢測五大瀏覽器名字，版本號，語言,,然后我們來驗證,依次打開各大瀏覽器，逐個檢驗，ok啦～,接著要獲取操作系統(tǒng)信息,我們刻苦鉆研，甚至找了曾哥寫出了簡潔獲取系統(tǒng)信息的代碼。,function _getOSInfo() { var oOS = {}; ………… return oOS; },然后我們來驗證,打開

11、目前使用的系統(tǒng)上各大瀏覽器驗證一下打開虛擬機跑xp驗證一下打開虛擬機跑Linux驗證一下打開mac驗證一下,發(fā)現了一個bug！,修改代碼，本例中代碼互不影響，如果有時候進行了抽象和提取，修改基礎方法還需要回歸所有功能驗證：打開當前系統(tǒng)五大瀏覽器驗證一下打開虛擬機跑xp驗證一下打開虛擬機跑linux驗證一下打開mac驗證一下,終于初步開發(fā)完了,這時發(fā)現其實我們還要獲取移動操作系統(tǒng)的信息,需求提出/變更,開發(fā)->驗證-&

12、gt;開發(fā)……,打開iPhone驗證一下打開iPad驗證一下打開iTouch驗證一下打開安卓驗證一下打開windows Phone 驗證一下……,Introducting,YUI TEST,結構,業(yè)務代碼,測試代碼,xxTest.htmlyui-min.jsae.jsrun.jstest.js,,,測試代碼,var testData_fun_getInfo = [/* * data template: *

13、 [#ua#,#wordlist#,#name#,#version#] */ ["Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0.1) Gecko/20100101 Firefox/4.0.1",["360se", "360chrome", "\\sse", "tencenttrave

14、ler", "maxthon", "theworld", "ucweb", "greenbrowser"], undefined, undefined］,[……],[……]],YUI().use("test", function (Y) { window.Y = Y; var testCase

15、Browser = new Y.Test.Case({ setUp: function () { this.testFun = window._getBrowserInfo; }, testBrowserName: function () { for (var i = 0; i < testData.length; i++) {

16、 var ua = testData[i][0].toLowerCase(); oResult = this.testFun(ua); Y.Assert.areEqual(testData[i][1], oResult['navName'], ua); } }, ……

17、 }） //add the test cases and suites suite.add(testCaseGetInfo); ………… //run all tests Y.Test.Runner.add(suite); Y.Test.Runner.run();});,執(zhí)行測試,加入單元測試后的流程,需求提出/變更,設計,編碼,編寫用

18、例,快速UC驗證,多輪,,,,,,,快速的UC驗證,,TestRunner: testGetInfo_name: failed. mozilla/5.0 (windows; u; windows nt 5.1; en-us) applewebkit/534.3 (khtml, like gecko) chrome/6.0.472.33 safari/534.3 se 2.x metasr 1.0 Expected: safar

19、i (string) Actual: chrome (string),單元測試和功能代碼的集成,測公用接口測私有方法測閉包方法,/** @define {boolean} */var ENABLE_DEBUG = true;……,if(window.ENABLE_DEBUG){window._getBaseInfo = _getBaseInfo;},function _getBaseInfo(){……

20、},單元測試代碼的迭代,Mozilla/5.0 (Windows; U; Windows NT 5.1; ) AppleWebKit/533.9 (KHTML, like Gecko) Maxthon/3.0 Safari/533.9,一些注意點,單元測試不是功能、集成測試單元測試、TDD、敏捷單元測試是開發(fā)周期的一部分，和開發(fā)本身不可割裂,單元測試的意義,明確需求（將模糊的需求精確為代碼級的需求）快速驗證代碼是否達到了需求從可

21、測性角度分析自己的設計,如何寫出良好的用例,單元測試有效性的前提進行合適代碼設計功能拆分成小模塊盡量不要依賴方法、對象之外的變量，而是明確自己的輸入輸出,參考資料,http://yuilibrary.com/yui/docs/test/http://www.yuiblog.com/blog/2008/10/20/video-zakas-yuitest/http://yuiblog.com/blog/2009/01/05/eff