18、JavaScript单元测试框架jsUnit

最新推荐文章于 2020-07-09 23:13:50 发布
最新推荐文章于 2020-07-09 23:13:50 发布
阅读量816 收藏
点赞数
分类专栏： JAVA WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kaoa000/article/details/8857384
版权

1、JavaScript编码规范：通常在Javascript不希望外界访问的成员和方法名以下划线开始

2、jsUnit测试函数的要遵循的规则与JUnit3.8类似（比如说测试函数名以test开头等）

想要使用jsUnit，要引入jsUnit库jsUnitCore.js，使用如下语句：

 <script type="text/javascript" src="jsunit/app/jsUnitCore.js">  </script>

<html>
	<HEAD>
		<title>test</title>
	
		<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
		</script>

		<script type="text/javascript">
		function add(num1,num2)
		{	
			return num1 + num2;
		}	
		function subtract(num1,num2)
		{
			return num1 - num2;
		}
		function multiply(num1,num2)
		{
			return num1 * num2;
		}

		//以下为测试函数（Test Function）
		function testAdd()
		{
			var result = add(1,2);
			assertEquals(3,result)
		}
		function testSubtract()
		{
			var result = substract(1,2);
			assertEquals(-1,result);
		}
		function testMultiply()
		{
			var result = multiply(3,2);
			assertEquals(6,result);
		}
		</script>
	
	</HEAD>

	<body>
		
	</body>
</HTML>


对于正常的工程项目来说，一般将测试代码和实际代码分开，将实际代码单独放到一个js文件中，如：test1.js

function add(num1,num2)
		{	
			return num1 + num2;
		}	
		function subtract(num1,num2)
		{
			return num1 - num2;
		}
		function multiply(num1,num2)
		{
			return num1 * num2;
		}


测试：

<html>
	<HEAD>
		<title>test</title>
	
		<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
		</script>
		<script type="text/javascript" src="test1.js"></script>
		<script type="text/javascript">
	

		//以下为测试函数（Test Function）
		function testAdd()
		{
			var result = add(1,2);
			assertEquals(3,result)
		}
		function testSubtract()
		{
			var result = subtract(1,2);
			assertEquals(-1,result);
		}
		function testMultiply()
		{
			var result = multiply(3,2);
			assertEquals(6,result);
		}
		</script>
	
	</HEAD>

	<body>
		
	</body>
</HTML>


 

3、对于jsUnit来说，其setUp和tearDown方法与Junit的运行原理是不同的，JUnit中的setUo和tearDown之间是没有关系的，也就是说不同的测试方法运行在不同的测试对象之中，而jsUnit的各个测试函数是运行在同一个测试页面中的。因此setUp和tearDown会针对同一个变量进行操作：

<html>
	<HEAD>
		<title>test</title>
	
		<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
		</script>
		<script type="text/javascript" src="test1.js"></script>
		<script type="text/javascript">

		var count = 0;
		function setUp()
		{
			alert("setUp：" + count++);
		}

		function tearDown()
		{
			alert("tearDown");
		}
		//以下为测试函数（Test Function）
		function testAdd()
		{
			var result = add(1,2);
			assertEquals(3,result)
		}
		function testSubtract()
		{
			var result = subtract(1,2);
			assertEquals(-1,result);
		}
		function testMultiply()
		{
			var result = multiply(3,2);
			assertEquals(6,result);
		}
		</script>
	
	</HEAD>

	<body>
		
	</body>
</HTML>


jsUnit提供了setUpPage方法，类似于JUnit4中的@BeforeClass，此函数只执行一次（在页面加载后），并且必须在函数最后一行添加：setUpPageStatus = "complete";

这行代码必须放在setUpPage函数的最后一行，告诉jsUnit setUpPage函数已经执行完毕，如果不加页面就会停止在这里，直到浏览器提示超时

