JavaScript测试调研

前言

与其他语言相似，JavaScript的测试也会包括代码审查、单元测试等内容。本文就JavaScript的测试调研了一些测试工具和测试框架。

相对于其他很多高级语言语言相比，JavaScript的单元测试可能相对来言麻烦点。当然就单元测试来讲，JavaScript单元测试也需要依赖于一些小的测试框架和测试组件来帮助我们完成真正的测试用例。

1        JsUnit

1.1     简介

JsUnit是JavaScript的开源单元测试框架。它受到JUnit的启发，并完全用JavaScript编写。这是以前流行的一个JavaScript的单元测试工具，可以和Maven以及Ant结合来完成一些持续集成的工作。

1.2     使用步骤初探

（1）       下载JsUnit，然后解压文件。下载地址：http://sourceforge.net/projects/jsunit/?source=navbar

（2）       使用浏览器打开解压目录下的testRunner.html文件。

（3）       准备测试用例，可以直接使用下载目录中的tests文件夹中的一个测试用例的page来做试验。

（4）       运行测试用例，将测试套件或者测试文件路径填入输入框中。点击运行即可，运行完后我们可以看到运行后的结果。

1.3     JsUnit测试用例的编写示例

（1）       一个简单的测试用例的编写

<html>

<title>A unit test for drw.SystemUnderTest class</title>

<head>

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

<link rel="stylesheet" type="text/css" href="../css/jsUnitStyle.css">

<script type='text/javascript' src='../app/system_under_test.js'></script>

<script type='text/javascript'>

function setUp(){

// perform fixture set up

}

function tearDown() {

// clean up

}

function testOneThing(){

// instantiating a SystemUnderTest, a class in the drw namespace

var sut = new drw.SystemUnderTest();

var thing = sut.oneThing();

assertEquals(1, thing);

}

function testAnotherThing(){

var sut = new drw.SystemUnderTest();

var thing = sut.anotherThing();

assertNotEquals(1, thing);

}

</script>

</head>

<body/>

</html>

以上为测试用例的编写的一个示例，我们可以上面就是一个html的文件。我们需要在html文件的head中引入jsUnitCore.js以及jsUnitStyle.css两个文件，个文件一个JsUnit的核心框架。还需要加入我们的需要测试的js脚本文件system_under_test.js。

后面可以看到有和junit相同的setup以及teardown，这里的两个函数是测试用例的准备和最后的处理，在每个测试用例之前和之后执行。

testOneThing()以及testAnotherThing()这两个函数就是测试用例，里面完成需要测试的内容。

与Junit相同，在JsUnit中也定义了很多的断言函数。形如assert**的函数都是其断言函数，我们使用这些函数来判定结果是与预期相同。

（2）       JsUnit测试集编写

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>JsUnit Test Suite</title>

<link rel="stylesheet" type="text/css" href="../css/jsUnitStyle.css">

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

<script type="text/javascript">

function coreSuite() {

var result = new JsUnitTestSuite();

result.addTestPage("tests/jsUnitAssertionTests.html");

result.addTestPage("tests/jsUnitFrameworkUtilityTests.html");

result.addTestPage("tests/jsUnitOnLoadTests.html");

result.addTestPage("tests/jsUnitRestoredHTMLDivTests.html");

result.addTestPage("tests/jsUnitSetUpTearDownTests.html");

result.addTestPage("tests/jsUnitTestManagerTests.html");

result.addTestPage("tests/jsUnitParamsTests.html");

result.addTestPage("tests/jsUnitTestSetUpPages.html");

result.addTestPage("tests/jsUnitTestSuiteTests.html");

result.addTestPage("tests/jsUnitUtilityTests.html");

result.addTestPage("tests/TestPageTest.html");

result.addTestPage("tests/UiManagerTest.html");

return result;

}

function librariesSuite() {

var result = new JsUnitTestSuite();

result.addTestPage("tests/jsUnitMockTimeoutTest.html");

result.addTestPage("tests/jsUnitAjaxTest.html");

return result;

}

function suite() {

var newsuite = new JsUnitTestSuite();

newsuite.addTestSuite(coreSuite());

newsuite.addTestSuite(librariesSuite());

return newsuite;

}

</script>

</head>

<body>

<p>This page contains a suite of tests for testing JsUnit.</p>

</body>

</html>

以上的代码就是测试集的编写，测试集和Junit的概念一致。为了定义一个测试集，需要创建一个名为suite的函数，它会返回一个JsUnitTestSuite的对象。然后通过增加测试用例页面或者其他测试集对象来建立JsUnitTestSuite对象。在上面的例子中最终coreSuite和librariesSuite两个函数返回的JsUnitTestSuite对象在suite函数中加入到了一个JsUnitTestSuite对象中，然后返回该对象。

