一、单元测试前言

什么是单元测试？

如果是新接触单元测试的童鞋，简要的解释：就是一个JS函数/功能/模块的测试。

单元测试的工具：这里介绍QUnit

Qunit原本是jqury家的，不过现在已经独立了，即是说使用QUnit不需要依赖jquery

官方api地址：http://api.qunitjs.com/

二、QUnit 使用、学习教程

一、下载与安装

首先要下载qunit的相关js和css，目前版本v1.23.1，下载地址： 打开官网http://qunitjs.com/，右侧即download，选择要下载的文件。

也可以通过npm安装：npm install --save-dev qunitjs

也可以直接输入下方地址下载：

https://code.jquery.com/qunit/qunit-1.23.1.js

https://code.jquery.com/qunit/qunit-1.23.1.css

二、一个简单的QUnit测试单个功能

二（1）创建基本的html文件

新建一个html文件，先引入必要js和CSS文件：1个js和1个CSS文件，就是之前下载的那个js和CSS文件

基本的HTML结构如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Qunit单元测试</title>

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

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

</head>

<body>

/*以下这3个是必写的，是将来输出测试结果的区域，id不要改*/

<h1 id="qunit-header">QUnit 单元测试</h1>

<h2 id="qunit-banner"></h2>

<ol id="qunit-tests"></ol><!--输出测试结果的区域-->

</body>

</html>

二（2）测试一个简单的功能

在之前创建的html文件的基础上，加入以下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Qunit单元测试</title>

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

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

    /*新增代码 开始*/

    <script>

        test("test fn",function(){

            ok(true, "this is a QUnit unit test");

        });

    </script>

    /*新增代码 结束*/

</head>

<body>

<h1 id="qunit-header">QUnit 单元测试</h1>

<h2 id="qunit-banner"></h2>

<ol id="qunit-tests"></ol><!--输出测试结果的区域-->

</body>

</html>

然后页面上会显示本次断言测试的结果：this is a QUnit unit test，具体如图（这是单元测试通过的图，单元测试不通过的图，接下来会放上）：

解释： test()方法：

QUnit.test( name, callback ) 描述：增加一个测试案例。

  1. 参数name:string，给这个测试自定义起个名字。
  2. 参数callback:function，要被测试的主体，比如这里是一个ok()方法

ok()

Categories: Assert

简介与用法：

ok( state [, message ] )

Description: A boolean check, equivalent to CommonJS's assert.ok() and JUnit's assertTrue(). Passes if the first argument is truthy.

  1. 参数state:Expression :要被测试的表达式，比如true,false,0,NaN,null,undefined,"","sdfs"，
  2. 参数message ：String，本断言的描述信息

这是QUnit中最基本的断言，ok()的第一个参数如果值为true,这个断言便算通过了，若否，则不通过。如果有第二个参数，则会在结果信息里显示第二个参数的内容。

本例中，因为我们指定了第一个参数为true。所以不论如何，这个断言都会通过； 同理，如果这里写为false,那么不论如何，都不会通过。

现在，来多写几个ok断言测试：

<script>

    test("test fn",function(){

        ok(true, "this is a QUnit unit test");

        /*新增的几个ok断言测试*/

        ok( "non-empty", "non-empty string succeeds" );

        ok( false, "false fails" );

        ok( 0, "0 fails" );

        ok( NaN, "NaN fails" );

        ok( "", "empty string fails" );

        ok( null, "null fails" );

        ok( undefined, "undefined fails" );

    });

</script>

浏览器里跑一下的结果： 除了第一个通过了，后面的都没有通过

三、一个真正的测试

三（1）、新增一个test2.js文件

/*这是我们要测试的函数*/

function showHello(sName){

    return "hello!"+sName;

}

/*依旧用test()来增加一个测试案例*/

test("test Fn",function(){

    /*定义一个变量——这没什么可说的*/

    var myName = "小明";

    /*这里用equal()而非ok()*/

    equal(showHello(myName),"sss","不通过" );

    equal(showHello(myName),"hello!小明","通过" );

});

三（2）、index.html中引入这个js文件，并且删掉之前测试的方法的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Qunit单元测试</title>

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

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

    <script src="test2.js"></script>

</head>

<body>

<h1 id="qunit-header">QUnit 单元测试</h1>

<h2 id="qunit-banner"></h2>

<ol id="qunit-tests"></ol><!--输出测试结果的区域-->

</body>

</html>

