前端测试(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/