2        Jasmine

2.1     简介

Jasmine 是一款行为驱动的JavaScript 测试框架，它不依赖于其他任何 JavaScript 框架。它有干净清晰的语法，让您可以很简单的写出测试代码。对基于 JavaScript 的开发来说，它是一款不错的测试框架选择。

2.2     使用步骤初探

（1）       下载Jasmine

下载地址：https://github.com/pivotal/jasmine/releases

Introduction：http://jasmine.github.io/2.0/introduction.html

（2）       目录解析

解压下载下来的zip文件，点开文件夹。看到有如下的目录，其中lib为Jasmine 的源代码。src为一个示例中被测的js文件，spec为编写的测试用例代码，SpecRunner.html为加入

（3）       运行测试用例

解压文件后可以看到有一个文件叫做：SpecRunner.html，点击使用浏览器打开就能够运行相关的测试用例了。

在浏览器中打开运行完后我们可以看到一个结果页面，页面会展示运行的结果信息。

2.3     测试用例编写

（1）       创建一个JS文件，这个文件测试文件

（2）       一个简单的测试用例

describe("when song has been paused", function() {

beforeEach(function() {

player.play(song);

player.pause();

});

it("should indicate that the song is currently paused", function() {

expect(player.isPlaying).toBeFalsy();

// demonstrates use of 'not' with a custom matcher

expect(player).not.toBePlaying(song);

});

it("should be possible to resume", function() {

player.resume();

expect(player.isPlaying).toBeTruthy();

expect(player.currentlyPlayingSong).toEqual(song);

});

});

describe 是 Jasmine 的全局函数，作为一个 Test Suite的开始，它通常有 2 个参数：字符串和方法。字符串作为特定 Suite 的名字和标题。方法是包含实现 测试用例集的代码。

Specs通过调用it的全局函数来定义。和describe类似，it也是有2个参数，字符串和方法。每个Spec包含一个或多个expectations来测试需要测试代码。每个it就是一个测试用例。

Jasmine 中的每个expectation是一个断言，可以是true或者false。当每个Spec中的所有expectations都是 true，则通过测试。有任何一个expectation是false，则未通过测试。而方法的内容就是测试主体。

（3）       能运行的测试HTML

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Jasmine Spec Runner v2.0.1</title>

<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.1/jasmine_favicon.png">

<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.1/jasmine.css">

<script type="text/javascript" src="lib/jasmine-2.0.1/jasmine.js"></script>

<script type="text/javascript" src="lib/jasmine-2.0.1/jasmine-html.js"></script>

<script type="text/javascript" src="lib/jasmine-2.0.1/boot.js"></script>

<!-- include source files here... -->

<script type="text/javascript" src="src/Player.js"></script>

<script type="text/javascript" src="src/Song.js"></script>

<!-- include spec files here... -->

<script type="text/javascript" src="spec/SpecHelper.js"></script>

<script type="text/javascript" src="spec/PlayerSpec.js"></script>

</head>

<body>

</body>

</html>

有了上面的文件，直接点开就可以运行了，在2.2节有。

上面文件中红色的字体为加入的测试环境为jasmine框架需要加入的js代码、CSS文件以及一些生成报告的资源文件。紫色字体为引入被测的JS代码的路径。绿色字体为加入测试的JS代码的路径。

2.4     运行

3        JSLint

3.1     简介

JSLint是一款 JavaScript语法检查和验证工具，可以扫描JavaScript源代码来查找问题。JSLint不是一款开源的软件，它使用纯JavaScript编写。JSLint定义了一个专业的语法规则和建议的集合。

如果JSLint发现一个问题，JSLint就会显示描述这个问题的消息，并指出错误在源代码中的大致位置。有些编码风格约定可能导致未预见的行为或错误，JSLint除了能指出这些不合理的约定，还能标志出结构方面的问题。尽管JSLint不能保证逻辑一定正确，但确实有助于发现错误，这些错误很可能导致浏览器的 JavaScript引擎抛出错误。

JSLint 执行代码质量检测的原理核心在于用户设定的规则集。JSLint 默认提供的规则集包含了 Web 开发人员多年积累下来的认为不好的开发风格，我们可以根据自己项目的需求选择构建一套特定的规则。JSLint 将根据它进行对 JavaScript 脚本的扫描工作，并给出相应的问题描述信息。

3.2     JSLint用法初探

（1）              直接使用http://www.jslint.com/网址进行检测。在输入框中你的JavaScript脚本。然后点击JSLint按钮，我们就可以看到了JSLint说到的我们的错误之处。

