前端单元测试基础介绍

时间：2025-07-09

前端单元测试

入门与实践

一个实例

在一个统计客户端信息的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=http://www.77cn.com.cnerAgent; …… 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！

修改代码，本例中代码互不影响，如果

有时候进行了抽象和提取，修改基础方法还需要回归所有功能下