Introduction to YUI Test

README.md

Introduction to the YUI Test

intro_yui_test.md

YUI Test

• each pr trigger a test Case
• integrated with YUI/Travis-CI
• workflow
  • for Developer: build and test your change
  • for Reviewer: Build and test the changes locally

YUI Test

YUI Test

Assertions

• Equality Assertions
  • ==
  • areEqual
  • areNotEqual
• Sameness Assertions
  • ===
  • areSame
  • areNotSame
• Data Type Assertions
  • isArray() - passes only if the value is an instance of Array.
  • isBoolean() - passes only if the value is a Boolean.
  • isFunction() - passes only if the value is a function.
  • isNumber() - passes only if the value is a number.
  • isObject() - passes only if the value is an object or a function.
  • isString() - passes only if the value is a string.
• Special Value Assertions
• Forced Failures

var equalCase = new Y.Test.Case({
    name: "=== TestCase Name ===",
    testEqualityAsserts : function () {
        Y.Assert.areEqual(5, 5);     //passes
        Y.Assert.areEqual(5, "5");     //passes
        Y.Assert.areNotEqual(5, 6);  //passes
        Y.Assert.areEqual(5, 6, "Five was expected."); //fails
    }
});

suiteAssert.add(equalCase);

Mock

• Mock Object
  • Mock.expect()
  • Mock.verify()
• Special Argument Values
  • Mock.Value.Any - any value is valid regardless of type.
  • Mock.Value.String - any string value is valid.
  • Mock.Value.Number - any number value is valid.
  • Mock.Value.Boolean - any Boolean value is valid.
  • Mock.Value.Object - any non-null object value is valid.
  • Mock.Value.Function - any function value is valid.

//test case for testing the above function
var testCase = new Y.Test.Case({

    name: "logToServer Tests",
    testPassingDataToXhr : function () {
        var Mock = Y.Test.Mock,
            mockXhr = Y.Test.Mock();
        
        //I expect the open() method to be called with the given arguments
        Mock.expect(mockXhr, {
            method: "open",
            args: ["get", "/log.php?msg=hi", false]                            
        });
        
        //I expect the send() method to be called with the given arguments
        Mock.expect(mockXhr, {
            method: "send",
            args: [null]                            
        });
        
        //now call the function
        logToServer("hi", mockXhr);
        
        //verify the expectations were met
        Mock.verify(mockXhr);                            
    }
});

Asynchronous Tests

YUI Test allows you to pause a currently running test and resume either after a set amount of time or at another designated time. The Case object has a method called wait(). When wait() is called, the test immediately exits (meaning that any code after that point will be ignored) and waits for a signal to resume the test.

var testCase = new Y.Test.Case({

    name: "TestCase Name",
    
    //---------------------------------------------
    // Tests
    //---------------------------------------------
    testAnimation : function (){
        //animate width to 400px
        var myAnim = new Y.Anim({
            node: '#testDiv', 
            to: { 
                width: 400
            },
            duration: 3
        });
        
        var test = this; 
        
        //assign oncomplete handler
        myAnim.on("end", function(){
            //tell the TestRunner to resume
            test.resume(function(){
                Assert.areEqual(myAnim.get("node").get("offsetWidth"), 400, "Width of the DIV should be 400.");
            });
        
        });

        //start the animation
        myAnim.run();
        
        //wait until something happens
        this.wait(3100);
    
    }  
});

run task

Y.Test.Runner.add(suite);
Y.Test.Runner.run();

// remove cases added into the runner
Y.Test.Runner.clear();

yogi

how yui is using it

• integrated with YUI/Travis-CI
• test with PhantomJS (with grover)
• grunt task grunt-yui-contrib

module testing from the command line or ci With yogi, automated/cli YUI testing as never been easier. It's this simple:

✍  cd ~/github/yui3/src/node
lizhiye@localhost: ~/github/yui3/src/node
✍  yogi test
yogi [info]  using [email protected] on [email protected]
yogi [info]  using module: node
yogi [info]  prepping grover tests
yogi [info]  adding tests route
yogi [info]  launching xdr server on port 5001
yogi [info]  listening on: http://127.0.0.1:5000
Starting Grover on 2 files with [email protected]
  Running 15 concurrent tests at a time.
✔ [Node: Data]: Passed: 25 Failed: 0 Total: 25 (ignored 0) (0.271 seconds)
✔ [Node]: Passed: 260 Failed: 0 Total: 260 (ignored 0) (3.646 seconds)
----------------------------------------------------------------
✔ [Total]: Passed: 285 Failed: 0 Total: 285 (ignored 0) (3.917 seconds)
  [Grover Execution Timer] 5.672 seconds
yogi [info]  grover tests complete

grover

• command line tool for running YUITest html files inside of PhantomJS
• https://github.com/yui/grover

Reference

• yogi

yui-test-asynchronous.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Node Test Suite</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="http://yui.yahooapis.com/3.16.0/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

    <div id="yui-log"></div>
    <div id="testDiv"></div>
