项目准备启用Qunit, 先来尝试一下。 不说废话，上代码：

<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>QUint</title>

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

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

    <script type="text/javascript">

        myfunc = function(a){

            return a^3;

        }

        function Foo( x, y, z ) {

            this.x = x;

            this.y = y;

            this.z = z;

          }

        test("Simple", function(assert) {

            assert.ok(function(){return "world1"}, "world");

            assert.notOk(1 === "1", "=== failed!");

            ok(1 == "1", "== pass!");

            equal('1',1,"1==1 equal");

            assert.ok(myfunc(1) == 2,"calc pass"+(1^3));

        });

        var a = new Foo(1,2,3);

        var b = a;

        test("object",function(){

            propEqual(a,b,"a is same as b");

            strictEqual(a,b,"a is strict same as b");

            a.x =8;

            propEqual(a,b,"a is same as b");

            a = {x:8,y:2,z:3};

            propEqual(a,b,"a is same as b");

            notStrictEqual(a,b,"a is not strict same as b");

            a = new Foo(1,2,3);

            notPropEqual(a,b,"a is not same as b");

            b = new Foo(1,2,3);

            notEqual(a,b,"a is not same as b");

            notStrictEqual(a,b,"a is not strict same as b for different object");

            deepEqual(a,b,"a b DeepEqual");

        });

        test( "async", function( assert ) {

          assert.expect( 2 );

          var done1 = assert.async();

          var done2 = assert.async();

          setTimeout(function() {

            assert.ok( true, "test resumed from async operation 1" );

            done1();

          }, 500 );

          setTimeout(function() {

            assert.ok( true, "test resumed from async operation 2" );

            done2();

          }, 150);

        });

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

          assert.expect( 1 );

          function calc( x, operation ) {

            return operation( x );

          }

          var result = calc( 2, function( x ) {

            assert.ok( true, "calc() calls operation function" );

            return x * x;

          });

          assert.equal( result, 4, "2 squared equals 4" );

        });

    </script>

</head>

<body>

    <h1 id="qunit-header">QUnit Report</h1>

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

    <ol id="qunit-tests"></ol>

</body>

</html>

看报告：

看起来不错， 有equal, deepEqual, strictEqual要区别下。

在看看dom的操作:

<!DOCTYPE HTML>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title>demo1</title>

        <link rel="stylesheet" href="../../qunit.css">

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

        <script type="text/javascript">

        function submit (argument) {

            // body...

            var Str = document.getElementById("userName").value + document.getElementById("password").value;

            document.getElementById("result").innerText = Str;

        }

        function reset (argument) {

            // body...

            document.getElementById("userName").value = document.getElementById("password").value = "";

            document.getElementById("result").innerText = "";

        }

        test("Simple", function(assert) {

            document.getElementById("userName").value = "username";

            document.getElementById("password").value = "password";

            submit();

            assert.equal(document.getElementById("result").innerText,"username" + "password","test input");

            reset();

            assert.equal(document.getElementById("password").value,document.getElementById("userName").value,"reset");

        });

        </script>

    </head>

    <body>

        <!-- <form > -->

        <div>

            <div>

                <label for="userName">UserName:</label>

                <input type="text" id="userName" name="userName">

            </div>

            <div>

                <label for="password">password:</label>

                <input type="text" id="password" name="password">

            </div>

            <div>

                <input type="button" value="submit" onclick="submit()">

            </div>

        </div>

        <!-- </form> -->

        <div id="result">

        </div>

        <div id="test">

            <h1 id="qunit-header">QUnit Report</h1>

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

            <ol id="qunit-tests"></ol>

        </div>

    </body>

</html>

图：

运行还可以啊。

问题来了： 怎么把测试报告也页面分离，这样太丑了？ 继续研究。。。