<html>
	<HEAD>
		<title>test</title>
	
		<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
		</script>
		<script type="text/javascript" src="test1.js"></script>
		<script type="text/javascript">

		var count = 0;
		//此函数只执行一次（在页面加载后），类似于JUnit4中的@BeforeClass
		function setUpPage()
		{
			alert("setUpPage invoke");

			//这行代码必须放在setUpPage函数的最后一行，
			//告诉jsUnit setUpPage函数已经执行完毕，如果不加
			//页面就会停止在这里，直到浏览器提示超时	
			setUpPageStatus = "complete";
		}
		function setUp()
		{
			alert("setUp" + count++);
		}

		function tearDown()
		{
			alert("tearDown");
		}
		//以下为测试函数（Test Function）
		function testAdd()
		{
			var result = add(1,2);
			assertEquals(3,result)
		}
		function testSubtract()
		{
			var result = subtract(1,2);
			assertEquals(-1,result);
		}
		function testMultiply()
		{
			var result = multiply(3,2);
			assertEquals(6,result);
		}
		</script>
	
	</HEAD>

	<body>
		
	</body>
</HTML>


没有提供与@AfterClass对应的函数

3、网页上的三个输入文本，在1，2上输入数字，提供一个add按钮，点击按钮将相加结果填到第三个文本域，然后测试add函数

<html>
	<HEAD>
		<title>test</title>
	
		<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
		</script>
		<script type="text/javascript" src="test1.js"></script>
		<script type="text/javascript">

		var count = 0;
		//此函数只执行一次（在页面加载后），类似于JUnit4中的@BeforeClass
		function setUpPage()
		{
			alert("setUpPage invoke");

			//这行代码必须放在setUpPage函数的最后一行，
			//告诉jsUnit setUpPage函数已经执行完毕，如果不加
			//页面就会停止在这里，直到浏览器提示超时	
			setUpPageStatus = "complete";
		}
		function setUp()
		{
			//给文本域赋初值
			document.getElementById("value1").value = 2;
			document.getElementById("value2").value = 3;
		}

		function tearDown()
		{
			//恢复初始值
			document.getElementById("value1").value = "";
			document.getElementById("value2").value = "";
			document.getElementById("value3").value = "";
		}
		//以下为测试函数（Test Function）
		function testAdd()
		{
			var result = add(1,2);
			assertEquals(3,result)
		}
		function testSubtract()
		{
			var result = subtract(1,2);
			assertEquals(-1,result);
		}
		function testMultiply()
		{
			var result = multiply(3,2);
			assertEquals(6,result);
		}

		function testAddNumbers()
		{
			addNumbers();
			assertEquals("5",document.getElementById("value3").value);
		}
		</script>
	
	</HEAD>

	<body>
		<input type="text" id="value1"><br>	
		<input type="text" id="value2"><br>
		<input type="text" id="value3"><br>
		<input type="button" value="add" οnclick="addNumbers();"><br>
	</body>
</HTML>


test1.js文件：

	function add(num1,num2)
		{	
			return num1 + num2;
		}	
		function subtract(num1,num2)
		{
			return num1 - num2;
		}
		function multiply(num1,num2)
		{
			return num1 * num2;
		}

function addNumbers()
{
	var v1 = document.getElementById("value1").value;
	var v2 = document.getElementById("value2").value;

	v1 = parseInt(v1);
	v2 = parseInt(v2);

	var v3 = v1 + v2;
	
	document.getElementById("value3").value = v3;
}


4、测试套件

<html>
	<HEAD>
		<title>test</title>
	
		<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
		</script>
		<script type="text/javascript" src="test1.js"></script>
		<script type="text/javascript">
		
		//测试套件名一定为suite
	
		function suite()
		{
			var testSuite = new top.jsUnitTestSuite();
			
			//这里增加的测试页面的路径是相对于
			//测试运行器（testRunner.html）的路径,而不是当前页面
			testSuite.addTestPage("../test2.html");
			testSuite.addTestPage("../test2.html");
			testSuite.addTestPage("../test2.html");

			return testSuite;

		}
		</script>
	
	</HEAD>

	<body>
		<input type="text" id="value1"><br>	
		<input type="text" id="value2"><br>
		<input type="text" id="value3"><br>
		<input type="button" value="add" οnclick="addNumbers();"><br>
	</body>
</HTML>


上例是在套件里只增加测试页面，下面的例子是套件里既增加测试页面，也增加测试套件，即测试套件嵌套：

