使用 QUnit 进行JavaScript单元测试

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

简介

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

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

使用 React Testing Library 和 Jest 完成单元测试

构建一个 web 应用对于我们来说,并非什么难事。因为有很多足够多优秀的的前端框架(比如 React,Vue 和 Angular);以及一些易用且强大的UI库(比如 Ant Design)为我们保驾护航,极大地缩短了应用构建的周期。

Web性能压力测试工具之WebBench详解

webbench的标准测试可以向我们展示服务器的两项内容:每秒钟响应请求数和每秒钟传输数据量。webbench不但能具有便准静态页面的测试能力,还能对动态页面(ASP,PHP,JAVA,CGI)进 行测试的能力。

API测试工具

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

神奇的 Promise: 一次异步代码的单元测试

本文适用环境为 NodeJs v12 和 2019 年 11 月 19 日最新版 Chrome。写这篇文章的起因是在写单元测试时,做形如下测试时无法使用 await 将测试代码恰好阻塞到 catch 在 Event Loop 中被调用后的时机

模拟 API 调用和模拟 React 组件交互

今天,我们进一步测试 React 组件。它涉及模拟组件交互和模拟 API 调用。你将学到两种方法,开始吧!对于我们的程序来说,从 API 获取一些数据是很常见的。但是它可能由于各种原因而失败,例如 API 被关闭

原生js逻辑测试题及答案

屏幕打印2000到3000之间的所有的数。求450到550之间所有奇数的和。找出200以内,既能整除3又能整除5的所有数。页面弹出输入框,只有当用户输入Alice和Bob这两个名字时,才会向用户问好“你好”。

十大流行的无脚本测试方案

在传统的软件开发中,测试专业人​​员除了手动进行各种测试以外,更多时候需要依赖自动化的测试工具,来反复执行某些相同的测试任务。对于一些按照硬编码值执行、且无需任何修改的简单测试任务而言

在vue项目中使用单元测试

目前笔者负责的项目迭代十分频繁,前端需要处理业务逻辑日益增多,除了考虑如何保证开发速度之外,还必须考虑系统的稳定性,因此决定在项目引入单元测试。

web安全测试必须注意的五个方面

随着互联网的飞速发展,web应用在软件开发中所扮演的角色变得越来越重要,同时,web应用遭受着格外多的安全攻击,其原因在于,现在的网站以及在网站上运行的应用在某种意义上来说,它是所有公司或者组织的虚拟正门

12个强大的Web服务测试工具

在过去的几年中,web服务或API的普及和使用有所增加。 web服务或API是程序或软件组件的集合,可以帮助应用程序进行交互或通过形成其他应用程序或服务器之间的连接执行一些进程/事务处理

点击更多...

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