前端测试(2)--QUnit

1、简介

QUnit是前端单元测试的框架,与java的JUnit相似,首先安装QUnit,有三种方式:

  • 官网下载源文件
  • 引用CDN
  • 使用 bower 安装( bower install --save-dev qunit ) 或 使用npm安装( npm install --save-dev qunitjs )

2、常用代码简介

2.1 开始测试

QUnit.test( name, expected, test ) :一个常规的测试用例。测试用例名、期待断言数、测试内容(一般是一个function)。

QUnit.asyncTest( name, expected, test ) :一个异步测试用例。默认的test都是同步的。内容中必须显示地调用start(),测试才会开始。

QUnit.module( name, lifecycle ) :定义一个名为name的模块。在可选参数lifecycle中,可以定义模块开始和结束的测试内容。具体见文档。

QUnit.init( ) :启动QUnit测试。如果测试在进行中,则会重新启动。基本不用

2.2 QUnit断言方法

assert.ok( state, message ) :真假断言,state为true则通过。类似于JUnit的assertTrue。

assert.equal( actual, expected, message ) :相等断言,actual和expected相等(==)则通过。类似于JUnit的assertEquals。
assert.notEqual( actual, expected, message )不等断言,actual和expected不相等(!=)则通过。类似于JUnit的assertNotEquals。

assert.deepEqual( actual, expected, message )递归相等断言,actual和expected全相等(包括其子元素都相等,适用于基本类型,数组和对象)则通过。对于基本类型,相当于strictEqual,可以通过{key : value}是否相等比较两个对象是否相等。
assert.notDeepEqual( actual, expected, message )递归不相等断言,actual和expected不全相等(包括其子元素都相等,适用于基本类型,数组和对象)则通过。对于基本类型,相当于notStrictEqual。

assert.strictEqual( actual, expected, message )全相等断言,actual和expected全相等(===)则通过。
assert.notStrictEqual( actual, expected, message )不全相等断言,actual和expected不全相等(===)则通过。

assert.propEqual(value, expected[, message]) 比较真实和期待(expected )的对象的属性和属性值是否相同,相同断言通过,注意这个方法可以比较构造函数和原型不同的两个对象
assert.notPropEqual(value, expected[, message]) 与propEqual相反。

assert.expect( amount )本测试里期待会执行amount个断言,大于或少于这个数量,测试都将失败。

assert.raises( block, expected, message )异常断言,block中抛出异常则通过,expected为可选参数,是所期待抛出异常名的正则表达式。

2.3 把QUnit集成到现有工具

QUnit在执行的过程中会调用一系列函数,告知外界运行状况,大家可以覆盖这些函数,达到集成的目的。

QUnit.begin()当QUnit开始时会调用此函数。
QUnit.done()当QUnit结束后会调用此函数。

QUnit.moduleStart({ name })每当一个模块执行开始时会调用此函数。
QUnit.moduleDone({ name, failed, passed, total })每当一个模块执行结束后会调用此函数。

QUnit.testStart({ name }):测试执行开始时会调用此函数。
QUnit.testDone({ name, failed, passed, total })每当一个测试执行结束后会调用此函数。

QUnit.log({ result, actual, expected, message }):断言执行结束后会调用此函数。

在后面的实例中,我写了一些覆盖,打印了执行过程。相信有了这些回调函数的帮助,写一个进度条出来也不是难事。

2.4 QUnit的过滤器

  • Hide passed tests:隐藏通过的测试,勾选后通过的测试就不显示。使用了HTML5的sessionStorage技术,页面重新载入的时候只测试之前那部分没有通过的case。
  • Check for Globals:”全局检查“,如果勾选了这项,在进行测试之前,QUnit会检查测试之前和测试之后window对象中的属性,如果前后不一样,就会显示不通过。
  • No try-catch: QUnit不使用try-catch跑测试,当有异常抛出的时候,测试运行器会停止运行,但会获得一个内部异常,在我们使用老浏览器(例如ie6)做测试的时候会有帮助。
  • Rerun:重新测试该用例
  • Enable coverage:查看测试代码的覆盖率,需要引入文件sap.ui.qunit.qunit-coverage

2.5 QUnit Test对象

QUnit的每个test函数都会生成Test类相应的实例,每个实例都5个生命周期,每个Test实例的生命周期方法都会顺序加入config.queue中顺序执行,生命周期如下:

  • init
  • setup
  • run函数负责运行正真的测试代码
  • teardown
  • finish负责将统计好的测试结果显示到页面上

如果run中有异步的代码,顺序执行run、teardown和finish之后,异步代码还没执行,其测试的结果就无法正确统计。 因此应调用Qunit.start()和Qunit. stop()函数,分别设置config.blocking true或者false来控制执行队列暂停或执行,从而等待异步代码执行,正确统计执行结果。

更多API参考官网文档:https://qunitjs.com/

相关推荐