voidfiles/actionTests.html

## actionTests.html
<!DOCTYPE html>
<html>
    <head>
        <title>Pre Script Loading Test</title>
        <!-- just getting this stuff out of the way -->
        <style type="text/css" media="screen">
            body {width: 750px;margin: 0 auto;}
            p { margin: 10px 0 5px 0;}
            .like-button{padding:5px 10px 5px 5px;border-radius:3px;background-color:#eee;color:#000;text-decoration:none;}
            .like-button .star{text-shadow:magenta 1px 1px,magenta 2px 2px,magenta 3px 3px;}
            .un-liked .star,.liked:hover .star{color:#fff;}
            .liked .star,.un-liked:hover .star{color:#000;}
        </style>
        <!-- testing frame work -->
        <script src="http://code.jquery.com/qunit/qunit-git.js" type="text/javascript"></script>
        <script type="text/javascript">
            // build your global we can use to contain all our code
            var A = {};
        </script>
        <!-- actionQueue -->
        <script src="https://raw.github.com/gist/1398040/098b5d6388e0b05ca28bbf7e95849fa208b36f17/actionQueue.js" type="text/javascript"></script>

        <!-- first test -->
        <script type="text/javascript">
            module("actionQueue");
            test("register, and queue", function() {
                expect(1); // We expect there to be 1 ok
                A.actionQueue.register(
                    'test-1-id',
                    {
                        interim: function(){
                            ok(true, 'interim function was called');
                        },
                        cleanup: function(){
                            ok(false, 'This should not be called, as we arent loading the module');
                        }
                    },
                    'test-1-id-code'
                );
                /* Now call actionQueue which will make the interm function fire */
                A.actionQueue.queue_click('test-1-id');
            });
        </script>
        <!-- second test -->
        <script type="text/javascript">
            // still testin the actionQueue module
            test("register, and load module", function() {
                expect(2);
                A.actionQueue.register(
                    'test-2-id',
                    {
                        interim: function(){
                            ok(true, 'interim function should not be called');
                        },
                        cleanup: function(){
                            ok(true, 'We are loading the module this code should run');
                        }
                    },
                    'test-2-id-code'
                );
                A.actionQueue.queue_click('test-2-id');
                /* we are going to mock a succesfull module load */
                A.actionQueue.module_loaded('test-2-id-code');
                // clear the state of the actionQueue
                A.actionQueue.refresh_module();
            });
        </script>
        <!-- second test -->
        <script type="text/javascript">
            // still testin the actionQueue module
            test("multiple module loading test", function() {
                expect(4);
                A.actionQueue.register(
                    'test-3-id',
                    {
                        interim: function(){
                            ok(true, 'interim function should not be called');
                        },
                        cleanup: function(){
                            ok(true, 'We are loading the module this code should run');
                        }
                    },
                    'test-3-id-code'
                );
                A.actionQueue.register(
                    'test-4-id',
                    {
                        interim: function(){
                            ok(true, 'interim function should not be called');
                        },
                        cleanup: function(){
                            ok(true, 'We are loading the module this code should run');
                        }
                    },
                    'test-4-id-code'
                );
                A.actionQueue.queue_click('test-3-id');
                /* we are going to mock a succesfull module load */
                A.actionQueue.module_loaded('test-3-id-code');
                A.actionQueue.queue_click('test-4-id');
                /* we are going to mock a succesfull module load */
                A.actionQueue.module_loaded('test-4-id-code');
                // clear the state of the actionQueue
                A.actionQueue.refresh_module();
            });
        </script>
    </head>
    <body>
        <h1>Testing Pre Script Loading</h1>
        <p>A simple like button</p>
        <p>
            <a href='#' id='like-button' class='like-button un-liked'>
                <span class='star'>&#9733;</span>
                <span id='like-button-text' class='text'>Like</span>
            </a>
        </p>
        <!-- third test with real markup -->
        <script type="text/javascript">
            // This last test needs to go after the markup.
            test("Try using a real markup.", function() {
                expect(2);
                // okay so now we have already loaded up register handler in the previous test
                // we don't need another one. Just want to test that when the module load code is called,
                // we are calling the interim funciton
                A.actionQueue.register(
                    'like-button',
                    {
                        interim: function(id){
                            var element = document.getElementById(id);
                            element.className = 'like-button liked';
                            ok(true, 'going to update the dom');
                        },
                        cleanup: function(id){
                            var element = document.getElementById('like-button-text');
                            element.innerHTML = 'Done!';
                            ok(true, 'the module has loaded');
                        }
                    },
                    'like-handler'
                );
                // once we get the dom, we will attach and onclick handler;
                var like_button = document.getElementById('like-button');
                like_button.onclick = function(){
                    A.actionQueue.queue_click(this.id);
                };
                // Then try and fire it;
                like_button.onclick();
                // Then load the module handling code
                // create a fake delay
                stop();
                setTimeout(function(){
                    start();
                    A.actionQueue.module_loaded('like-handler');
                }, 2000);
            });
        </script>
        <div class='qunit-output'>
            <h1 id="qunit-header">QUnit example</h1>
            <h2 id="qunit-banner"></h2>
            <h2 id="qunit-userAgent"></h2>
            <ol id="qunit-tests"></ol>
        </div>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Pre Script Loading Test</title>
	<!-- just getting this stuff out of the way -->
	<style type="text/css" media="screen">
	body {width: 750px;margin: 0 auto;}
	p { margin: 10px 0 5px 0;}
	.like-button{padding:5px 10px 5px 5px;border-radius:3px;background-color:#eee;color:#000;text-decoration:none;}
	.like-button .star{text-shadow:magenta 1px 1px,magenta 2px 2px,magenta 3px 3px;}
	.un-liked .star,.liked:hover .star{color:#fff;}
	.liked .star,.un-liked:hover .star{color:#000;}
	</style>
	<!-- testing frame work -->
	<script src="http://code.jquery.com/qunit/qunit-git.js" type="text/javascript"></script>
	<script type="text/javascript">
	// build your global we can use to contain all our code
	var A = {};
	</script>
	<!-- actionQueue -->
	<script src="https://raw.github.com/gist/1398040/098b5d6388e0b05ca28bbf7e95849fa208b36f17/actionQueue.js" type="text/javascript"></script>

	<!-- first test -->
	<script type="text/javascript">
	module("actionQueue");
	test("register, and queue", function() {
	expect(1); // We expect there to be 1 ok
	A.actionQueue.register(
	'test-1-id',
	{
	interim: function(){
	ok(true, 'interim function was called');
	},
	cleanup: function(){
	ok(false, 'This should not be called, as we arent loading the module');
	}
	},
	'test-1-id-code'
	);
	/* Now call actionQueue which will make the interm function fire */
	A.actionQueue.queue_click('test-1-id');
	});
	</script>
	<!-- second test -->
	<script type="text/javascript">
	// still testin the actionQueue module
	test("register, and load module", function() {
	expect(2);
	A.actionQueue.register(
	'test-2-id',
	{
	interim: function(){
	ok(true, 'interim function should not be called');
	},
	cleanup: function(){
	ok(true, 'We are loading the module this code should run');
	}
	},
	'test-2-id-code'
	);
	A.actionQueue.queue_click('test-2-id');
	/* we are going to mock a succesfull module load */
	A.actionQueue.module_loaded('test-2-id-code');
	// clear the state of the actionQueue
	A.actionQueue.refresh_module();
	});
	</script>
	<!-- second test -->
	<script type="text/javascript">
	// still testin the actionQueue module
	test("multiple module loading test", function() {
	expect(4);
	A.actionQueue.register(
	'test-3-id',
	{
	interim: function(){
	ok(true, 'interim function should not be called');
	},
	cleanup: function(){
	ok(true, 'We are loading the module this code should run');
	}
	},
	'test-3-id-code'
	);
	A.actionQueue.register(
	'test-4-id',
	{
	interim: function(){
	ok(true, 'interim function should not be called');
	},
	cleanup: function(){
	ok(true, 'We are loading the module this code should run');
	}
	},
	'test-4-id-code'
	);
	A.actionQueue.queue_click('test-3-id');
	/* we are going to mock a succesfull module load */
	A.actionQueue.module_loaded('test-3-id-code');
	A.actionQueue.queue_click('test-4-id');
	/* we are going to mock a succesfull module load */
	A.actionQueue.module_loaded('test-4-id-code');
	// clear the state of the actionQueue
	A.actionQueue.refresh_module();
	});
	</script>
	</head>
	<body>
	<h1>Testing Pre Script Loading</h1>
	<p>A simple like button</p>
	<p>
	<a href='#' id='like-button' class='like-button un-liked'>
	<span class='star'>★</span>
	<span id='like-button-text' class='text'>Like</span>
	</a>
	</p>
	<!-- third test with real markup -->
	<script type="text/javascript">
	// This last test needs to go after the markup.
	test("Try using a real markup.", function() {
	expect(2);
	// okay so now we have already loaded up register handler in the previous test
	// we don't need another one. Just want to test that when the module load code is called,
	// we are calling the interim funciton
	A.actionQueue.register(
	'like-button',
	{
	interim: function(id){
	var element = document.getElementById(id);
	element.className = 'like-button liked';
	ok(true, 'going to update the dom');
	},
	cleanup: function(id){
	var element = document.getElementById('like-button-text');
	element.innerHTML = 'Done!';
	ok(true, 'the module has loaded');
	}
	},
	'like-handler'
	);
	// once we get the dom, we will attach and onclick handler;
	var like_button = document.getElementById('like-button');
	like_button.onclick = function(){
	A.actionQueue.queue_click(this.id);
	};
	// Then try and fire it;
	like_button.onclick();
	// Then load the module handling code
	// create a fake delay
	stop();
	setTimeout(function(){
	start();
	A.actionQueue.module_loaded('like-handler');
	}, 2000);
	});
	</script>
	<div class='qunit-output'>
	<h1 id="qunit-header">QUnit example</h1>
	<h2 id="qunit-banner"></h2>
	<h2 id="qunit-userAgent"></h2>
	<ol id="qunit-tests"></ol>
	</div>
	</body>
	</html>