前端测试进化论2

最新推荐文章于 2025-09-06 22:56:13 发布

weixin_33676492

最新推荐文章于 2025-09-06 22:56:13 发布

阅读量112

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ui ViewUI

原文链接：https://yq.aliyun.com/articles/129637

说完了，前端技术的发展史，那么对应的前端测试发展史也随之发展。

石器时代——纯手工测试

早期的页面基本都是静态化的页面，只有几个链接或者图片，那么相对测试工作量不大，只需要我们打开页面查看加载是否正确。

铁器时代–xunit

到了javascript时代，随着其他语言xunit 风靡天下,js 也出现了它的xunit 框架。

Jsunit，以往在测试js的时候，都是以alert方式来检测错误，很不专业。

2001年 jsunit 出现，让js调试称为可能。

Jsunit 主要参考junit的设计，只要你会使用junit 那么jsunit 对你来说，根本不是什么事，具体使用参考

http://llying.iteye.com/blog/258605
DEMO:

测试代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>testHtml</TITLE>
 </HEAD>
<script type="text/javascript" src="myjs.js"></script>
<script type="text/javascript" src="jsunit\app\jsUnitCore.js"></script>
<script type="text/javascript">
<!--
function testAdd(){
	var result = add(arg1,arg2);
	warn("result", result);
	debug("result", result);
	info("result", result);
	assertEquals(6,result);
}

function testMinus(){
	var result = minus(arg1,arg2)
	assertEquals(2,result);
}

function testMultiply(){
	var result = multiply(arg1,arg2)
	assertEquals(8,result);
}

function testDivide(){
	var result = divide(arg1,arg2)
	assertEquals("4 divide 2 is 2",2,result);
}

function setUpPage(){
	arg1 = 4;
	arg2 = 2;
	setUpPageStatus = "complete";
}

function exposeTestFunctionNames(){
	var tests = new Array();
	tests[0]="testAdd";
	tests[1]="testMinus";
	tests[2]="testMultiply";
	return tests;
}

//-->
</SCRIPT>
 <BODY>

 </BODY>
</HTML>

测试驱动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>suit test</TITLE>
 </HEAD>
<script type="text/javascript" src="jsunit\app\jsUnitCore.js"></script>
<script type="text/javascript">
<!--
function suite()
{
	var testSuite = new top.jsUnitTestSuite();
	//增加的测试页面的路径是相对于测试运行器的路径的（testRunner.html），而不是相对于当前的页面
	testSuite.addTestPage("../mytest1.html");
    //套件里还可以在包含套件
	testSuite.addTestSuite(Suite2());
	return testSuite;
}
function Suite2() //需要与suite定义在同一个页面中
{
	var testSuite = new top.jsUnitTestSuite();
	testSuite.addTestPage("../mytest2.html");
	return testSuite;
}

//-->
</SCRIPT>
 <BODY>

 </BODY>
</HTML>

http://www.jsunit.net/

工业革命–ajax流行

随着ajax的流行，jquery框架在前端开发中的普及，让开发者看到了前端的新纪元，
jquery 团队也为广大开发人员开发了Qunit.QUnit 是一款强大而且容易使用的JavaScript 测试框架，它被用于jQuery 与其插件的测试，同时它也同样可以测试普通的JavaScript 代码.

TDD的时代来临 QUnit框架版本

将要被测试的代码需要添加到myProject.js中，并且你的测试用例应该插入到myTest.js。要运行这些测试，只需在一个浏览器中打开这个html文件。现在需要写一些测试用例了。

<!DOCTYPE html>
<html>
<head>
    <title>QUnit Test Suite</title>
    <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" mce_href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen">
    <mce:script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js" mce_src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></mce:script>
    <!-- Your project file goes here -->
    <mce:script type="text/javascript" src="myProject.js" mce_src="myProject.js"></mce:script>
    <!-- Your tests file goes here -->
    <mce:script type="text/javascript" src="myTests.js" mce_src="myTests.js"></mce:script>
</head>
<body>
    <h1 id="qunit-header">QUnit Test Suite</h1>
    <h2 id="qunit-banner"></h2>
    <div id="qunit-testrunner-toolbar"></div>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>
</body>
</html>