QUnit 学习笔记 使用说明（一）的更多相关文章

  1. 学习笔记：安装swig+用SWIG封装C++为Python模块+SWIG使用说明

    这段时间一直在摸索swing,用它来封装C++代码来生成python脚步语言.并总结了swing从安装到配置再到代码封装编译生成动态库的整个过程,下面这篇文章都是我在实际的运用中的一些经验总结,分享给 ...

  2. Git学习笔记与IntelliJ IDEA整合

    Git学习笔记与IntelliJ IDEA整合 一.Git学习笔记(基于Github) 1.安装和配置Git 下载地址:http://git-scm.com/downloads Git简要使用说明:h ...

  3. 转:openwrt中luci学习笔记

    原文地址:openwrt中luci学习笔记 最近在学习OpenWrt,需要在OpenWrt的WEB界面增加内容,本文将讲述修改OpenWrt的过程和其中遇到的问题. 一.WEB界面开发         ...

  4. EPROCESS 进程/线程优先级 句柄表 GDT LDT 页表 《寒江独钓》内核学习笔记（2）

    在学习笔记(1)中,我们学习了IRP的数据结构的相关知识,接下来我们继续来学习内核中很重要的另一批数据结构: EPROCESS/KPROCESS/PEB.把它们放到一起是因为这三个数据结构及其外延和w ...

  5. 学习笔记：暴力破解WIFI小软件

    小弟 自己的学习笔记,做练习的 ,缺陷还很多,做到无法解决速度问题就不想做下去了,如果要看的话 主要是思路问题,获取句柄,控制句柄而已,代码比较简单.大神勿喷啊 破解DEMO源码:http://dow ...

  6. cJSON学习笔记 续集

    0.前言     本文试图说明怎样使用CJSON构造各种各样的JSON数据包.在前段时间已经写过一篇cJSON的文章,所以本文成为"续集".     [相关博文]     [前端学 ...

  7. Dubbo -- 系统学习 笔记 -- 配置

    Dubbo -- 系统学习 笔记 -- 目录 配置 Xml配置 属性配置 注解配置 API配置 配置 Xml配置 配置项说明 :详细配置项,请参见:配置参考手册 API使用说明 : 如果不想使用Spr ...

  8. Apache Ignite 学习笔记(一): Ignite介绍、部署安装和REST/SQL客户端使用

    Apache Ignite 介绍 Ignite是什么呢?先引用一段官网关于Ignite的描述: Ignite is memory-centric distributed database, cachi ...

  9. [Golang学习笔记] 02 命令源码文件

    源码文件的三种类型: 命令源文件:可以直接运行的程序,可以不编译而使用命令“go run”启动.执行. 库源码文件 测试源码文件 面试题:命令源码文件的用途是什么,怎样编写它? 典型回答: 命令源码文 ...

随机推荐

  1. Android系统机制

    Android系统机制 本文主要介绍Android系统整体运行机制 Linux中的一些概念 uboot加载系统内核到内存,系统内核运行起来的后,会创建第一个用户进程叫init进程,该进程是所有用户进程 ...

  2. spring cloud 转

    http://blog.csdn.net/forezp/article/details/70148833 服务的注册与发现(Eureka) 服务注册(consul) 服务消费者(rest+ribbon ...

  3. session与cookie的详解

    在PHP面试中 经常碰到请阐述session与cookie的区别与联系,以及如何修改两者的有效时间. 大家都知道,session是存储在服务器端的,cookie是存储在客户端的,session依赖于c ...

  4. 20145328 《Java程序设计》实验四实验报告

    20145328 <Java程序设计>实验四实验报告 实验名称 Andoid开发基础 实验内容 基于Android Studio开发简单的Android应用并部署测试; 了解Android ...

  5. 【前端】用javaScript实现实现一个球池的效果

    ballPool 用javaScript实现实现一个球池的效果,实现效果如下所示: 动图: 截图: HTML代码: <!DOCTYPE html> <html > <he ...

  6. Java 面试题基础概念收集

    问题:如果main方法被声明为private会怎样? 答案:能正常编译,但运行的时候会提示”main方法不是public的”. 问题:Java里的传引用和传值的区别是什么? 答案:传引用是指传递的是地 ...

  7. [CF1051F]The Shortest Statement

    题目大意:给定一张$n$个点$m$条有权边的无向联通图,$q$次询问两点间的最短路 $n\le100000$,$m\le100000$,$1\le100000$,$m$-$n\le20$. 首先看到$ ...

  8. RabbitMQ单机多实例配置

    由于某些因素的限制,有时候你不得不在一台机器上去搭建一个rabbitmq集群,当然这种集群只适合自己玩玩,验证下结论,这个有点类似zookeeper的单机版.真实生成环境还是要配成多机集群的.有关怎么 ...

  9. nfs报错 - No route to host

    nfs报错 - No route to host ______________________________ 因为防火墙阻止的原因. 解决方法:服务器rhel7系统下,打开firewall-conf ...

  10. 2017 ACM/ICPC Asia 南宁区 L The Heaviest Non-decreasing Subsequence Problem

    2017-09-24 20:15:22 writer:pprp 题目链接:https://nanti.jisuanke.com/t/17319 题意:给你一串数,给你一个处理方法,确定出这串数的权值, ...