QUnit 实践一的更多相关文章

  1. 使用Node.js完成的第一个项目的实践总结

    http://blog.csdn.net/yanghua_kobe/article/details/17199417 项目简介 这是一个资产管理项目,主要的目的就是实现对资产的无纸化管理.通过为每个资 ...

  2. 测试工具使用-Qunit单元测试使用过程

    031302620 应课程要求写一篇单元测试工具的博客,但是暂时没用到java,所以不想使用junit(对各种类都不熟悉的也不好谈什么测试),原计划是要用phpunit,但是安装经历了三个小时,查阅各 ...

  3. [转]使用Node.js完成的第一个项目的实践总结

    本文转自:http://blog.csdn.net/yanghua_kobe/article/details/17199417 https://github.com/yanghua/FixedAsse ...

  4. 互联网研发效能之去哪儿网(Qunar)核心领域DevOps落地实践

    本文从业务目标角度出发,确定了开源+自建模式搭建 Qunar 研发工具链整体生态:通过 APPCODE 打通工具链,流程规范化自动化:多种手段+发布门禁助力质量提升:建立应用画像确定运维最小单元,可发 ...

  5. webp图片实践之路

    最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...

  6. Hangfire项目实践分享

    Hangfire项目实践分享 目录 Hangfire项目实践分享 目录 什么是Hangfire Hangfire基础 基于队列的任务处理(Fire-and-forget jobs) 延迟任务执行(De ...

  7. TDD在Unity3D游戏项目开发中的实践

    0x00 前言 关于TDD测试驱动开发的文章已经有很多了,但是在游戏开发尤其是使用Unity3D开发游戏时,却听不到特别多关于TDD的声音.那么本文就来简单聊一聊TDD如何在U3D项目中使用以及如何使 ...

  8. Logstash实践: 分布式系统的日志监控

    文/赵杰 2015.11.04 1. 前言 服务端日志你有多重视? 我们没有日志 有日志,但基本不去控制需要输出的内容 经常微调日志,只输出我们想看和有用的 经常监控日志,一方面帮助日志微调,一方面及 ...

  9. 【大型网站技术实践】初级篇：借助Nginx搭建反向代理服务器

    一.反向代理:Web服务器的“经纪人” 1.1 反向代理初印象 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从 ...

随机推荐

  1. 【ARC074e】RGB sequence

    Description ​ 一排\(n\)个格子,每个格子可以涂三种颜色的一种.现在给出\(m\)个形如"\([l,r]\)中必须恰好有\(x\)种颜色"的限制(\(1 \le l ...

  2. 使用msiexec.exe绕过应用程序白名单（多种方法）

    0x00 前言 在我们之前的文章中,我们讨论了“Windows Applocker策略 - 初学者指南”,因为它们为应用程序控制策略定义了AppLocker规则,以及如何使用它们.但今天您将学习如何绕 ...

  3. 用ladon框架封装Python为Webservice接口以及调用接口的方法

    一.用ladon框架封装Python为Webservice接口 功能实现的同时,希望将接口开放给别人,而封装python接口的一个再简单不过的框架Ladon,而且提供不同的协议,包括SOAP和Json ...

  4. python学习(20) 网络编程

    原文链接:http://www.limerence2017.com/2018/01/02/python20/ python 网络编程和基本的C语言编程一样,效率不是很高,如果为了封装通信库建议采用C/ ...

  5. 用递归的方法求一个数组的前n项和

    用递归的方法求一个数组的前n项和 public class Demo1 { /* * 用递归的方法求一个数组的前n项和 */ public static void main(String[] args ...

  6. 实验三：将读取数据功能从Repository中分离

    先理解下面这段话之后再开始做实验 经过实验二的改造之后,我们代码有一点结构的概念了: Listing.aspx:向Repository要Products,然后将得到的Products在页面中显示出来. ...

  7. Python【zip-map-filter】三个内置函数

    print("============内置函数:zip===========")l2 = ['a','b','c','e','f','g']l3 = [1,2,3]L4=['A', ...

  8. Kubernetes init container

    目录 简介 配置 init container与应用容器的区别 简介 在很多应用场景中,应用在启动之前都需要进行如下初始化操作: 等待其他关联组件正确运行(例如数据库或某个后台服务) 基于环境变量或配 ...

  9. jenkins集成sonarqube代码审核

    目前在持续集成领域,除了后起之秀travis ci,在老牌工具中,最著名的还是非jenkins莫属.本篇文章简单的说一声jenkins与sonarqube的集成来实现代码的静态审核. 在这里不详细罗列 ...

  10. Djang下载虚拟环境设置

    下载安装 教程地址 https://docs.djangoproject.com/en/1.11/howto/windows/ 有一个步骤是创建虚拟环境 创建环境 mkvirtualenv env1 ...