前端单元测试基本介绍
前端单元测试 入门与实践 一个实例 这个方法的测试用例 执行测试 多浏览器自动执行测试用例 代码的演化过程 从最开始的需求,到现在最后的成品代码+测试用例,中间是如何演化的? 原始需求 我们开始设想和编写代码 我们需要支持常用各大浏览器 于是我们刻苦钻研,甚至找了曾哥写出了超简一行正则出结果的代码 然后我们来验证 依次打开各大浏览器,逐个检验,ok啦~ 接着要获取操作系统信息 我们刻苦钻研,甚至找了曾哥写出了简洁获取系统信息的代码。 然后我们来验证 打开目前使用的系统上各大浏览器验证一下 打开虚拟机跑xp验证一下 打开虚拟机跑Linux验证一下 打开mac验证一下 发现了一个bug! 修改代码,本例中代码互不影响,如果有时候进行了抽象和提取,修改基础方法还需要回归所有功能 验证:打开当前系统五大浏览器验证一下 打开虚拟机跑xp验证一下 打开虚拟机跑linux验证一下 打开mac验证一下 终于初步开发完了 这时发现其实我们还要获取移动操作系统的信息 开发->验证->开发…… 打开iPhone验证一下 打开iPad验证一下 打开iTouch验证一下 打开安卓验证一下 打开windows Phone 验证一下 …… Introducting YUI TEST 结构 测试代码 执行测试 加入单元测试后的流程 快速的UC验证 单元测试和功能代码的集成 测公用接口 测私有方法 测闭包方法 单元测试代码的迭代 Mozilla/5.0 (Windows; U; Windows NT 5.1; ) AppleWebKit/533.9 (KHTML, like Gecko) Maxthon/3.0 Safari/533.9 一些注意点 单元测试不是功能、集成测试 单元测试、TDD、敏捷 单元测试是开发周期的一部分,和开发本身不可割裂 单元测试的意义 明确需求(将模糊的需求精确为代码级的需求) 快速验证代码是否达到了需求 从可测性角度分析自己的设计 如何写出良好的用例 单元测试有效性的前提 进行合适代码设计 功能拆分成小模块 尽量不要依赖方法、对象之外的变量,而是明确自己的输入输出 参考资料 /yui/docs/test/ /blog/2008/10/20/video-zakas-yuitest/ /blog/2009/01/05/effective-tests/ Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 业务代码 测试代码 xxTest.html yui-min.js ae.js run.js test.js Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. var testData_fun_getInfo = [ /* * data template: * [#ua#,#wordlist#,#name#,#version#] */ [ "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0.1) GeckoFirefox/4.0.1", ["360se", "360chrome", "\\sse", "tencenttraveler", "maxthon", "theworld", "ucweb", "greenbrowser"], undefined, undefined ], [……], [……] ] Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 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