QUnit 实践一

项目准备启用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>

View Code

看报告：

看起来不错，有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>

View Code

图：

运行还可以啊。

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

posted @ 2015-12-30 15:59 Jimson.Ma 阅读(202) 评论(0) 编辑收藏举报

刷新页面返回顶部

QUnit 实践一

公告