<html>
	<HEAD>
		<title>test</title>
	
		<script type="text/javascript" src="jsunit/app/jsUnitCore.js">
		</script>
		<script type="text/javascript" src="test1.js"></script>
		<script type="text/javascript">
				
		//定义自己的一个测试套件
		function mySuite()
		{	
			var testSuite = new top.jsUnitTestSuite();
			
			//这里增加的测试页面的路径是相对于
			//测试运行器（testRunner.html）的路径,而不是当前页面
			testSuite.addTestPage("../test2.html");
			testSuite.addTestPage("../test2.html");
			testSuite.addTestPage("../test2.html");

			return testSuite;
		}

		//测试套件名一定为suite
		function suite()
		{
			var testSuite = new top.jsUnitTestSuite();
			
			//这里增加的测试页面的路径是相对于
			//测试运行器（testRunner.html）的路径,而不是当前页面
			testSuite.addTestPage("../test2.html");  //这是增加测试页面
			testSuite.addTestSuite(mySuite());//这是增加测试套件
		

			return testSuite;

		}
		</script>
	
	</HEAD>

	<body>
		<input type="text" id="value1"><br>	
		<input type="text" id="value2"><br>
		<input type="text" id="value3"><br>
		<input type="button" value="add" οnclick="addNumbers();"><br>
	</body>
</HTML>


 