<script type="text/javascript">
    YUI({
        coverage: ['node', 'node-load'],
        filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'raw'

    }).use('yui', 'node', 'test-console', 'anim', function(Y) {
        var Assert = Y.Assert,
            ArrayAssert = Y.ArrayAssert,
            ObjectAssert = Y.ObjectAssert;

        Y.Test.Runner.setName('MTFE Test');

        var suite = new Y.Test.Suite('Asynchronous Test: wait()');
        
        var testCase = new Y.Test.Case({

            name: "TestCase Name",
            
            //---------------------------------------------
            // Tests
            //---------------------------------------------
            testAnimation : function (){
                //animate width to 400px
                var myAnim = new Y.Anim({
                    node: '#testDiv', 
                    to: { 
                        width: 400
                    },
                    duration: 3
                });
                
                var test = this; 
                
                //assign oncomplete handler
                myAnim.on("end", function(){
                    //tell the TestRunner to resume
                    test.resume(function(){
                        Assert.areEqual(myAnim.get("node").get("offsetWidth"), 400, "Width of the DIV should be 400.");
                    });
                
                });

                //start the animation
                myAnim.run();
                
                //wait until something happens
                this.wait(3100);
            
            }  
        });


        suite.add(testCase);
        Y.Test.Runner.add(suite);
        Y.Test.Runner.run();
    });
</script>
</body>
</html>

yui-test-mock.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Node Test Suite</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="http://yui.yahooapis.com/3.16.0/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

    <div id="yui-log"></div>
    <div id="dom-test"></div>
<script type="text/javascript">
    YUI({
        coverage: ['node', 'node-load'],
        filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'raw'

    }).use('yui', 'node', 'test-console', function(Y) {
        var Assert = Y.Assert,
            ArrayAssert = Y.ArrayAssert,
            ObjectAssert = Y.ObjectAssert;

        Y.Test.Runner.setName('MTFE Test');

        var suite = new Y.Test.Suite('Y.Test.Mock');

        function logToServer(message, xhr){
            xhr.open("get", "/log.php?msg=" + encodeURIComponent(message), true);
            xhr.send(null);
        }

        //test case for testing the above function
        var testCase = new Y.Test.Case({

            name: "logToServer Tests",
            testPassingDataToXhr : function () {
                var Mock = Y.Test.Mock,
                    mockXhr = Y.Test.Mock();
                
                //I expect the open() method to be called with the given arguments
                Mock.expect(mockXhr, {
                    method: "open",
                    //args: ["get", "/log.php?msg=hi", false]                            
                    //args: ["get", "/log.php?msg=hi", true]                            
                    args: [Y.Test.Mock.Value.String, "/log.php?msg=hi", true]                            
                });
                
                //I expect the send() method to be called with the given arguments
                Mock.expect(mockXhr, {
                    method: "send",
                    args: [null]                            
                });
                
                //now call the function
                logToServer("hi", mockXhr);
                
                //verify the expectations were met
                Mock.verify(mockXhr);                            
            }
        });

        suite.add(testCase);
        Y.Test.Runner.add(suite);
        Y.Test.Runner.run();
    });
</script>
</body>
</html>

yui-test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Node Test Suite</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="http://yui.yahooapis.com/3.16.0/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

    <div id="yui-log"></div>
    <div id="dom-test"></div>
<script type="text/javascript">
    YUI({
        coverage: ['node', 'node-load'],
        filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'raw'

    }).use('yui', 'node', 'test-console', function(Y) {
        var Assert = Y.Assert,
            ArrayAssert = Y.ArrayAssert,
            ObjectAssert = Y.ObjectAssert;

        Y.Test.Runner.setName('MTFE Test');

        var suite = new Y.Test.Suite('YUI Test Introduce');
        suite.add(new Y.Test.Case({
            name: "TestCase Name",
            setUp : function () {
                this.data = {
                    name : "Nicholas",
                    age : 28
                };
            },
            tearDown : function () {
                delete this.data;
            },
            'Assertions Demo': function () {
                Assert.areEqual("Nicholas", this.data.name, "Name should be 'Nicholas'");
                Assert.isTypeOf('string', this.data.name, "Name should be `Number`");
            },
            testAge: function () {
                Assert.areEqual(28, this.data.age, "Age should be 28");
            }
        }));

        // Test dom
        suite.add(new Y.Test.Case({
            name: 'Test Dom',
            '==== test setData workable ===': function() {
                var nd = Y.Node.create('<div/>'); 
                nd.setData('foo');
                Y.Assert.areEqual('foo', nd.getData());
            },

            '=== set Style ===': function() {
                var nd = Y.Node.create('<div/>'); 
                nd.setStyle('display', 'inline');
                Y.Assert.areEqual('inline', nd.getStyle('display'));
            }
        }));

        //var suiteAssert = new Y.Test.Suite('Demo: Assertion');
        //// Equality Assertions
        //var equalCase = new Y.Test.Case({
        //    name: "TestCase Name",
        //    '=== testEqualityAsserts ===' : function () {
        //        Assert.areEqual(5, 5);     //passes
        //        Assert.areEqual(5, "5");     //passes
        //        Assert.areNotEqual(5, 6);  //passes
        //        Assert.isNumber([], '[] is not a number'); // fail
        //        Assert.areSame(5, "5", '5 and "5" are not same');     // fails
        //    }
        //});
        //suiteAssert.add(equalCase);

        //suite.add(suiteAssert);
        Y.Test.Runner.add(suite);
        Y.Test.Runner.run();
    });
</script>
</body>
</html>