`
xiaomiya
  • 浏览: 131861 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

js单元测试

阅读更多

javascript单元测试有不少工具,我们今天主要介绍下QUnit。

QUnit是jQuery团队开发的js单元测试工具,使用方便,界面美观。近期试用了一下并进一步了解了JavaScript单元测试,记录一下所思所得。

1,什么是单元测试

2,为什么js需要单元测试

3,怎么使用Qunit来进行单元测试

4,测试示例

好的:

1,什么是单元测试:单元测试又称为模块测试,是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。单元测试主要是用来检验程式的内部逻辑,也称为个体测试、结构测试或逻辑驱动测试。通常由撰写程式码的程式设计师负责进行

我们可以维基百科。

2,为什么js需要单元测试:由于存在浏览器解析环境、用户操作习惯等差异,前端程序的许多问题是无法捕捉或重现的,现在前端程序的测试多是黑盒测试,即靠点击点击点击来寻找程序bug。这种方式既费时费力,又无法保证测试的覆盖面。

同时,前端逻辑和交互越来越复杂,和其他编程语言一样,一个函数,一个模块,在修改bug或添加新功能的过程中,很容易就产生新的bug,或使老的bug复活。这种情况下,反复进行黑盒测试,其工作量和测试质量是可想而知的。

此外,浏览器兼容性测试是前端程序测试的重要一环,在多个浏览器之间测试前端程序,上面说的工作量就会成n倍的增加。

为什么我们的前端程序如此脆弱?就是因为没用单元测试。。

假如使用了单元测试,上边的问题就变得很容易了,当然前提是你要花时间去研究和编写测试用例。

根据函数或模块的源代码,编写出包含各种情况的测试用例,每次解决bug或添加新功能,都随时更新这个用例然后进行测试,很容易就找出新bug和“复活”的老bug。

测试兼容性,只需要在不同的浏览器中分别运行这个测试,问题就一目了然了。

也许白盒比黑盒要多费几倍的脑子,但想想我们那脆弱的程序,想想那些随时冒出来的烦人的老bug,费点脑子,值了!

3,怎么使用Qunit来进行单元测试:

建立一个测试页面,引入 qunit.js 和 qunit.css 这两个必需的文件,这两个文件是存放在github上的,鉴于目前操蛋的互联网环境,最好下载到本地调用。

注:body中的元素id命名必须依照如下形式,否则无法正常显示。

 

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" type="text/css" media="screen" />
  <script type="text/javascript" src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
</head>
<body>
  <h1 id="qunit-header">QUnit example</h1>
  <h2 id="qunit-banner"></h2>
  <h2 id="qunit-userAgent"></h2>
  <ol id="qunit-tests"></ol>
</body>
</html>

 

 

4,测试示例

下面是一个最简单的函数测试用例,解释请见程序注释。

 

//定义测试模块
module( "测试示例" );
//定义一个简单的函数,判断参数是不是数字
function simpleTest(para) {
  if(typeof para == "number") {
    return true;
  }
  else{
    return false;
  }
}
//开始单元测试
test('simpleTest()', function() {
  //列举各种可能的情况,注意使用 ! 保证表达式符合应该的逻辑
  ok(simpleTest(2), '2是一个数字');
  ok(!simpleTest("2"), '"2"不是一个数字');
});

 module( name, [lifecycle] ) 函数指定测试模块和周期。

 

ok( state, [message] ) 是QUnit中最常用的一个判断函数,只能判断true和false。

DEMO在这里,看一下测试结果:

 

 

结果都是绿的,说明两条测试语句都符合设定的规则。可以尝试修改下规则

 

//...
ok(simpleTest("2"), '"2"是一个数字');
//...

 就可以看到爆红了。。

 

 

更多测试判断

除了ok()之外,QUnit还有如下几个判断函数:

相等判断equals( actual, expected, [message] )

示例:

 

//定义一个简单的函数,返回数字和2的乘积
  function simpleTest1(para) {
    return para * 2;
  }
  //开始单元测试
  test('simpleTest1()', function() {
    //列举各种可能的情况
    equals(simpleTest1(2), 4, '2 * 2 等于 4');
    equals(simpleTest(2), 3, '2 * 2 等于 3');
  });

 

 

相同判断(包含数组、对象等)same( actual, expected, [message] )

示例:
//定义一个简单的函数,返回一个数组
  function simpleTest2() {
    return [1, 2];
  }
  //开始单元测试
  test('simpleTest2()', function() {
    //列举各种可能的情况
    equals(simpleTest2(), [1, 2], '函数返回数组[1, 2]');
    equals(simpleTest2(), [1, 1], '函数返回数组[1, 1]');
  });

 same()和意思和equals()差不多,但same()可以判断数组、对象等的相同,而equals不能。

异步与Ajax

对于异步程序的测试,如setTimeout、setInterval、Ajax等情况,按照上面的方法,在异步调用执行之前,测试就已完成并输出了结果。这时,配合使用QUnit提供的两个函数:stop( [timeout] ) 和 start(),也可以轻松搞定。

直接看例子:

//异步测试
module( "异步测试示例" );
//setTimeout
test('asynchronous test', function() {
  // 暂停测试
  stop();
 
  setTimeout(function() {
    ok(true, '完成运行');
    //待测试完成后,恢复
    start();
  }, 100)
})
//另一种形式
asyncTest('asynchronous test', function() {
  setTimeout(function() {
    ok(true);
    //待测试完成后,恢复
    start();
  }, 100)
})

 Ajax也是类似的道理:

//Ajax测试
function ajax(successCallback) {
  $.ajax({
    url: 'server.php',
    success: successCallback
  });
}
 
test('asynchronous test', function() {
  // 暂停测试
  stop();
 
  ajax(function() {
    // 异步调用判断
  })
 
  setTimeout(function() {
    //异步测试完成后,恢复
    start();
  }, 2000);
})

 

了解更多

分享到:
评论

相关推荐

    jasmine-JavaScript单元测试工具

    **jasmine - JavaScript 单元测试工具** jasmine是一个广泛使用的开源工具,专门设计用于JavaScript的单元测试。这个框架提供了一套完整的测试环境,使得开发者能够有效地验证他们的JavaScript代码是否按照预期工作...

    JavaScript单元测试工具安装说明书

    JavaScript单元测试工具JS Test Driver是一种高效且方便的测试框架,它允许开发者在无需打开浏览器的情况下进行JavaScript代码的单元测试,类似于Java的单元测试方式。这一工具显著提升了开发效率,减少了对浏览器...

    JSUnit Javascript单元测试

    JavaScript单元测试是软件开发过程中的一个关键环节,它允许开发者对代码的各个独立部分进行验证,确保它们在预期情况下能够正确工作。JSUnit是专为JavaScript设计的一个单元测试框架,它使得JavaScript应用程序的...

    Mocha是一个JS单元测试工具

    Mocha 是一个流行的JavaScript单元测试框架,它为开发者提供了丰富的功能来编写和执行测试用例。在JavaScript开发中,单元测试是确保代码质量、可维护性和稳定性的关键环节。Mocha 的设计允许开发者以灵活的方式组织...

    javascript单元测试 jsunit2.2

    JavaScript 单元测试是软件开发过程中不可或缺的一部分,它主要用于确保代码的各个独立模块按预期工作。jsUnit 是一个专门用于 JavaScript 的单元测试框架,版本 2.2 提供了更稳定和强大的测试支持。在本篇文章中,...

    多浏览器的单元测试工具 多浏览器集成的JavaScript单元测试工县 共28页.pdf

    **多浏览器的JavaScript单元测试工具概述** 在软件开发过程中,单元测试是确保代码质量的关键步骤。对于JavaScript,由于其在不同浏览器中可能存在兼容性问题,因此进行多浏览器的单元测试显得尤为重要。本文将探讨...

    js单元测试覆盖率统计工具

    JavaScript单元测试覆盖率统计工具 JavaScript 单元测试覆盖率统计工具是指使用JavaScript Coverage 工具来检测 JavaScript 代码的单元测试覆盖率。该工具可以完整统计JavaScript 代码的覆盖率,让开发者简单方便...

    JavaScript单元测试Jasmine源代码

    JavaScript单元测试是软件开发过程中的重要环节,它用于验证代码的各个独立部分(即单元)是否按预期工作。Jasmine是一款流行的JavaScript测试框架,尤其适用于前端开发者,它提供了丰富的断言库和易于理解的语法,...

    Javascript单元测试框架QUnitjs具体介绍_.docx

    QUnit 是一个强大的 JavaScript 单元测试框架,主要用于测试 JavaScript 代码的质量和功能。它由 jQuery 项目开发团队创建,因此对于 jQuery 生态系统来说,它是理想的测试工具,但同时也适用于任何其他 JavaScript ...

    JavaScript单元测试工具Venus.zip

    Venus 是一个 JavaScript (JS)的测试工具,可以简化运行单元测试。当你在 JS 开发一个基于浏览器的项目时,你想创建单元测试并频繁地运行它们。通常,你会用一些库比如 Mocha 或 Jasmine,写一个单元测试,这些库...

    qunit 1.5 js 单元测试

    QUnit 是一个强大的JavaScript单元测试框架,主要用于测试jQuery、jQuery UI、jQuery Mobile等JavaScript库以及任何其他基于JavaScript的代码。QUnit 1.5 版本是该框架的一个早期版本,尽管现在已经有更新的版本发布...

    测试他们的脚本!一个让Javascript单元测试变得有趣的测试运行器。___下载.zip

    JavaScript单元测试是软件开发过程中的重要环节,它确保代码片段按照预期工作,提高了代码质量和可维护性。Testem是一款流行的JavaScript测试运行器,专为使这个过程更有趣、更高效而设计。它支持多种测试框架,如...

    Atom-js-test-gen-atom,生成js单元测试的atom插件。为js做贡献.zip

    这款插件的主要功能是自动生成JavaScript单元测试代码,从而简化开发流程,提高编码效率。通过自动创建测试模板,开发者可以快速为源代码编写对应的测试用例,确保代码的质量和稳定性。 Atom编辑器是一款由GitHub...

    JS单元测试工具(Qunit) v1.6.0-1 官方最新版.rar

    如果没有一款合适的单元测试工具保证前端单元模块的正确功能,对后期的代码调试和维护会造成很大的麻烦,今天就介绍一款单元测试框架 — Qunit Qunit刚开始属于jQuery项目,专门用于测试jQuery单元模块。现在已经从...

    JSUnit单元测试

    **JSUnit**是JavaScript单元测试框架的一个实现,它是JUnit的JavaScript版本。JSUnit的主要作用是帮助开发者编写和执行前端JavaScript代码的单元测试,确保代码的正确性和稳定性。通过JSUnit进行测试可以有效地提升...

    JS和JQ的单元测试例子、工具

    QUnit是jQuery项目团队开发的一个强大的JavaScript单元测试框架,适用于JS和JQ的单元测试。 QUnit提供了丰富的断言库,帮助测试人员检查代码的输出是否正确。这些断言包括`equal`、`notEqual`、`strictEqual`、`...

    QUnit单元测试Demo

    QUnit是一款由jQuery项目团队开发的强大、易用的JavaScript单元测试框架。它专为浏览器环境设计,适用于测试任何JavaScript代码,无论是在浏览器原生环境中,还是在基于jQuery或其他库的项目中。QUnit提供了一套全面...

    JavaScript Unit Testing 单元测试 PDF

    本书《JavaScript单元测试》由Packt Publishing出版社出版,是Hazem Saleh所著,首次出版于2013年1月。全书共190页,涵盖了使用Jasmine、YUITest、QUnit和JsTestDriver等流行的JavaScript单元测试框架的实践指南。...

    单元测试js框架

    前端测试框架phantomjs,用来结合nodejs+grunt配置使用

Global site tag (gtag.js) - Google Analytics