这个页面还提供一些其他的规则，如果你不选择这些规则，则按照JSLint的默认的规则进行

4        Qunit

4.1     简介

Qunit是一款由Jquery团队开发的JavaScript单元测试框架。它原本是Jquery团队为自己的框架开发的一套测试框架，它可以被用于jQuery、jQuery UI、jQuery移动项目以及其他更广义的JavaScript代码，包括Qunit自身。

4.2     使用步骤初探

（1）       下载框架

需要下载的内容有两个：qunit-1.15.0.js和qunit-1.15.0.css两个文件，分别为Qunit的单元测试框架JS代码以及生成报告所需的CSS结构。

下载地址：http://qunitjs.com/

（2）       Qunit可运行的HTML环境配置

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>QUnit basic example</title>

<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">

</head>

<body>

<div id="qunit"></div>

<div id="qunit-fixture"></div>

<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>

<script>

QUnit.test( "a basic test example", function( assert ) {

var value = "hello";

assert.equal( value, "hello", "We expect value to be hello" );

});

</script>

</body>

</html>

上面就是一个简单的用例，直接点击这个HTML文件在浏览器中打开就可以运行响应的代码，其中红色的字就是QUnit框架，绿色字体的为一条测试用例。当然测试用例也可以单独的写在一个文件中，然后引入到页面上面即可。

（3）       Qunit可运行的HTML环境配置

点击这个HTML文件后生成的结果如下：

看一下这个结果，在HTML中的head元素的title中定义了这个测试的标题。标题下面是对于结果的筛选。

Hide passed tests：这个选项勾选后会将通过的测试用例隐藏起来，这个对于运行比较多的测试用例来讲非常有用。

Check for Globals:如果不小心引入了一些全局变量修改，会将这个测试标识为failed，这里可以看到一些全局变量的列表是否有变化。

No try-catch：就是如果用例抛出了一个异常，那么就会停止给出抛出异常的地方。

下面就是一个测试用例的概述，里面包括测试用例运行的时间、断言的成功失败数。注意这里的概述部分里面的数字是说断言的数量而不是测试用例的数量。但是可能一个测试用例包含好几个断言。

4.3     测试用例编写

（1）       测试用例编写例子

<div id="qunit-fixture"></div>

<script src="//code.jquery.com/qunit/qunit-1.15.0.js"></script>

<script>

QUnit.test( "a basic test example", function( assert ) {

var value = "hello";

assert.equal( value, "hello", "We expect value to be hello" );

});

</script>

如果要得到一个比较好看的结果，需要将测试用例包含在一个id为qunit-fixture的div中，因为在这个标记中每运行一个用例都会重置里面的元素，以保证测试的独立性。如果你在其他的标记下面修改和删除了某些元素，那么将会导致测试的非独立性。

每个测试用例都以QUnit.test(String,fuction(assert){});这样的形式编写的，一个测试用例包括两个参数第一个是这个测试的名字，第二个参数是实际的测试用例方法。

（2）       QUnit断言

QUnit共提供了8个断言，常用的断言有：

a)         ok(truthy[,message]): assert.ok( true, "true succeeds" );

b)         equal(actual,expected[,message]): assert.equal( 0, 0, "Zero, Zero; equal succeeds" );

c)         deepEqual( actual, expected [, message ] ):

var obj = { foo: "bar" };

assert.deepEqual( obj, { foo: "bar" }, "Two objects can be the same in value" )

这个和equal不同点在于b)用的是”==”来判定actual和expected，而这个用的是”===”

（3）       异步请求测试

现在的页面都是大量的使用了AJAX的方式来实现，当一个测试用例遇到了中断、异步调用等等时，它不会异步请求返回结果，而是直接执行测试的后面的部分。在QUnit中，使用asynTest方法配合使用expect方法以及QUnit.start()方法可以来实现异步调用的测试。当阻塞返回了，能够恢复运行。

QUnit.asyncTest( "asynchronous test: video ready to play", function( assert ) {

expect( 1 );

var $video = $( "video" );

$video.on( "canplaythrough", function() {

assert.ok( true, "video has loaded and is ready to play" );

QUnit.start();

});

});

（4）       测试用户的行为

在javascript，有一些函数不能够只通过调用方法就能够测试，有一些匿名方法不能直接调用，而是通常与事件进行绑定的。在JQuery中有一些trigger()的方法能够帮助我们来模拟事件从而进行测试。

（5）       测试集

你可以使用QUnit.module()方法来将你的测试用例分组。

