前端單元測試基礎(chǔ)介紹

1、前端單元測試,入門與實(shí)踐,一個(gè)實(shí)例,在一個(gè)統(tǒng)計(jì)客戶端信息的js中，寫一個(gè)方法，從userAgent字符串獲取瀏覽器引擎，名稱，版本號等信息，要求能處理最常用的一些瀏覽器,,function _getBrowserInfo(ua) {…………return oBrowser;},最后采用的形式,,這個(gè)方法的測試用例,,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、動(dòng)執(zhí)行測試用例,代碼的演化過程,從最開始的需求，到現(xiàn)在最后的成品代碼+測試用例，中間是如何演化的？,原始需求,在一個(gè)統(tǒng)計(jì)客戶端信息的js中，寫一個(gè)方法，從userAgent字符串獲取瀏覽器引擎，名稱，版本號等信息，要求能處理最常用的一些瀏覽器,我們開始設(shè)想和編寫代碼,if (!window['analizer']) {window['analizer'] = new function () {var

6、ua=navigator.userAgent;……self._getBrowserInfo = function {/** * code to process useragent string*/…… return oBrowser; }},我們需要支持常用各大瀏覽器,于是我們刻苦鉆研，甚至找了曾哥寫出了超簡一行正則出結(jié)果的代碼,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; },一行正則檢測五大瀏覽器名字，版本號，語言,,然后我們來驗(yàn)證,依次打開各大瀏覽器，逐個(gè)檢驗(yàn)，ok啦～,接著要獲取操作系統(tǒng)信息,我們刻苦鉆研，甚至找了曾哥寫出了簡潔獲取系統(tǒng)信息的代碼。,function _getOSInfo() { var oOS = {}; ………… return oOS; },然后我們來驗(yàn)證,打開

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

12、gt;開發(fā)……,打開iPhone驗(yàn)證一下打開iPad驗(yàn)證一下打開iTouch驗(yàn)證一下打開安卓驗(yàn)證一下打開windows Phone 驗(yàn)證一下……,Introducting,YUI TEST,結(jié)構(gòu),業(yè)務(wù)代碼,測試代碼,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í)行測試,加入單元測試后的流程,需求提出/變更,設(shè)計(jì),編碼,編寫用

18、例,快速UC驗(yàn)證,多輪,,,,,,,快速的UC驗(yàn)證,,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,一些注意點(diǎn),單元測試不是功能、集成測試單元測試、TDD、敏捷單元測試是開發(fā)周期的一部分，和開發(fā)本身不可割裂,單元測試的意義,明確需求（將模糊的需求精確為代碼級的需求）快速驗(yàn)證代碼是否達(dá)到了需求從可

21、測性角度分析自己的設(shè)計(jì),如何寫出良好的用例,單元測試有效性的前提進(jìn)行合適代碼設(shè)計(jì)功能拆分成小模塊盡量不要依賴方法、對象之外的變量，而是明確自己的輸入輸出,參考資料,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