《前端单元测试基础介绍ppt课件.ppt》由会员分享，可在线阅读，更多相关《前端单元测试基础介绍ppt课件.ppt（33页珍藏版）》请在三一办公上搜索。
1、前端单元测试,入门与实践,一个实例,在一个统计客户端信息的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; , testBrows
2、erName: function () for (var i = 0; i testData.length; i+) var ua = testDatai0.toLowerCase(); oResult = this.testFun(ua); Y.Assert.areEqual(testDatai1, oResultnavName, ua); , ） /add the test cases and suites suite.add(testCaseGetInfo); /run all tests Y.Test.Runner.add(suite); Y.Test.Runner.run(););,
3、执行测试,多浏览器自动执行测试用例,代码的演化过程,从最开始的需求，到现在最后的成品代码+测试用例，中间是如何演化的？,原始需求,在一个统计客户端信息的js中，写一个方法，从userAgent字符串获取浏览器引擎，名称，版本号等信息，要求能处理最常用的一些浏览器,我们开始设想和编写代码,if (!windowanalizer) windowanalizer = new function () var ua=navigator.userAgent;self._getBrowserInfo = function /* * code to process useragent string*/ ret
4、urn oBrowser; ,我们需要支持常用各大浏览器,于是我们刻苦钻研，甚至找了曾哥写出了超简一行正则出结果的代码,function _getBrowserInfo(ua) var oBrowser = ; var match = ua.match(/(opera|ie|firefox|chrome|version)s/:(wd.+)?.*?(safari|versions/:(wd.+)|$)/) | null, unknown, 0; var mode = match1 = ie ,一行正则检测五大浏览器名字，版本号，语言,然后我们来验证,依次打开各大浏览器，逐个检验，ok啦,接着要获
5、取操作系统信息,我们刻苦钻研，甚至找了曾哥写出了简洁获取系统信息的代码。,function _getOSInfo() var oOS = ; return oOS; ,然后我们来验证,打开目前使用的系统上各大浏览器验证一下打开虚拟机跑xp验证一下打开虚拟机跑Linux验证一下打开mac验证一下,发现了一个bug！,修改代码，本例中代码互不影响，如果有时候进行了抽象和提取，修改基础方法还需要回归所有功能验证：打开当前系统五大浏览器验证一下打开虚拟机跑xp验证一下打开虚拟机跑linux验证一下打开mac验证一下,终于初步开发完了,这时发现其实我们还要获取移动操作系统的信息,需求提出/变更,开发-验
6、证-开发,打开iPhone验证一下打开iPad验证一下打开iTouch验证一下打开安卓验证一下打开windows Phone 验证一下,Introducting,YUI TEST,结构,业务代码,测试代码,xxTest.htmlyui-min.jsae.jsrun.jstest.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 Firefo
7、x/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 te
8、stData.length; i+) var ua = testDatai0.toLowerCase(); oResult = this.testFun(ua); Y.Assert.areEqual(testDatai1, oResultnavName, ua); , ） /add the test cases and suites suite.add(testCaseGetInfo); /run all tests Y.Test.Runner.add(suite); Y.Test.Runner.run(););,执行测试,加入单元测试后的流程,需求提出/变更,设计,编码,编写用例,快速UC验
9、证,多轮,快速的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_DEBU
10、G = 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、敏捷单元测试是开发周期的一部分，和开发本身不可割裂,单元测试的意义,明确需求（将模糊的需求精确为代码级的需求）快速验证代码是否达到了需求从可测性角度分析自己的设计,如何写出良好的用例,单元测试有效性的前提进行合适代码设计功能拆分成小模块尽量不要依赖方法、对象之外的变量，而是明确自己的输入输出,参考资料,http:/,
