前端单元测试基础介绍课件

前端单元测试入门与实践前端单元测试入门与实践一个实例一个实例在一个统计客户端信息的js中，写一个方法，从userAgent字符串获取浏览器引擎，名称，版本号等信息，要求能处理最常用的一些浏览器在一个统计客户端信息的js中，写一个方法，从userAgenfunction_getBrowserInfo(ua){…………returnoBrowser;}最后采用的形式function_getBrowserInfo(ua){这个方法的测试用例这个方法的测试用例YUI().use("test",function(Y){window.Y=Y;

vartestCaseBrowser=newY.Test.Case({setUp:function(){

this.testFun=window._getBrowserInfo;},testBrowserName:function(){

for(vari=0;i<testData.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();});YUI().use("test",function(Y)执行测试执行测试多浏览器自动执行测试用例多浏览器自动执行测试用例代码的演化过程从最开始的需求，到现在最后的成品代码+测试用例，中间是如何演化的？代码的演化过程从最开始的需求，到现在最后的成品代码+测试用例原始需求在一个统计客户端信息的js中，写一个方法，从userAgent字符串获取浏览器引擎，名称，版本号等信息，要求能处理最常用的一些浏览器原始需求在一个统计客户端信息的js中，写一个方法，从user我们开始设想和编写代码if(!window['analizer']){window['analizer']=new

function(){varua=navigator.userAgent;……self._getBrowserInfo=function

{/***codetoprocessuseragentstring*/……

returnoBrowser;}}我们开始设想和编写代码if(!window['analiz我们需要支持常用各大浏览器于是我们刻苦钻研，甚至找了曾哥写出了超简一行正则出结果的代码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啦～然后我们来验证依次打开各大浏览器，逐个检验，ok啦～接着要获取操作系统信息我们刻苦钻研，甚至找了曾哥写出了简洁获取系统信息的代码。

function_getOSInfo(){

varoOS={};

…………

returnoOS;}接着要获取操作系统信息我们刻苦钻研，甚至找了曾哥写出了简洁获然后我们来验证打开目前使用的系统上各大浏览器验证一下打开虚拟机跑xp验证一下打开虚拟机跑Linux验证一下打开mac验证一下然后我们来验证打开目前使用的系统上各大浏览器验证一下发现了一个bug！修改代码，本例中代码互不影响，如果有时候进行了抽象和提取，修改基础方法还需要回归所有功能验证：打开当前系统五大浏览器验证一下打开虚拟机跑xp验证一下打开虚拟机跑linux验证一下打开mac验证一下发现了一个bug！修改代码，本例中代码互不影响，如果有时候进终于初步开发完了这时发现其实我们还要获取移动操作系统的信息需求提出/变更终于初步开发完了这时发现其实我们还要获取移动操作系统的信息需开发->验证->开发……打开iPhone验证一下打开iPad验证一下打开iTouch验证一下打开安卓验证一下打开windowsPhone验证一下……开发->验证->开发……打开iPhone验证一下IntroductingYUITESTIntroductingYUITEST结构业务代码测试代码xxTest.htmlyui-min.jsae.jsrun.jstest.js结构业务代码测试代码xxTest.html测试代码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］,[……],[……]]测试代码vartestData_fun_getInfo=YUI().use("test",function(Y){window.Y=Y;

vartestCaseBrowser=newY.Test.Case({setUp:function(){

this.testFun=window._getBrowserInfo;},testBrowserName:function(){

for(vari=0;i<testData.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();});YUI().use("test",function(Y)执行测试执行测试加入单元测试后的流程需求提出/变更设计编码编写用例快速UC验证多轮加入单元测试后的流程需求提出/变更设计编码编写用例快速UC验快速的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.0

Expected:safari(string)Actual:chrome(string)TestRunner:单元测试和功能代码的集成测公用接口测私有方法测闭包方法单元测试和功能代码的集成测公用接口/**@define{boolean}*/varENABLE_DEBUG=true;……if(window.ENABLE_DEBUG){ window._getBaseInfo=_getBaseInfo;}function_getBaseInfo(){ …… }/**@define{boolean}*/if(win单元测试代码的迭代Mozilla/5.0(Windows;U;WindowsNT5.1;)AppleWebKit/533.9(KHTML,likeGecko)Maxthon/3.0Safari/533.9单元测试代码的迭代Mozilla/5.0(Windows;一些注意点单元测试不是功能、集成测试单元测试、TDD、敏捷单元测试是开发周期的一部分，和开发本身不可割裂一些注意点单元测试不是功能、集成测试单元测试的意义明确需求（将模糊的