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. Mfs+drbd+keepalived实现mfs系统高可用

    http://blog.sina.com.cn/s/blog_53c654720102wo1k.html Moosefs分布式文件系统是一个易用的系统,但其只有在Pro版中提供了master的高可用方 ...

  2. 动态爬虫——selenium2搭载phantomjs入门范例

    这是我学习爬虫比较深入的一步了,大部分的网页抓取用urllib2都可以搞定,但是涉及到JavaScript的时候,urlopen就完全傻逼了,所以不得不用模拟浏览器,方法也有很多,此处我采用的是sel ...

  3. java 装饰设计模式模式

    对已有功能进行增强 示例 已有的类    调用 增强后的类 调用  思考? 为什么要这么做呢? SuperPerson 继承 Person 可以达到同样的效果. 继承的写法,其中MyBuffer... ...

  4. thinkphp.2 thinkphp5微信支付 微信公众号支付 thinkphp 微信扫码支付 thinkphp 微信企业付款5

    前面已经跑通了微信支付的流程,接下来吧微信支付和微信企业付款接入到thinkphp中,版本是3.2 把微信支付类.企业付款类整合到一起放到第三方类库,这里我把微信支付帮助类和企业付款类放到同一个文件了 ...

  5. mui plus.uploader.createUpload 上传文件服务端获取文件名中文乱码问题

    客户端上传文件需要做一次url编码:encodeURIComponent(fileName) 服务端:URL解码 var fileName = HttpUtility.UrlDecode(hfc.Fi ...

  6. 智能跳转---TC资源管理器

    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;作者:天甜:QQ: ;一花一世界,一叶一枯荣,心无挂碍,无挂碍故 ...

  7. 【Hibernate学习笔记-5.1】使用@Transient修饰不想持久保存的属性

     作者:ssslinppp       1. 摘要 在默认情况下,持久化类的所有属性会自动映射到数据表的数据列.如果在实际应用中不想持久化保存某些属性,则可以考虑使用@Transient来修饰他们. ...

  8. Javascript作用域学习笔记（三）

    看完<你不知道的javascript>上,对作用域的新的理解(2018-9-25更) 一.学习笔记:   1.javascript中的作用域和作用域链 +  每个函数在被调用时都会创建一个 ...

  9. css transition transform animation例子讲解

    1.transition属性: transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timin ...

  10. request响应码记录

    响应 -- r.status_code                     #响应状态码 -- r.content                             #会自动为你解码 字节方 ...