博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript单元测试之QUnit
阅读量:5079 次
发布时间:2019-06-12

本文共 1963 字,大约阅读时间需要 6 分钟。

首先去Qunit官网下载。

Qunit有一个js脚本文件和一个css我们在页面中引入它。

<script src="qunit-2.0.1.js"></script>

<link rel="stylesheet" href="qunit-2.0.1.css">

页面中有两段必须的标签。

<div id="qunit"></div>

<div id="qunit-fixture"></div>

不写上这个,页面就是空白的了,这两个标签用来显示测试结果以及其他的东西。

 

接下来我们可以新建一个js文件来进行简单的测试了。

function add(a, b) {

  return a + b;
}

QUnit.test( "add test", function( assert ) {

  assert.ok( add(2,3) === 6, "add IS 5" );
});

结果如下:

看到圈起来的没

QUnit.test( "add test", function( assert ) {

  assert.ok( add(2,3) === 6, "add IS 5" );
});

QUnit.test表示你要测试一段代码,第一个也就是我圈起来的那段,只是用来显示的,第二个参数是一个函数,里面放一个assert参数,这个测试有很多的属性,在这里我们用到的是ok这个函数可以用来测试一个布尔值,第一个写你要测试的,如果相等表示通过,否则会报错,第二个也是用来显示的。

 

如果是通过的会是这样的。

如果你想比较两个值是否相等而不是比较布尔值,可以用equal函数。

QUnit.test( "test", function( assert ) {

  assert.equal( 555 , 555 , "IS 555 ?" );
});

n1:实际值

n2:希望值

n3:看看而已

如果这样:

QUnit.test( "test", function( assert ) {

  assert.equal( '555' , 555 , "IS 555 ?" );
});

因为equal用的是Javascript中的==比较,所以会隐式转换。

如果不想这样我们可以使用deepEqual函数

QUnit.test( "test", function( assert ) {

  assert.deepEqual( '555' , 555 , "IS 555 ?" );
});

deepEqual和equal函数功能差不多,不过它用的是===全等。

如果是异步的话这些就有些无能为力了,不管QUnit提供了几个函数可以解决。

QUnit.test( "test", function( assert ) {

  var done = assert.async();
  var qunit = document.getElementById('qunit');
  qunit.onclick = function(){
    assert.ok( true , "IS 555 ?" );
    done();
  };

});

assert.async函数用来创建一个异步操作它会返回一个函数,这个可以在你测试的下方执行一下done();

 

但是正如QUnit官方说的:

Call assert.async() for each operation. Each done callback can be called at most once.

调用每个操作async()断言,每个所做的回调可以至多被调用一次。

 

也就是说只能执行一次,看这个。

会多一次的,也就是说如果你想执行多次这样还不行,但是有一个叫啥断言的东西,我们来看看。

QUnit.test( "test", function( assert ) {

  assert.expect(5);
  var done = assert.async(5);
  var qunit = document.getElementById('qunit');
    qunit.onclick = function(){
    assert.ok( true , "istrue" );
    done();
  };

});

assert.expect(5);这里写你要测试的次数,var done = assert.async(5);也要加上次数。

我也醉了为什么要限制这个。

 

QUnit官网:http://api.qunitjs.com/

刷去吧。

转载于:https://www.cnblogs.com/pssp/p/5802134.html

你可能感兴趣的文章
mysql8.0.13下载与安装图文教程
查看>>
站立会议08(冲刺2)
查看>>
url查询参数解析
查看>>
http://coolshell.cn/articles/10910.html
查看>>
[转]jsbsim基础概念
查看>>
DIV和SPAN的区别
查看>>
第一次使用cnblogs
查看>>
C#语法糖之 session操作类 asp.net
查看>>
2015 Multi-University Training Contest 3
查看>>
使用Gitblit 在windows 上部署你的Git Server
查看>>
217. Contains Duplicate
查看>>
vue2.0 关于Vue实例的生命周期
查看>>
jenkins 更换主数据目录
查看>>
Silverlight中恼人的g.i.cs错误
查看>>
SQLite 数据库增删改查
查看>>
<s:iterator>的status
查看>>
C++入门--1.0输入输出
查看>>
让搭建在Github Pages上的Hexo博客可以被Google搜索到
查看>>
Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十四章:曲面细分阶段...
查看>>
在WPF控件上添加Windows窗口式调整大小行为
查看>>