前端单元测试基础介绍.ppt

Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master title style,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,前端单元测试,入门与实践,一个实例,在一个统计客户端信息的js中，写一个方法，从userAgent字符串获取浏览器引擎，名称，版本号等信息，要求能处理最常用的一些浏览器,function,_getBrowserInfo(ua),return,oBrowser;,最后采用的形式,这个方法的测试用例,YUI().use(,test,function,(Y),window.Y=Y;,var,testCaseBrowser=,new,Y.Test.Case(,setUp:,function,(),this,.testFun=window._getBrowserInfo;,testBrowserName:,function,(),for,(,var,i=,0,;i 验证-开发,打开iPhone验证一下,打开iPad验证一下,打开iTouch验证一下,打开安卓验证一下,打开windows Phone 验证一下,Introducting,YUI TEST,结构,业务代码,测试代码,xxTest.html,yui-min.js,ae.js,run.js,test.js,测试代码,var,testData_fun_getInfo=,/*,*data template:,*#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,tencenttraveler,maxthon,theworld,ucweb,greenbrowser,undefined,undefined,YUI().use(,test,function,(Y),window.Y=Y;,var,testCaseBrowser=,new,Y.Test.Case(,setUp:,function,(),this,.testFun=window._getBrowserInfo;,testBrowserName:,function,(),for,(,var,i=,0,;i testData.length;i+),var,ua=testDatai,0,.toLowerCase();,oResult=,this,.testFun(ua);,Y.Assert.areEqual(,testDatai,1,oResult,navName,ua);,）,/add the test cases and suites,suite.add(testCaseGetInfo);,/run all tests,Y.Test.Runner.add(suite);,Y.Test.Runner.run();,);,执行测试,加入单元测试后的流程,需求提出/变更,设计,编码,编写用例,快速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,:safari(string),Actual,:chrome(string),单元测试和功能代码的集成,测公用接口,测私有方法,测闭包方法,/*define boolean*/,var,ENABLE_DEBUG=,true,;,if,(window.ENABLE_DEBUG),window._getBaseInfo=_getBaseInfo;,function,_getBaseInfo(),单元测试代码的迭代,Mozilla/5.0(Windows;U;Windows NT 5.1;)AppleWebKit/533.9(KHTML,like Gecko)Maxthon/3.0 Safari/533.9,一些注意点,单元测试不是功能、集成测试,单元测试、TDD、敏捷,单元测试是开发周期的一部分，和开发本身不可割裂,单元测试的意义,明确需求（将模糊的需求精确为代码级的需求）,快速验证代码是否达到了需求,从可测性角度分析自己的设计,如何写出良好的用例,单元测试有效性的前提,进行合适代码设计,功能拆分成小模块,尽量不要依赖方法、对象之外的变量，而是明确自己的输入输出,参考资料,