qunit和mockjax前端测试

最新推荐文章于 2024-07-24 10:40:52 发布
最新推荐文章于 2024-07-24 10:40:52 发布
阅读量69 收藏
点赞数
文章标签： 前端 javascript 后端 ViewUI
原文链接：https://yq.aliyun.com/articles/412846
版权

qunit是JavaScript的单元测试框架，用起来和junit一样的简单，够可视化。

  通过阅读API和一些测试Demo很快就可以掌握qunit的基本用法。下面是一个测试例子，通过例子来说明qunit的用法，然后就没了。

  • qunit框架使用的一个demo集合

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    <!DOCTYPE html>
    < html >
    < head >
         < meta  charset = "utf-8" >
         < meta  http-equiv = "X-UA-Compatible"  content = "IE=edge,chrome=1" >
         < title >Test JCN.dom.node.util.js</ title >
         < link  href = "../script/jquery/qunit-1.14.0.css"  rel = "stylesheet" />
         <!--
         <script type="text/javascript" src="../script/jquery/jquery-1.8.0.min.js"></script>
         -->
         < script  type = "text/javascript"  src = "../script/jquery/qunit-1.14.0.js" ></ script >
         < script  type = "text/javascript"  src = "JCN.dom.node.util.js" ></ script >
         < script >
             window.onload = function () {
                 var e = document.getElementById("content");
                 var L = function (msg) {
                     console.info("Test Log is : " + msg);
                 };
                 //Test001
                 test("test getStyle", function () {
                     expect(4);
                     //
                     var w = JCN.getStyle(e, "width");
                     var h = JCN.getStyle(e, "height");
                     L(w);
                     L(h);
                     equal(w, "30px", "Test getStyle(element, name) width to match.");
                     equal(h, "20px", "Test getStyle(element, name) height to match.");
                     e.style.width = "30px";
                     e.style.height = "20px";
                     //
                     var w = JCN.getStyle(e, "width");
                     var h = JCN.getStyle(e, "height");
                     L(w);
                     L(h);
                     equal(w, "30px", "Test getStyle(element, name) width to match.");
                     equal(h, "20px", "Test getStyle(element, name) height to match.");
                 });
                 //Test002
                 test("test setElementOpactiy", function () {
                     JCN.setElementOpactiy(e, 0.5);
                     var o = JCN.getStyle(e, "opacity");
                     L(o);
                     equal(o, 0.5, "Test setElementOpactiy(element, opactiy) opactiy to match.");
                 });
                 module("module test", {
                     setup: function () {
                         L("module test setUp");
                     },
                     teardown: function () {
                         L("module test teardown");
                     }
                 });
                 //Test003
                 test("test relativePage", function () {
                     var pageX = JCN.relativePage.pageX(e);
                     var pageY = JCN.relativePage.pageY(e);
                     L("pageX=" + pageX + ", pageY=" + pageY);
                     equal(pageX, 0, "Test pageX.");
                     equal(pageY, 498, "Test pageY.");
                 });
                 //Test004
                 test("test relativeParent", function () {
                     expect(2);
                     var offsetParentX = JCN.relativeParent.parentX(e);
                     var offsetParentY = JCN.relativeParent.parentY(e);
                     L("offsetParentX=" + offsetParentX + ", offsetParentY=" + offsetParentY);
                     equal(offsetParentX, 0, "Test relativeParent(element) offsetParentX to match.");
                     equal(offsetParentY, 0, "Test relativeParent(element) offsetParentY to match.");
                 });
             };
         </ script >
         < style >
             .content {
                 width: 30px;
                 height: 20px;
                 background-color: salmon;
             }
         </ style >
    </ head >
    < body >
    < h1  id = "qunit-header" >Qunit Example</ h1 >
    < h2  id = "qunit-banner" ></ h2 >
    < div  id = "qunit-testrunner-toolbar" ></ div >
    < h2  id = "qunit-userAgent" ></ h2 >
    < ol  id = "qunit-tests" ></ ol >
    < div  id = "qunit-fixture" >
         < span  id = "content"  class = "content" >
         This is a test div.
         </ span >
    </ div >
    </ body >
    </ html >



  • 依赖，设置说明

    1.qunit测试框架提供了清晰的测试结果反馈界面，这里要引入：qunit.css样式文件（http://qunitjs.com/ 官方主页 ）

    2.引入核心库qunit.js,提供了一组测试框架的API。

    3.之前的版本有依赖jquery,目前qunit是一个独立的JavaScript.

    4.引入要测试的JavaScript代码，本例是：JCN.dom.node.util.js

    5.<body>xx</body>:body体的内容是固定的展示qunit测试结果的模版，其中qunit-header:测试标题，qunit-testrunner-toolbar:一组选择框提供了在测试运行时一些条件设置，qunit-userAgent:（很清楚）测试客户端信息，qunint-tests:一组测试结果，qunit-fixture:（这个重要）fixture的意思是固定不变的，不大可能移动的，如果测试用例对DOM进行了相应的操作，比如移动，删除，设置属性等，在这个结点下的任意结点在每一个测试用例结束后都会回复原始状态，这就保证的测试用例的独立和封闭，不会对其他测试和原始环境造成影响。

  • 测试用例说明

    1.关于qunit提供的测试功能要查看API：http://api.qunitjs.com/ 这是个学习的好方法。

    2.如上代码：Test001分析

     test("test getStyle", function(){...}):第一个参数：测试用例的名称，第二个参数：assert(断言)，注意：如果第二个参数是数组，则表示期望断言的数，那么第三个参数就是断言。在本例子中使用在断言方法中设置断言数:expect(4)。建议这样写，简明思议，不至于时间久了，第二个参数记不起来是什么意思，还得回头API。

  • 关于断言方法的使用和Junit类似，可以查看qunit源代码，有清晰可读的注释。

    下面提供个片段图，以供溯本逐源的朋友快速定位。

    wKiom1NPRcaRZ908AAEnYErGLOs766.jpg

  • Test module

         module在这里可以理解为组的意思，使用module的原因是归为一个组的测试用例它们具有共同的测试执行前或测试执行后要处理的逻辑。

  • qunit插件mockjax 和 qunit asyncTest(testName, assert)

    qunit的异步测试方法asyncTest,以start()开启，以stop()结束，然后继续一下一个测试用例，问题是其不能达到真正的异步通信，数据传输的功能，这个时候借助mockjax可以达到想要的结果。mockjax提供的测试demo中的一个例子如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    asyncTest( 'Support 1.5 $.ajax(url, settings) signature.' ,  function () {
         $.mockjax({
             url:  '/resource' ,
             responseText:  'Hello Word'
         });
         $.ajax( '/resource' , {
             success:  function (response) {
                 equal(response,  'Hello Word' );
             },
             complete:  function () {
                 start();
             }
         });
         $.mockjaxClear();
    });

    总结一点mockjax在一个测试用例中完成了前端异步请求和后端服务器响应。


