您的浏览器Javascript被禁用,需开启后体验完整功能, 请单击此处查询如何开启
网页 资讯 视频 图片 知道 贴吧 采购 地图 文库 |

幸运彩票不能提现,前端单元测试基础介绍_计算机软件及应用_IT/计算机_专业资料

2162人阅读|207次下载

幸运彩票不能提现,前端单元测试基础介绍_计算机软件及应用_IT/计算机_专业资料。幸运彩票不能提现,前端单元测试 入门与实践 一个实例 在一个统计客户端信息的js中,写一个方法, 从userAgent字符串获取浏览器引擎,名称, 版本号等信息,要求能处理最常用的一些 浏览器 funct


幸运彩票不能提现,前端单元测试 入门与实践 一个实例 在一个统计客户端信息的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 < testData.length; i++) { var ua = testData[i][0].toLowerCase(); oResult = this.testFun(ua); Y.Assert.areEqual( testData[i][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(); }); 执行测试 多浏览器自动执行测试用 例 代码的演化过程 ? 从最开始的需求,到现在最后的成品代码+测试 用例,中间是如何演化的? 原始需求 在一个统计客户端信息的js中,写一个方法, 从userAgent字符串获取浏览器引擎,名称, 版本号等信息,要求能处理最常用的一些 浏览器 我们开始设想和编写 代码 if (!window['analizer']) { window['analizer'] = new function () { var ua=navigator.userAgent; …… self._getBrowserInfo = function { /** * code to process useragent string */ …… return oBrowser; } } 我们需要支持常用各 大浏览器 ? 于是我们刻苦钻研,甚至找了曾哥写出了超简一 行正则出结果的代码 function _getBrowserInfo(ua) { 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] == '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(); return oBrowser; } 一行正则检测五大浏览器名字,版本号,语言 然后我们来验证 ? 依次打开各大浏览器,逐个检验,ok啦~ 接着要获取操作系统 信息 ? 我们刻苦钻研,甚至找了曾哥写出了简洁获取系 统信息的代码。幸运彩票不能提现 function _getOSInfo() { var oOS = {}; ………… return oOS; } 然后我们来验证 ? 打开目前使用的系统上各大浏览器验证一下 ? 打开虚拟机跑xp验证一下 ? 打开虚拟机跑Linux验证一下 ? 打开mac验证一下 发现了一个bug! ? 修改代码,本例中代码互不影响,如果 有时候进行了抽象和提取,修改基础方 法还需要回归所有功能 下 ? 验证:打开当前系统五大浏览器验证一 ? 打开虚拟机跑xp验证一下 ? 打开虚拟机跑linux验证一下 ? 打开mac验证一下 终于初步开发完了 ? 这时发现其实我们还要获取移动操作系统的信息 需求提出/变 更 ? 打开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 = testData[i][0].toLowerCase(); oResult = this.testFun(ua); Y.Assert.areEqual( testData[i][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; …… function _getBaseInfo(){ …… } if(window.ENABLE_DEBUG){ window._getBaseInfo = _getBaseInfo; } 单元测试代码的迭代 ? Mozilla/5.0 (Windows; U; Windows NT 5.1; ) AppleWebKit/533.9 (KHTML, like Gecko) Maxthon/3.0 Safari/533.9 一些注意点 ? 单元测试不是功能、集成测试 ? 单元测试、TDD、敏捷 ? 单元测试是开发周期的一部分,和开发本身不可 割裂 单元测试的意义 ? 明确需求(将模糊的需求精确为代码级的需求) ? 快速验证代码是否达到了需求 ? 从可测性角度分析自己的设计 如何写出良好的用例 ? 单元测试有效性的前提 ? 进行合适代码设计 ? 功能拆分成小模块 ? 尽量不要依赖方法、对象之外的变量, 而是明确自己的输入输出 参考资料 ? http://yuilibrary.com/yui/docs/test/ ? http://www.yuiblog.com/blog/2008/10/20 /video-zakas-yuitest/ ? http://yuiblog.com/blog/2009/01/05/effec tive-tests/
+申请认证

文档贡献者

张臣

百度web前端开发工程师

21 10482773 4.2
文档数 浏览总量 总评分

喜欢此文档的还喜欢