kaoa000
关注
专栏目录
JavaScript单元测试框架JsUnit基本介绍和使用
weixin_53341657的博客
01-27 983
XUnit framework XUnit是一套标准化的独立于语言的概念和结构集合,用于编写和运行单元测试(Unit tests). 每一个语言都有一个用于单元测试的XUnit框架,比如Java有JUnit, C++有CppUnit, PHP有PHPUnit, Oracle SQL有UTPL/SQL. JsUnit遵循XUnit的一些惯例: 单元测试在JsUnit中叫做Test Functions. est Functions所在的HTML页面叫做Test Page. 一个Test Page是一个包含js
javascript单元测试 jsunit2.2
03-01
jsUnit 是一个专门用于 JavaScript 的单元测试框架，版本 2.2 提供了更稳定和强大的测试支持。在本篇文章中，我们将深入探讨 JavaScript 单元测试的重要性和 jsUnit 2.2 的关键特性，以及如何有效地使用它进行测试。...
JSunit2.2(上)
11-25
很好的JavaScript测试工具,呵呵,首次发表望多多支持.
拥抱JsUnit
llying
10-27 176
拥抱JsUnit 以往在测试js的时候，都是以alert方式来检测错误，很不专业，今天发现竟然有jsunit这个测试工具，感觉非常不错。 废话不说了，是骡子是马拉出来溜溜再说。 1 简单入门实例 首先我们定义我们的函数 这里以最简单的加减乘除四个方法来进行测试 建立我们的js文件myjs.js [code="js"] function add(num1,num2){ ret...
JsUnit测试JS
清风抚白杨
11-17 6666
为什么要用JsUnit，因为项目不是WEB项目，JS代码无法用网页测试，同样无法通过alert测试，所以采用JsUnit来测试编写的JS代码。 准备工作：下载JsUnit相关资源：www.jsunit.net 解压后如下图： JsUnit的核心文件（jsUnitCore.js、jsUnitTestManager.js等 ）都在app文件夹中，testRunner.html是
jsunit
张议的博客
02-06 454
文章目录 javaScript 单元测试（jsUnit）：http://www.jsunit.net/ JavaScript 编码规范：通常在 JavaScript 不希望外界访问的成员和方法名以下划线开始。 jsUnit 测试函数的要遵循的规则与 JUnit 3.8 类似（比如说测试函数名以 test 开头等） 一定要记住testRunner.html一定要用IE浏览器打开，并且要在本地打开不...
jsunit_使用JsUnit和JSMock进行JavaScript测试驱动的开发
cunfu6353的博客
07-09 237
jsunit 本文是编写可维护JavaScript的速成班。 我们将通过遵循以下简单原则，在正在运行的示例中添加功能：编写单元测试，使其通过。 每个测试将充当质量反馈回路，为想要更改生产代码的任何人创建安全网和可执行的文档形式。 通过以简单的失败测试开始每个功能，我们确保测试所有功能。 我们避免了为以后进行测试而重写代码的成本。 考虑到JavaScript开发人员有很多东西可以缠住他们，这一点特...
JSUnit Javascript单元测试
05-23
JSUnit是专为JavaScript设计的一个单元测试框架，它使得JavaScript应用程序的测试变得更加系统化和自动化。下面将详细介绍JSUnit以及其在JavaScript单元测试中的应用。 首先，让我们理解什么是单元测试。单元测试是...
JsUnit入门
rainyspring4540的专栏
02-09 1379
感谢 http://blog.csdn.net/sdyy321/article/details/6981912 http://blog.csdn.net/sdtsfhh/article/details/1640279 和官网demo：https://github.com/pivotal/jsunit/blob/master/testRunner.html 下载后的目录 入门看
JSUnit单元测试
06-21
前台单元测试材料，适合初学者对前台测试的了解和学习。
JsUnit使用说明书(内含使用心得)
01-16
单元测试工具JSUNIT，用于测试javascript,内含安装方法、使用说明、功能介绍以及个人心得等，较全面。
JsUnit单元测试框架
12-16
用于js代码的单元测试，类似于java中的JUnit单元测试框架，十分好使！
分析JsUnit
java电商源码分享
08-04 162
2001年初，Edward Hieatt开始“移植”JUnit，目的是在浏览器中测试JavaScript。从那以后，JsUnit的下载次数已近10 000次，大约300人加入了JsUnit的新闻组。JsUnit支持一般的xUnit功能，完全用JavaScript编写，如果你习惯使用JUnit 或者类似的xUnit框架，就会发现JsUnit使用起来相当简单直观。 　　JsUnit也有一些不同的...
jsUnit测试框架
yjsuge的专栏
06-11 957
jsUnit测试函数的要遵循的规则与JUnit 3.8类似（比如说测试函数名以test开头等）对于JsUnit来说，其setUp和tearDown方法与JUnit的运行原理是不同的，JUnit中的setUp和tearDown之间是没有关系的，也就是说不同的测试方法运行在不同的测试对象之中，而JsUnit的各个测试函数是运行在同一个测试页面中。因此setUp和tearDown会针对同一个变量进行操作
JsUnit工具应用
wangqiuchen_Study的专栏
05-15 451
为什么要用JsUnit，因为项目不是WEB项目，JS代码无法用网页测试，同样无法通过alert测试，所以采用JsUnit来测试编写的JS代码。 准备工作：下载JsUnit相关资源：www.jsunit.net 解压后如下图：JsUnit的核心文件（jsUnitCore.js、jsUnitTestManager.js等 ）都在app文件夹中，testRunner.html是用来JS测试图形化页面，你不
JsUnit详解——《ajax基础》笔记（一）
junJZ_2008的专栏
10-20 189
JsUnit与JUnit对比 JsUnit也有setUp()与tearDown()，不过现在作为函数，而不是方法；测试函数（而不是测试方法）分成多个测试页（而不是测试类）；另外JsUnit提供了自己的基于HTML的测试运行工具。   JUnit JsUnit Test 类扩展 TestCase 测试页包含 jsU...
JsUnit详解——《ajax基础》笔记（二）
junJZ_2008的专栏
10-20 201
使用标准/定制查询串 如此说来，测试运行工具是很强大的，但是每天都得打开这个测试运行工具，并浏览你的测试页或测试集，这可能非常烦人。好在可以使用一些查询串来预置要运行的文件，让测试运行工具自动地运行测试，甚至可以向测试传递参数 ！测试运行工具支持testPage 查询串 。在浏览器地址栏中键入以下地址（当然，根据具体环境可能要做相应调整），就会在浏览器中启动测试运行工具，并且预置了给定的测试： ...
Jasmine：全能JavaScript单元测试框架
Jasmine是一个由Pivotal Labs开发的JavaScript测试框架，起源于JsUnit，后者是JUnit的JavaScript版本。由于JsUnit的维护停滞，Jasmine应运而生，它是一个独立的框架，适用于各种JavaScript环境，不受特定框架限制。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值