搜索
前端单元测试入门与实践一个实例在一个统计客户端信息的js中，写一个方法，从userAgent字符串获取浏览器引擎，名称，版本号等信息，要求能处理最常用的一些浏览器function_getBrowserInfo(ua){…………returnoBrowser;}最后采用的形式这个方法的测试用例YUI().use(test,function(Y){window.Y=Y;vartestCaseBrowser=newY.Test.Case({setUp:function(){this.testFun=window._getBrowserInfo;},testBrowserName:function(){for(vari=0;itestData.length;i++){varua=testData[i][0].toLowerCase();oResult=this.testFun(ua);Y.Assert.areEqual(testData[i][1],oResult['navName'],ua);}},……}）//addthetestcasesandsuitessuite.add(testCaseGetInfo);…………//runalltestsY.Test.Runner.add(suite);Y.Test.Runner.run();});执行测试多浏览器自动执行测试用例代码的演化过程•从最开始的需求，到现在最后的成品代码+测试用例，中间是如何演化的？原始需求在一个统计客户端信息的js中，写一个方法，从userAgent字符串获取浏览器引擎，名称，版本号等信息，要求能处理最常用的一些浏览器我们开始设想和编写代码if(!window['analizer']){window['analizer']=newfunction(){varua=navigator.userAgent;……self._getBrowserInfo=function{/***codetoprocessuseragentstring*/……returnoBrowser;}}我们需要支持常用各大浏览器•于是我们刻苦钻研，甚至找了曾哥写出了超简一行正则出结果的代码function_getBrowserInfo(ua){varoBrowser={};varmatch=ua.match(/(opera|ie|firefox|chrome|version)[\s\/:]([\w\d\.]+)?.*?(safari|version[\s\/:]([\w\d\.]+)|$)/)||[null,'unknown',0];varmode=match[1]=='ie'&&document.documentMode;oBrowser['browserName']=(match[1]=='version')?match[3]:match[1];oBrowser['browserVersion']=mode||((match[1]=='opera'&&match[4])?match[4]:match[2]);oBrowser['browserLanguage']=(navigator['browserLanguage']||navigator['language']).toLowerCase();returnoBrowser;}一行正则检测五大浏览器名字，版本号，语言然后我们来验证•依次打开各大浏览器，逐个检验，ok啦～接着要获取操作系统信息•我们刻苦钻研，甚至找了曾哥写出了简洁获取系统信息的代码。function_getOSInfo(){varoOS={};…………returnoOS;}然后我们来验证•打开目前使用的系统上各大浏览器验证一下•打开虚拟机跑xp验证一下•打开虚拟机跑Linux验证一下•打开mac验证一下发现了一个bug！•修改代码，本例中代码互不影响，如果有时候进行了抽象和提取，修改基础方法还需要回归所有功能•验证：打开当前系统五大浏览器验证一下•打开虚拟机跑xp验证一下•打开虚拟机跑linux验证一下•打开mac验证一下终于初步开发完了•这时发现其实我们还要获取移动操作系统的信息需求提出/变更开发-验证-开发……•打开iPhone验证一下•打开iPad验证一下•打开iTouch验证一下•打开安卓验证一下•打开windowsPhone验证一下•……IntroductingYUITEST结构业务代码测试代码xxTest.htmlyui-min.jsae.jsrun.jstest.js测试代码vartestData_fun_getInfo=[/**datatemplate:*[#ua#,#wordlist#,#name#,#version#]*/[Mozilla/5.0(WindowsNT6.1;WOW64;rv:2.0.1)Gecko/20100101Firefox/4.0.1,[360se,360chrome,\\sse,tencenttraveler,maxthon,theworld,ucweb,greenbrowser],undefined,undefined］,[……],[……]]YUI().use(test,function(Y){window.Y=Y;vartestCaseBrowser=newY.Test.Case({setUp:function(){this.testFun=window._getBrowserInfo;},testBrowserName:function(){for(vari=0;itestData.length;i++){varua=testData[i][0].toLowerCase();oResult=this.testFun(ua);Y.Assert.areEqual(testData[i][1],oResult['navName'],ua);}},……}）//addthetestcasesandsuitessuite.add(testCaseGetInfo);…………//runalltestsY.Test.Runner.add(suite);Y.Test.Runner.run();});执行测试加入单元测试后的流程需求提出/变更设计编码编写用例快速UC验证多轮快速的UC验证TestRunner:testGetInfo_name:failed.mozilla/5.0(windows;u;windowsnt5.1;en-us)applewebkit/534.3(khtml,likegecko)chrome/6.0.472.33safari/534.3se2.xmetasr1.0Expected:safari(string)Actual:chrome(string)单元测试和功能代码的集成•测公用接口•测私有方法•测闭包方法/**@define{boolean}*/varENABLE_DEBUG=true;……if(window.ENABLE_DEBUG){window._getBaseInfo=_getBaseInfo;}function_getBaseInfo(){……}单元测试代码的迭代•Mozilla/5.0(Windows;U;WindowsNT5.1;)AppleWebKit/533.9(KHTML,likeGecko)Maxthon/3.0Safari/533.9一些注意点•单元测试不是功能、集成测试•单元测试、TDD、敏捷•单元测试是开发周期的一部分，和开发本身不可割裂单元测试的意义•明确需求（将模糊的需求精确为代码级的需求）•快速验证代码是否达到了需求•从可测性角度分析自己的设计如何写出良好的用例•单元测试有效性的前提•进行合适代码设计•功能拆分成小模块•尽量不要依赖方法、对象之外的变量，而是明确自己的输入输出参考资料•••