`

拥抱JsUnit

junitAntHTML浏览器 
阅读更多
拥抱JsUnit
以往在测试js的时候，都是以alert方式来检测错误，很不专业，今天发现竟然有jsunit这个测试工具，感觉非常不错。
废话不说了，是骡子是马拉出来溜溜再说。

1 简单入门实例
首先我们定义我们的函数
这里以最简单的加减乘除四个方法来进行测试
建立我们的js文件myjs.js 
function add(num1,num2){
	return num1 + num2;
}

function minus(num1,num2){
	return num1 - num2;
}

function multiply(num1,num2){
	return num1 * num2;
}

function divide(num1,num2){
	return num1 / num2;
}

建立我们的测试用例，mytest1.html
我们将建立四个测试方法，jsUnit的测试方法必须以test开头。
下面我们对myjs.js中的加减乘除四个函数进行测试,
下面是jsUnit给我们提供的断言方式 [comment] 是可选的 表示断言出错的时候给出的提示
assert([comment], booleanValue)
assertTrue([comment], booleanValue)
assertFalse([comment], booleanValue)
assertEquals([comment], value1, value2)
assertNotEquals([comment], value1, value2)
assertNull([comment], value)
assertNotNull([comment], value)
assertUndefined([comment], value)
assertNotUndefined([comment], value)
assertNaN([comment], value)
assertNotNaN([comment], value)
fail(comment) 
<!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(4,2)
	assertEquals(6,result);
}

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

function testMultiply(){
	var result = multiply(4,2)
	assertEquals(8,result);
}

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

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

我们通过jsunit给我们提供的测试运行器testRunner.html来进行测试

2 setUp()与tearDown()
JsUnit也支持setUp()和tearDown()。JsUnit与JUnit有一点是一样的，即setUp()和tearDown()是可选的，而且setUp()会在每个测试之前调用，tearDown()会在每个测试之后调用。
我们可以在测试页面中加入setUp()和tearDown()的方法。 
function setUp(){
	alert("setUp");
}

function tearDown(){
	alert("tearDown");
}

JUnit与JsUnit中setUp()和tearDown()方法的重要区别：
在JUnit中，每次测试运行会导致创建Test类的一个新实例，这说明，声明的所有实例变量在下一次测试运行时会“重置”。
JsUnit有所不同，它不会为每次测试运行重新加载测试页，所以变量状态会在多次测试之间保留。
还有一个重要区别与测试顺序有关，使用JUnit的话，测试执行的顺序是不能保证的。在JsUnit中，测试会按测试页中声明的顺序执行，先从最上面的测试开始。
虽然区别如此，但我们应该了解每个测试用例都是应该相互独立的，不能真的顺序来调整我们的用例

下面是一个具体例子。
这里我们将函数和测试用例都写在一起了，在实际测试中应该避免 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE></TITLE>
  <script type="text/javascript" src="jsunit\app\jsUnitCore.js"></script>
 </HEAD>

 <BODY>
    <script language="JavaScript">
		//原函数
		function addTwoNumbers(value1, value2) {
				return parseInt(value1) + parseInt(value2);
		}
		function addNumbers() {
            var val1 = document.getElementById("value1").value;
            var val2 = document.getElementById("value2").value;
            return addTwoNumbers(val1, val2);
        }
		//初始化测试数据
        function setUp() {
            document.getElementById("value1").value = "2";
            document.getElementById("value2").value = "2";
        }
		//测试方法
        function testValidArgs() {
            assertEquals("2 + 2 should equal 4", 4, addNumbers());
        }
        
		//清空测试数据
        function tearDown() {
            document.getElementById("value1").value = "";
            document.getElementById("value2").value = "";
        }
    </script>
    <form id="test">
        <input type="text" size="3" id="value1"/>
        <input type="text" size="3" id="value2"/>
        <input type="button" value="Add" onclick="addNumbers()"/>
    </form>
  </body>
</html>
 </BODY>
</HTML>


3 setUpPage()函数
setUpPage()函数只对每个测试页调用一次，即在所有测试函数调用之前调用。现在，你可能已经发现，这里很适合完成预处理，特别是在运行测试之前如果需要向页面加载一些数据，setUpPage()函数就非常有用。不同于setUp()和tearDown()函数的是，使用setUpPage()不只是把处理放在这个函数中就行了的。如果确实选择使用这个特性，一定要保证函数完成时要把setUpPageStatus变量设置为complete，这就告诉JsUnit可以继续，接下来可以执行测试页上的测试了。
我们更改第一个实例来看看结果 
<!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)
	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";
}

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


4 exposeTestFunctionNames()函数显示的声明我们的测试方法
JsUnit会自动发现测试函数，就像JUnit会发现所有测试方法一样。
有些操作系统/浏览器不能合作。如果你发现不能如你所愿地发现测试函数，使用exposeTestFunctionNames()方法就能解决这个问题。
在测试页面里定义exposeTestFunctionNames方法，jsunit运行器在执行时会寻找exposeTestFunctionNames方法，只执行在此方法内指定的方法；
我们还是已第一个例子为例
可以变为 
<!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)
	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>


5 jsUnit的日志跟踪
jsUuit的日志跟踪有3各级别：warn、info和debug
看下面的例子就知道了 
<!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>

在测试运行器中选择Trace level的级别就可以看到相应的日志信息了

6 测试套件(suit test)
测试集是为了把不同的测试页分组组织，其中可以包含测试页或其他测试集，他们会按照顺序执行。
注意点：
测试集中不能包含任何测试函数
必须包含一个返回 jsUnitTestSuite 对象的 suite 函数
有两个方法添加测试页：addTestPage(testPage) addTestSuite(testSuite), 在添加测试页时要注意路径，应是相对于testRunner.html的。
测试集的名称必须是suit() 
<!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>


7 通过浏览器完成自动测试
file:///D:/mytest/jsunit/testRunner.html?testPage=D:/mytest/mytest1.html&autoRun=true
个人感觉没有实际意义

8 采用ant方式完成自动测试
首先进入jsunit目录，build.xml是junit定义好的模板，我们只需要简单的添加就可以了。
配置property属性
browserFileNames：浏览器地址；多个可以用逗号隔开；
closeBrowsersAfterTestRuns：执行测试后，是否关闭浏览器；默认true
logsDirectory：日志存放目录
url：测试文件地址；如：
   file:///c:/jsunit/testRunner.html?testPage=c:/jsunit/tests/jsUnitTestSuite.html
在控制台下进入相关目录运行ant standalone_test 即可。
standalone_test是在单机上行运行测试；
distributed_test：是分布式远程测试；
ant不能执行或者执行出错：
查看环境变量
path下是否有java与ant的bin
是否设置Java_Home
分享到：
| 关于union双向排序（mysql）
评论
3 楼 cuqing 2016-04-21  
Yahoo的一套JsUnit测试框架是什么？
2 楼 dyllove98 2011-12-17  
恩 资料比较详细
1 楼 houfeng0923 2011-05-09  
看过D一下
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript单元测试 jsunit2.2

    jsUnit 是一个专门用于 JavaScript 的单元测试框架，版本 2.2 提供了更稳定和强大的测试支持。在本篇文章中，我们将深入探讨 JavaScript 单元测试的重要性和 jsUnit 2.2 的关键特性，以及如何有效地使用它进行测试。...

    jsunit2.2 alpha11

    JavaScript Unit (JSUnit) 是一个专门用于测试 JavaScript 代码的单元测试框架，它在Web开发领域扮演着重要的角色。JSUnit 2.2 alpha 11 版本是该工具的一个早期版本，提供了对JavaScript代码进行系统化和自动化测试...

    jsunit.rar

    JavaScript Unit Testing，通常简称为JSUnit，是一种针对JavaScript代码进行单元测试的框架，类似于Java中的JUnit工具。在软件开发过程中，单元测试是确保代码质量、可维护性和避免bug的重要环节。JSUnit允许开发者...

    JsUnit 开源单元测试框架

    JsUnit是JavaScript的开源单元测试框架。它受到JUnit的启发，并完全用JavaScript编写。作为最流行的 JavaScript单元测试框架，它还提供了一些ant任务，使开发人员在持续集成服务器上构建时很容易运行测试套件。

    JSUnit单元测试

    ### JSUnit单元测试 #### 一、JSUnit简介与安装 **JSUnit**是JavaScript单元测试框架的一个实现，它是JUnit的JavaScript版本。JSUnit的主要作用是帮助开发者编写和执行前端JavaScript代码的单元测试，确保代码的...

    JSunit2.2(上)

    很好的JavaScript测试工具,呵呵,首次发表望多多支持.

    JSUnit Javascript单元测试

    JSUnit是专为JavaScript设计的一个单元测试框架，它使得JavaScript应用程序的测试变得更加系统化和自动化。下面将详细介绍JSUnit以及其在JavaScript单元测试中的应用。 首先，让我们理解什么是单元测试。单元测试是...

    JsUnit单元测试框架

    **JsUnit单元测试框架** JsUnit是一款专门为JavaScript代码设计的单元测试框架，它借鉴了Java领域中的JUnit测试框架的理念，为JavaScript开发者提供了一种结构化、自动化测试的工具。单元测试是软件开发过程中的...

    jsunit教程(ppt)

    JavaScript 单元测试框架 JsUnit 是一种用于在浏览器环境中对 JavaScript 代码进行单元测试的工具。这个框架的设计灵感来源于 XUnit 模式，这是一种广泛应用于各种编程语言的标准化单元测试框架概念。XUnit 框架的...

    JsUnit && Eclipse plugin

    JavaScript 单元测试框架 JsUnit 和 Eclipse 插件是 Web 应用开发中不可或缺的工具。JsUnit 是一个专门用于 JavaScript 代码单元测试的框架，它借鉴了 JUnit 的概念和设计，使得开发者能够对 JavaScript 代码进行...

    jsunit_1-2[1]

    JavaScript Unit Testing，通常简称为JsUnit，是一种专门用于测试JavaScript代码的工具。在Web开发中，尤其是使用Ajax技术时，单元测试是确保代码质量和可维护性的重要环节。JsUnit为JavaScript开发者提供了一种结构...

    JSunit入门教程.pdf

    JSunit是一个JavaScript单元测试框架，它的目的是为了帮助JavaScript开发人员编写和运行测试用例。通过使用JSunit，开发者可以在他们的JavaScript代码中实现测试驱动开发（TDD），确保代码质量，并且可以更方便地...

    JsUnit——eclipse插件（四）

    **JsUnit——Eclipse插件（四）** JsUnit是一款用于JavaScript单元测试的框架，它为JavaScript开发者提供了类似于Java JUnit的测试环境。在本文中，我们将深入探讨如何在Eclipse集成开发环境中安装和使用JsUnit插件...

    JsUnit详解——Web服务方式（三）

    JavaScript Unit Testing，通常简称为JsUnit，是一种针对JavaScript代码进行单元测试的框架。在Web服务开发中，单元测试是确保代码质量、可维护性和可扩展性的重要环节。本篇文章将详细探讨JsUnit在Web服务场景下的...

    jsunit单元测试技术讲解

    在这个主题中，我们将深入探讨单元测试的重要性、原理以及如何使用 jsunit 这样的工具来进行单元测试。 首先，我们要明白软件开发中遇到的挑战。随着项目的迭代，软件需要不断添加新特性、修复错误、优化性能和重构...

    JsUnit详解——《ajax基础》笔记（二）

    **JsUnit详解——《ajax基础》笔记（二）** JsUnit是一个JavaScript单元测试框架，它允许开发者对JavaScript代码进行测试，确保代码的质量和功能的正确性。本篇笔记主要聚焦在JsUnit的使用方法和与Ajax基础的结合，...

    JsUnit-开源

    **JsUnit 开源详解** JsUnit 是一个针对 JavaScript 语言设计的单元测试框架，它的灵感来源于 Java 领域中的著名测试工具 JUnit。JsUnit 的出现，为 JavaScript 开发者提供了一种强大的、结构化的测试工具，使得在...

    JSunit2.2(下)

    很好的JavaScript测试工具,呵呵,首次发表望多多支持.

Magicbox
Global site tag (gtag.js) - Google Analytics