关闭

使用 QUnit 进行JavaScript单元测试

时间: 2019-08-01阅读: 289标签: 测试

简介

QUnit是一个强大的JavaScript单元测试框架。他可用于jQuery,jQuery UI和jQuery Mobile项目,以及任何使用JavaScript代码编写的项目的测试。


运行环境

任何html和JavaScript编辑器(Visual Studio 2013)

从QUnit官方下载reference jscss文件


加入QUnit到单元测试

添加QUnit.js和QUnit.css到你要测试的html页面中。

<script src="//code.jquery.com/qunit/qunit-1.22.0.js"></script>
<link rel="stylesheet" 
href="https://code.jquery.com/qunit/qunit-1.22.0.css">


创建需要进行单元测试的JavaScript类

将要进行单元测试的代码放到一个单独的js文件中(Calculations.js):

// Create Calculation class.
var Calculation = function () { };

// Add Addition to method to the Calculation class.
Calculation.prototype.Add = function (a, b) {
    return a + b;
};

// Add Subtraction method to the Calculation class.
Calculation.prototype.Substraction = function (a, b) {
    return a - b;
};

// Add Multiplication method to the Calculation class.
Calculation.prototype.Multiplication = function (a, b) {
    return a * b;
};

// Add division method to the Calculation class.
Calculation.prototype.division = function (a, b) {
    return a / b;
};


为上面的方法创建一个单元测试用例

下面的代码就是上面JavaScript方法的单元测试用例,我们同样将它放到单独的一个js文件中(UnitTest.js):

// Instantiate Calculation class.
var c = new Calculation();
// Unit test for addition.
QUnit.test("Addition Test", function (assert) {   
    assert.ok(c.Add(2, 3) == "5", "Passed!");
});

// Unit test for subtraction.
QUnit.test("Substraction Test", function (assert) {
    assert.ok(c.Substraction(3, 2) == "1", "Passed!");
});

// Unit test for division.
QUnit.test("Division Test", function (assert) {
    assert.ok(c.Division(5, 5) == "1", "Passed!");
});

// Unit test for multiplication.
QUnit.test("Multiplication Test", function (assert) {
    assert.ok(c.Multiplication(5, 5) == "25", "Passed!");
});


在HTML代码中引用所有的js和css文件

在HTML代码中分别创建一个id为qunit、qunit-fixture的div标记。

<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.22.0.css">
<script src="~/Scripts/Calculations.js"></script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="//code.jquery.com/qunit/qunit-1.22.0.js"></script>
<script src="~/Scripts/UnitTest.js"></script>
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9564

关闭

Js中for、for...of 、for...in 等 iteration 效率测试

由于不同浏览器,不同版本性能不一,且控制台本质是是套用了一大堆eval,沙盒化程度高,所以需使用node环境测试来提高准确性

理解前端自动化测试TDD + BDD

在日常的开发中,整天赶需求的我们好像没有时间顾及自动化测试,尤其是在敏捷开发的时候。但其实自动化测试可以帮助我们提高代码和功能的健壮程度,大幅减少可能出现的bug。尤其是在复杂系统中

编写难于测试的代码的5种方式

有一次,我在一个讲座上听到主持人问听众如何故意编写难于测试的代码。在场的小伙伴都惊呆了,因为没有任何人会故意写这种糟糕的代码。我记得他们甚至给不出一个好的答案。

js单元测试工具-jest自动化测试

jest 是 facebook 开源的,用来进行单元测试的框架,可以测试 javascipt 和 react。jest 提供了非常方便的 API,可以对下面的场景方便的测试:一般函数、异步函数、测试的生命周期、react 测试

API测试工具

越来越多的公司正在向DevOps的方向左转,以实现持续集成和持续部署开发。这意味着我们的反馈需要比以往更快,以便确定我们的应用程序是否准备好交付。这就是API测试如此重要的原因

测试工具比较:选Jest,不选Mocha

Jest的未来看起来非常令人激动!看到Jest推陈出新如此快速,我感觉它将很快成为整个React生态系统中大部分项目的首选工具。我建议,应该把测试迁移到Jest上去。

如何对 react hooks 进行单元测试?

使用 react hook 来做公司的新项目有一段时间了,大大小小的坑踩了不少。由于是公司项目,因此必须要编写单元测试来确保业务逻辑的正确性以及重构时代码的可维护性与稳定性,之前的项目使用的是 react@15.x 的版本

你需要了解的前端测试“金字塔”

如果您正在测试前端应用程序,则应该了解前端测试金字塔。在本文中,我们将看到前端测试金字塔是什么,以及如何使用它来创建全面的测试套件。

Jest 初学者教程:JavaScript 测试入门

在编程术语中,测试意味着检查我们的代码是否符合某些期望。例如:一个名为 “ transformer” 的函数应在给定某些输入的情况下返回期望的输出。测试类型很多,但简单来说测试分为三大类:

Node.JS中回调嵌套和async/await执行空函数性能效率对比测试

asyn/await关键字可以让原来的回调嵌套和链式写法,改造成同步语法。util.promisify可以很方便地将回调函数Promise化,那么Promise函数的async/await执行和回调函数的嵌套执行或链式执行在性能上有差异吗?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!