zoukankan      html  css  js  c++  java
  • 使用QUnit进行自动化单元测试

    前言

    前阵子由于项目需求接触了java的单元测试JUnit,就顺带着学习了前端的单元测试:Qunit。

    既然跟测试有关,不妨介绍一下测试中的黑盒测试、白盒测试以及单元测试。

    1、黑盒测试:所谓的黑盒,就是把程序看做一个不能打开的黑盒子,不需要了解程序内部结构和特性,从用户的角度出发,主要针对软件界面以及软件功能进行测试,通过多次的测试,无穷多数的测试情况,检车出程序中的错误。黑盒测试也叫功能测试,它是通过测试来检测每个功能是否都能正常使用。

    2、白盒测试:相对于黑盒的看不见,白表示看得见即透明的意思。白盒表示你清楚盒子内部的东西以及里面是如何运作的。这种方法是把测试对象看做一个打开的盒子,允许测试人员利用程序内部的逻辑结构及有关信息,设计或选择测试用例,对程序所有逻辑路径进行测试。通过在不同点检查程序状态,确定实际状态是否与预期的状态一样。因此白盒测试也称为结构测试或逻辑驱动测试。

    举个简单的例子:

    比如你有一部使用已久的搅拌机(就好比使用多年的代码程序),你想要清洗你的搅拌机(维护,测试有问题模块),你可以从上到下,从里到外,在不拆开搅拌机的前提下,用水冲洗你的搅拌机(这就好比黑盒测试)。你也可以用螺丝刀,把你的搅拌机拆开,一个部位一个部位地清洗(这就好比白盒测试)。

    3、那么,什么是单元测试呢?

    单元就是相对独立的功能模块。在计算机编程中,单元测试(又称为模块测试)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类(超类)、抽象类、或者派生类(子类)中的方法。单元测试也算是白盒测试中的一种。

    4、好了,讲了这么多题外话,是该回归正题了,讲讲QUnit。

    QUnit是jQuery团队开发的JavaScript单元测试工具,功能强大且使用简单。目前所有的JQuery代码都使用QUnit进行测试,原生的JavaScript也可以使用QUnit。最初,John Resig将QUnit设计为jQuery的一部分。2008年,QUnit才有了自己的名字、主页和API文档,也开始允许其他人用它来做单元测试。但当时QUnit还是基于jQuery的。直到2009年,QUnit才可以完全的独立运行。

    Qunit的官网:http://qunitjs.com/(如果打不开,尝试翻.墙)

    正文

     万事从头起,首先使用qunit写一个非常简单的例子,感受一下qunit的使用方法:

    只需要加载qunit.css和qunit.js就可以了,这里我已经下载好了,喜欢使用CDN的话也可以使用官方提供的CDN:

    https://code.jquery.com/qunit/qunit-2.0.1.js

    https://code.jquery.com/qunit/qunit-2.0.1.css

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/qunit-2.0.1.css">
        <script src="js/qunit-2.0.1.js"></script>
        <title>qunit</title>
    </head>
    <body>
        <div id="qunit"></div>
        <script>
            QUnit.test( "hello test", function( assert ) {
                assert.ok( true, "Passed!" );
                assert.ok( 1 == "2", "错了兄弟" );
                assert.ok( 2 == "2", "Passed!" );
                assert.ok( 2 == "3", "啊哦" );
            });
        </script>
    </body>
    </html>

     运行上述代码后,可以看到一下的页面

    这是个很简单的例子。定义了文档类型,包含了QUnit需要的CSS以及JS,定义了一个Script元素,script中的代码为Qunit的测试代码,id为qunit的div是qunit输出的页面,上面有测试结果。test函数定义了一个“hello test”的测试,一旦页面载入完毕,QUnit就会运行test()。传给test()的第二个参数为函数,这才是测试的本身,这里用到的是OK方法,可以看出,ok函数接受了2个参数,第一个参数表示判断,接受一个布尔值或者有判断结果的值(反正是通过或者不通过),第二个参数是输出的信息。如上图。

    (本来想要写更详细点,有点事走开了,下次有时间补充,就当是抛砖引玉,有兴趣的读者可以继续研究js的单元测试)

  • 相关阅读:
    读后感之—寒门学子重要选择-程序员
    架构中的分而治之
    如何从码农进化到项目管理者
    饿了么架构
    简单理解支付宝和蚂蚁花呗的架构
    架构小谈之美团外卖
    漫谈架构总结之1500
    平台基本信息项目目标文档
    第六学期每周总结-第三周
    质量管理之可用性战术分析
  • 原文地址:https://www.cnblogs.com/wuzhiquan/p/5978296.html
Copyright © 2011-2022 走看看