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

前端单元测试;一个实例;在一个统计客户端信息的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(); });;执行测试;多浏览器自动执行测试用例;代码的演化过程;原始需求;我们开始设想和编写代码;我们需要支持常用各大浏览器;然后我们来验证;接着要获取操作系统信息;然后我们来验证;发现了一个bug！;终于初步开发完了;开发-验证-开发……;Introducting;结构;测试代码;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验证;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; ……;单元测试代码的迭代;一些注意点;单元测试的意义;如何写出良好的用例;参考资料