JavaScipt测试调研的更多相关文章

  1. 【转载】Android app 安全测试调研及执行

    本文来源于:http://testerhome.com/topics/2209 一.通过在线工具进行测试 1.腾讯金刚审计系统http://service.security.tencent.com 优 ...

  2. 你可能把A/B测试做错了

    大卫奥格威说过,"永远不要停止试验,你的广告也就永远不会停止改进". 在当今的网络世界中,类似于吆喝科技 AppAdhoc A/B Testing 这样的工具越来越多,AB测试和转 ...

  3. 大数据测试之ETL测试工具和面试常见的问题及答案

    转载自: http://www.51testing.com/html/87/n-3722487.html 概述 商业信息和数据对于任何一个企业而言都是至关重要的.现在很多公司都投入了大量的人力.资金和 ...

  4. MongoDB硬件及开发标准规范

    大数据平台部 运维研发组 MongoDB硬件及开发标准规范             说明:   无特殊情况,均以此文档为参考文件搭建,如有特殊情况,需与运维研发组和开发组商议后进行更改. MongoD ...

  5. 性能测试——记XX银行保全项目性能问题分析优化

    记XX银行保全项目性能问题分析优化 数据库问题也许是大部分性能问题的关注点,但是JAVA应用与数据库交互的关节,JDBC 就像是我们人体的上半身跟下半身的腰椎,支持上半身,协调下半身运动的重要支撑点. ...

  6. [Gamma]Scrum Meeting#5

    github 本次会议项目由PM召开,时间为5月30日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译 ...

  7. [Gamma]Scrum Meeting#3

    github 本次会议项目由PM召开,时间为5月28日晚上10点30分 时长10分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译 ...

  8. [Gamma]Scrum Meeting#4

    github 本次会议项目由PM召开,时间为5月29日晚上10点30分 时长10分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译 ...

  9. Hystrix压测

    背景介绍 JSF(京东服务框架,类似dubbo)默认配置了可伸缩的最大到200的工作线程池,每一个向外提供的服务都在其中运行(这里我们是服务端),这些服务内部调用外部依赖时(这里我们是客户端)一般是同 ...

随机推荐

  1. md5，base64，rsa

    MD5功能:    输入任意长度的信息,经过处理,输出为128位的信息(数字指纹):    不同的输入得到的不同的结果(唯一性):    根据128位的输出结果不可能反推出输入的信息(不可逆): 1. ...

  2. POJ1734无向图求最小环

    题目:http://poj.org/problem?id=1734 方法有点像floyd.若与k直接相连的 i 和 j 在不经过k的情况下已经连通,则有环. 注意区分直接连接和间接连接. * 路径记录 ...

  3. cc2530 AES加密

    快速配置 Z-stack对Zigbee2006提供了全面的支持,功能之强大,性能稳定.安全性高,说到安全性是我们今天的主题.CC2430硬件支持128bit的AES加密算法,在协议栈中为了避开相同设备 ...

  4. windows环境下把Python代码打包成独立执行的exe可执行文件

    有时候因为出差,突然急需处理一批数据.虽然写好的脚本存储在云端随用随取,然而编译的环境还需要重新搭建,模块也需要重新装载,从头到尾这么一遍下来,也是要花费可观的时间成本的. 有没有什么办法,可以让.p ...

  5. Oracle 11G 单机asm安装

    http://sugarlovecxq.blog.51cto.com/6707742/1702092/

  6. Eclipse引入jar包的三种方式

    引用自 http://chenxu.wo.blog.163.com/blog/static/50239687201162310620634/ 使用Eclipse开发应用程序,少不了使用第三方jar包, ...

  7. PHP中header的用法总结

    来源 :http://blog.sina.com.cn/s/blog_7298f36f01011dxv.html header的用法 header()函数的作用是:发送一个原始 HTTP 标头[Htt ...

  8. BASIC-19_蓝桥杯_完美的代价

    思路(贪心): 1.两边往中间逼近,步数少; 2.单个字符出现时只考虑移动到中间的步数,不做移动,因为这是最后进行,不影响结果; 示例代码: #include <stdio.h>#defi ...

  9. 【JSP中引入文件】JSP中获取根路径+引用js文件

    在jsp界面中经常需要引入js.css等文件,通常都需要先获取项目根路径,然后再引入文件. 例如: 项目路径如下,需要在index.jsp中引入FusionCharts相关的js.css等: inde ...

  10. Nginx+tomcat+redis实现session共享

    Nginx+tomcat+redis实现session共享 1,安装nginx,使用yum -y install nginx 这是epel源中的,需要安装epel源. 2,配置nginx. 在ngin ...