资讯专栏INFORMATION COLUMN

前端测试(2)--QUnit

RebeccaZhong / 1647人阅读

摘要:全局检查,如果勾选了这项,在进行测试之前,会检查测试之前和测试之后对象中的属性,如果前后不一样,就会显示不通过。

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/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94414.html

相关文章

  • 关于前端开发谈谈单元测试

    摘要:很快我发现有一个误区,许多人认为单元测试必须是一个集中运行所有单元的测试,并一目了然。许多人认为单元测试,甚至整个测试都是在编码结束后的一道工序,而修复也不过是在做垃圾掩埋一类的工作。 单元测试Unit Test 很早就知道单元测试这样一个概念,但直到几个月前,我真正开始接触和使用它。究竟什么是单元测试?我想也许很多使用了很久的人也不一定能描述的十分清楚,所以写了这篇文章来尝试描述它...

    0x584a 评论0 收藏0
  • 译:你该使用什么单元测试Qunit、Jasmine还是Mocha?

    摘要:不论你是在写浏览器端还是后端的,总存在那么一个问题我该使用什么单元测试库去确保我的代码如预期的运行呢总是有那么一些流行的框架可供选择。在中仍然流行,并且拥有来自许多地方性的支持。如果你的测试使用它,直到调用了才能通过。 不论你是在写浏览器端javascript还是后端的nodejs,总存在那么一个问题:我该使用什么单元测试库去确保我的代码如预期的运行呢?总是有那么一些流行的框架可供选择...

    Forelax 评论0 收藏0
  • 前端学习路线

    摘要:具体来说,包管理器就是可以通过命令行,帮助你把外部库和插件放到你的项目里面并在之后进行版本升级,这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上: 学习HTML基础,了解如何编写语义HTML 理解如何把网页分...

    FullStackDeveloper 评论0 收藏0
  • 前端学习路线

    摘要:具体来说,包管理器就是可以通过命令行,帮助你把外部库和插件放到你的项目里面并在之后进行版本升级,这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上: 学习HTML基础,了解如何编写语义HTML 理解如何把网页分...

    20171112 评论0 收藏0

发表评论

0条评论

RebeccaZhong

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<