j_0008.gif插播，编辑器太难用了，老是格式对不好，光标位置跳，内容浮动。


   文中开始提供的测试代码测试结果图如下：

wKiom1NPTN3izozzAAIfPOdvPJw208.jpg

   说明一些测试结果：

   1.测试结果：“模块名”+“测试用例名”+“结果数据(失败个数，通过个数，测试个数)”

   2.测试结果图中从上往下依次是：标题，标语，客户端信息，测试结果。




本文转自 secondriver 51CTO博客，原文链接：http://blog.51cto.com/aiilive/1397009，如需转载请自行联系原作者

weixin_34242819
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第28步:使用QUnit进行单元测试
Pianpianluoye
07-22 290
第28步:使用QUnit进行单元测试
QUnit的使用
chuomu8273的博客
09-10 679
最近我准备构建一个自己的轻量级的库，但是我遇到了一些问题，最大的问题就是比如写着写着，我怕后面写的东西会覆盖掉前面的一些功能，所以我只能不停的测试，于是我想到了用一些测试库，试着安装传说中的mocha啥的，on my god,我的破电脑完全不给力装不上去，最后找了这一款超级轻量级的语法简单的测...
Javascript单元测试框架比较Qunit VS Jasmine
萌萌的It人 www.itmmd.com
07-26 4938
工欲行其事必先利其器，好的单元测试框架是TDD成功的一半。Javascript优秀的测试框架很多, 包括Jasmine，Qunit，JsTestDriver，JSUnit，Mocha等，当然你也可以写自己的单元测试框架，本文主角是Jasmine和Qunit。我之前一直用Qunit来做单元测试，Qunit在中国占有率是非常高的，我也不例外，而美国同事们已经用到Jasmine了，为了做一个更好的选型，
使用jquery-mockjax模拟ajax请求做前台测试
江湖小虾米
07-09 3909
一般来说，我们做web开发的时候前后台是分开做的，这样带来的好处是前台的开发人员可以安心的写前台代码而后台的小伙伴就安心研究后台就OK了。 但是这样带来一个问题，当后台的小伙伴被天灾军团带走了，那前台需要依赖后台服务的代码怎么办呢？  方法是有的： 寻求近卫军团帮忙 近卫军团有很多选手，今天要说的是 jQueryMock 这位。   mockjax官方地址：https://github
Web前端持续集成方案（三）
hcl1687的专栏
09-29 1496
利用karma实现seajs模块单元测试覆盖率检测 关于覆盖率检测， 之前尝试了jscoverage等很多方案，都没有成功。最后试了karma方案可以。现在就大致介绍一下基于karma的覆盖率检测。 1、安装karma及相关插件 2、进行karma配置 命令行下输入karma init会生成配置应道交互程序，具体配置如下： 框架中需要引入qunit和se
Javascript之QUnit单元测试
02-26
由此我就想到javascript应该也存在单元测试，所以我搜索了一下，发现了QUnit，它的特点很明显，就是学习周期很短，可以在短时间内上手，并且也拥有非常美观的界面，所以下面我将介绍如何使用QUnit。既然要学习，我们...
如何用QUnit来测试JavaScript代码
01-31
QUnit是一套由jQuery团队开发的，非常强大的用于对JavaScript进行单元测试的框架。本文将介绍什么是QUnit，以及为何要关心代码测试。Qunit是一款强大的用于帮助调试代码的，JavaScript单元测试框架。QUnit由jQuery...
qunit单元测试demo
04-11
QUnit 是一个强大的JavaScript单元测试框架，主要用于JavaScript代码的质量保证和功能验证。它是由jQuery项目的开发者设计和维护的，因此特别适合于测试基于jQuery的代码，但同样适用于任何JavaScript环境。QUnit...
去哪儿自动测试框架：基于Mock的应用模块及分布式运行平台模块
weixin_37098404的博客
07-10 495
Qunit自动化测试框架中针对Mock第三方接口数据开发的零侵入切面技术的应用模块和加速自动化用例测试执行速度开发的分布式运行平台模块。Qunit简介 Qunit是去...
jQuery单元测试 -- QUnit入门教程
adyw2565876的博客
04-16 1501
    最近在项目中经常使用jQuery做网站前端开发，功能开发完成后都是手动测试，想着是否可以学习一下jQuery的单元测试框架，以便后续在写jQuery的时候做一下单元测试，于是便学习了一个强大的jQuery单元测试框架。一、简单使用    Qunit是由jQuery团队成员开发的一个强大的jQuery单元测试框架，目前已被广泛使用在各个项目中。为了使用Qunit，只需要在待测试的html页面...
5.CSS学习（浮动）
ShawLee0925的博客
07-23 426
css浮动——float特点
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 273
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 238
【代码】TS如何处理js模块的类型？
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 283
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 982
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 941
CTFWP，ctfshow-web42
QUnit测试前端组件
02-06
QUnit 是一个开源的 JavaScript 单元测试框架，用于测试前端组件的功能。它提供了一组 API ，可以方便地编写和运行测试，并生成测试报告，使得我们能够快速确定前端组件是否正常工作。QUnit 常用于测试 jQuery 和 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值