jQuery单元测试--QUnit入门教程

  最近在项目中经常使用jQuery做网站前端开发,功能开发完成后都是手动测试,想着是否可以学习一下jQuery的单元测试框架,以便后续在写jQuery的时候做一下单元测试,于是便学习了一个强大的jQuery单元测试框架。

  Qunit是由jQuery团队成员开发的一个强大的jQuery单元测试框架,目前已被广泛使用在各个项目中。为了使用Qunit,只需要在待测试的html页面中包含2个Qunit文件即可,分别为qunit.js和qunit.css文件。其中,qunit.js作为运行器和测试框架,而qunit.css作为测试套件的页面显示测试结果的样式。

  头部显示测试套件的标题,若是绿色显示调,则表示全部通过,如图1所示,若至少有一个用例测试失败,则这个显示条会显示红色,如图2所示。图1中从上到下分别显示的是3个checkbox(在后续章节的调试工具里会具体介绍),浏览器的User-Agent信息以及总的测试信息,包括测试的时长,断言的总个数、断言成功的个数以及断言失败的个数。

  ok()仅只有一个请求的参数,如果返回值为TRUE,这个断言就会通过,否则就失败。此外,还接受一个字符串类型的参数作为测试结果的显示。not()则与ok()相反,当参数为FALSE,这个断言就会通过。

  有时候,我们在测试时,并不能确定回调会在什么时候能被真正调用。面对这种情况,我们可以使用expect()定义一个我们期望的回调个数,参数为3,实际上我们只定义了2个有回调的函数,运行程序,结果如图5所示,

  选中这个checkbox,页面会隐藏通过的所有测试,当有大量的测试且只有少数测试失败的情况下,这个选项是挺有用的。此外,当我们选中这个checkbox后,点击Rerun按钮再次运行时,页面重新载入时只会测试上次未通过的测试。

  选中这个checkbox,QUnit会生成一个所有属性在window对象上的清单,在用例运行之前和之后会去检查差异。如果属性被增加或被删除了,测试就会失败并显示出差异。因此,这样可以帮助我们确保单元测试代码和项目代码在测试中不会因为暴露出来的全局变量而造成冲突。

相关阅读