very ugly proof-of-concept of offline test with Qunit

test/index.html

@@ -5,31 +5,162 @@
       <title>Integration Test</title>
       <link rel="stylesheet" type="text/css" href="ext/qunit/qunit.css">
       <link rel="stylesheet" type="text/css" href="setup/jqm_qunit.css">
+      <style type="text/css">
+        iframe {visibility: hidden;}
+      </style>
+
+
       <script type="text/javascript" src="ext/qunit/qunit.js"></script>
       <script type="text/javascript" src="ext/jquery/jquery.js"></script>
+      <script type="text/javascript" src="ext/jquery-mobile/jquery-mobile.js"></script>
       <script type="text/javascript" src="setup/jquery.testHelper.js"></script>
 
       <script type="text/javascript">
+        var contentLoaded;
+
+        // stay idle
         QUnit.config.autostart = false;
-        $(document).ready(function() {
-          $("#testbed").load(function () {
-            var w, d, j;
-            console.log("loaded")
-            w = this.contentWindow;
-            d = this.contentDocument;
-            j = this.contentWindow.$;
-
-            console.log(w)
-            console.log(d)
-            console.log(j)
-            h = function (window, document, $) {
+
+        // DOMContentLoaded
+        contentLoaded = function (win, fn) {
+          var done = false,
+            top = true,
+            doc = win.document,
+            root = doc.documentElement,
+            add = doc.addEventListener ? 'addEventListener' : 'attachEvent',
+            rem = doc.addEventListener ? 'removeEventListener' : 'detachEvent',
+            pre = doc.addEventListener ? '' : 'on',
+            init = function (e) {
+              if (e.type === 'readystatechange' && doc.readyState !== 'complete') {
+                return;
+              }
+              (e.type === 'load' ? win : doc)[rem](pre + e.type, init, false);
+              if (!done) {
+                done = true;
+                fn.call(win, e.type || e);
+              }
+            },
+            poll = function () {
+              try {
+                root.doScroll('left');
+              } catch (e) {
+                window.setTimeout(poll, 50);
+                return;
+              }
+              init('poll');
+            };
+
+          if (doc.readyState === 'complete') {
+            fn.call(win, 'lazy');
+          } else {
+            if (doc.createEventObject && root.doScroll) {
+              try {
+                top = !win.frameElement;
+              } catch (ignore) {}
+              if (top) {
+                poll();
+              }
+            }
+            doc[add](pre + 'DOMContentLoaded', init, false);
+            doc[add](pre + 'readystatechange', init, false);
+            win[add](pre + 'load', init, false);
+          }
+        };
+
+        // =================== initialize ===================
+        contentLoaded(window, function () {
+          var frame = document.getElementById("testbed");
+          frame.onload = function (e) {
+            var el, w, d, j, trigger, helper;
+
+            el = e.target;
+            w = el.contentWindow;
+            d = el.contentDocument;
+            j = el.contentWindow.$;
+            helper = $.testHelper;
+            // ======================= start here ===========================
+            trigger = function (window, document, $, testHelper) {
+              var menu_button;
+
               QUnit.start();
+              $.testHelper = testHelper;
+
+              // just a dummy....
+              window.setTimeout(function () {
+
+                // ========================
+                module( "Network Section" );
+
+                asyncTest( "Navigate to network page", function() {
+                  var network_page, menu_button;
 
-              console.log(document.getElementsByTagName("div"));
+                  expect( 8 );
+
+                  $.testHelper.pageSequence([
+                    function() {
+                      menu_button= $("#global-header").find("a[data-rel='panel']");
+                      ok( menu_button.length === 1, "Menu button exists, application init rendered correctly");
+                      menu_button.trigger( "click" );
+                    },
+                    function() {
+                      setTimeout(function() {
+                        ok( $("#global-panel").hasClass("ui-panel-open"), "panel opens when clicking menu button" );
+                        $("a[href='#networks']").trigger("click");
+                      }, 800);
+                    },
+                    function(){
+                      setTimeout(function(){
+                        network_page = $("div.ui-page").last();
+                        ok( network_page.length === 1, "network page loaded" );
+                      }, 800);
+                    },
+                    function(){
+                      var table, new_button;
+                      setTimeout(function(){
+                        table = network_page.find("table");
+                        new_button = $("a[href='#networks/new']");
+                        ok( table.length === 1, "network table generated" );
+                        ok( table.find("tbody tr").length > 0, "network table has records (zero result record, or 1+ records" );
+                        ok( new_button.length === 1, "New network button available");
+                        new_button.trigger("click");
+                      }, 1000);
+                    },
+                    function() {
+                      var new_network, form, input, submit;
+                      setTimeout(function(){
+                        new_network = $("div.ui-page").last();
+                        form = new_network.find("form");
+                        input = form.find("div.ui-input-text input[type='text']");
+                        submit = form.find("input[type='submit']");
+                        ok( input.length === 1, "new network title input exits");
+                        input.val("foobarbazbam");
+                        submit.trigger("click");
+                      }, 800);
+                    },
+                    function() {
+                      var i, network_page, inputs, test_value;
+                      setTimeout(function() {
+                        network_page = $("div.ui-page").last();
+                        inputs = network_page.find("input");
+                        for (i = 0; i < inputs.length; i += 1) {
+                          if (inputs.eq(i)[0].value === "foobarbazbam") {
+                            test_value = true;
+                          }
+                        }
+                        ok(test_value, "network has been generated and the name is matching what was entered before");
+                      }, 1000);
+                    },
+                    function() {
+                      start();
+                    }
+                  ]);
+                })
+              }, 1000);
             };
 
-            h(w, d, j);
-          });
+            // let's go
+            trigger(w, d, j, helper);
+          };
         });
 
 
@@ -37,11 +168,10 @@
     </head>
 
     <body>
+      <div id="qunit"></div>
       <div id="playground">
         <iframe id="testbed" src="../index.html">
           Your browser doesn't support Iframes
       </div>
-      <div id="qunit"></div>
-
   </body>
 </html>
\ No newline at end of file