rewrote the testHelper

tests/frontend/helper.js

@@ -1,13 +1,13 @@
-var testHelper = {};
+var helper = {};
 
 (function(){
-  var $iframeContainer, $iframe;
+  var $iframeContainer, $iframe, $padChrome, $padOuter, $padInner;
 
-  testHelper.init = function(){
+  helper.init = function(){
     $iframeContainer = $("#iframe-container");
   }
 
-  testHelper.randomString = function randomString(len)
+  helper.randomString = function randomString(len)
   {
     var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
     var randomstring = '';
@@ -19,80 +19,120 @@ var testHelper = {};
     return randomstring;
   }
 
-  testHelper.newPad = function(cb){
+  var getFrameJQuery = function($, selector, callback){
-    var padName = "FRONTEND_TEST_" + testHelper.randomString(20);
+    //find the iframe and get its window and document
+    var $iframe = $(selector);
+    var $content = $iframe.contents();
+    var win = $iframe[0].contentWindow;
+    var doc = win.document;
+
+    //inject jquery if not already existing
+    if(win.$ === undefined){
+      helper.injectJS(doc, "/static/js/jquery.js");
+    }
+
+    helper.waitFor(function(){
+      return win.$ 
+    }).then(function(){
+      if(!(win.$ && win.$.fn && win.$.fn.sendkeys)){
+        helper.injectJS(doc, "/tests/frontend/sendkeys.js");
+      }
+
+      helper.waitFor(function(){
+        return (win.$ && win.$.fn && win.$.fn.sendkeys);
+      }).then(function(){
+        win.$.window = win;
+        win.$.document = doc;
+
+        callback(win.$);
+      });
+    });
+  }
+
+  helper.newPad = function(cb){
+    var padName = "FRONTEND_TEST_" + helper.randomString(20);
     $iframe = $("<iframe src='/p/" + padName + "'></iframe>");
 
     $iframeContainer.empty().append($iframe);
 
     var checkInterval;
     $iframe.load(function(){
-      checkInterval = setInterval(function(){
+      helper.waitFor(function(){
-        var loaded = false;
+        return !$iframe.contents().find("#editorloadingbox").is(":visible");
+      }).then(function(){
+        //INCEPTION!!!
+        getFrameJQuery($, '#iframe-container iframe', function(_$padChrome){
+          $padChrome = _$padChrome;
 
-        try {
+          getFrameJQuery($padChrome, 'iframe.[name="ace_outer"]', function(_$padOuter){
-          //check if loading div is hidden
+            $padOuter = _$padOuter;
-          loaded = !testHelper.$getPadChrome().find("#editorloadingbox").is(":visible");
-        } catch(e){}
 
-        if(loaded){
+            getFrameJQuery($padOuter, 'iframe.[name="ace_inner"]', function(_$padInner){
-          clearTimeout(timeout);
+              $padInner = _$padInner;
-          clearInterval(checkInterval);
 
-          cb(null, {name: padName});
+              cb();
-        }
+            });
-      }, 100);
+          });
+        })
+      });
     });
-
-    var timeout = setTimeout(function(){
-      if(checkInterval) clearInterval(checkInterval);
-      cb(new Error("Pad didn't load in 10 seconds"));
-    }, 10000);
 
     return padName;
   }
 
-  testHelper.$getPadChrome = function(){
+  //helper to inject javascript
-    var win = $iframe[0].contentWindow;
+  helper.injectJS = function(doc, url){
-    var $content = $iframe.contents();
+    var script = doc.createElement( 'script' );
-    $content.window = win;
+    script.type = 'text/javascript';
-
+    script.src = url;
-    return $content;
+    doc.body.appendChild(script);
   }
 
-  testHelper.$getPadOuter = function(){
+  helper.waitFor = function(conditionFunc, _timeoutTime, _intervalTime){
-    var $iframe = testHelper.$getPadChrome().find('iframe.[name="ace_outer"]');
+    var timeoutTime = _timeoutTime || 1000;
-    var win = $iframe[0].contentWindow;
+    var intervalTime = _intervalTime || 10;
-    var $content = $iframe.contents();
-    $content.window = win;
     
-    return $content;
+    var callback = function(){}
+    var returnObj = { then: function(_callback){ 
+      callback = _callback;
+    }}
+
+    var intervalCheck = setInterval(function(){
+      var passed = conditionFunc();
+
+      if(passed){
+        clearInterval(intervalCheck);
+        clearTimeout(timeout);
+
+        callback(passed);
+      }
+    }, intervalTime);
+
+    var timeout = setTimeout(function(){
+      clearInterval(intervalCheck);
+      throw Error("wait for condition never became true");
+    }, timeoutTime);
+
+    return returnObj;
   }
 
-  testHelper.$getPadInner = function(){
+  helper.log = function(){
-    var $iframe = testHelper.$getPadOuter().find('iframe.[name="ace_inner"]');
+    if(console && console.log){
-    var win = $iframe[0].contentWindow;
+      console.log.apply(console, arguments);
-    var $content = $iframe.contents();
+    }
-    $content.window = win;
-
-    return $content;
   }
 
-  // copied from http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse
+  helper.jQueryOf = function(name){
-  // selects the whole dom element you give it
+    switch(name){
-  testHelper.selectText = function(element, $iframe){
+      case "chrome":
-    var doc = $iframe[0], win = $iframe.window, range, selection;
+        return $padChrome;
-
+        break;
-    if (doc.body.createTextRange) { //ms
+      case "outer":
-        range = doc.body.createTextRange();
+        return $padOuter;
-        range.moveToElementText(element);
+        break;
-        range.select();
+      case "inner":
-    } else if (win.getSelection) { //all others
+        return $padInner;
-        selection = win.getSelection();        
+        break;
-        range = doc.createRange();
-        range.selectNodeContents(element);
-        selection.removeAllRanges();
-        selection.addRange(range);
     }
   } 
 })()

tests/frontend/runner.js

@@ -3,9 +3,10 @@ $(function(){
   document.domain = document.domain;
 
   //initalize the test helper
-  testHelper.init();
+  helper.init();
 
   //configure and start the test framework
+  mocha.timeout(5000);
   mocha.ignoreLeaks();
 	mocha.run();
 });

tests/frontend/specs/button_bold.js

@@ -1,33 +1,34 @@
 describe("bold button", function(){
   //create a new pad before each test run
   beforeEach(function(cb){
-    testHelper.newPad(cb);
+    this.timeout(5000);
+    helper.newPad(cb);
   });
 
   it("makes text bold", function() {
-    //get the inner iframe
+    var inner$ = helper.jQueryOf("inner"); 
-    var $inner = testHelper.$getPadInner();
+    var chrome$ = helper.jQueryOf("chrome"); 
 
     //get the first text element out of the inner iframe
-    var firstTextElement = $inner.find("div").first();
+    var $firstTextElement = inner$("div").first();
     
     //select this text element
-    testHelper.selectText(firstTextElement[0], $inner);
+    $firstTextElement.sendkeys('{selectall}');
 
     //get the bold button and click it
-    var $boldButton = testHelper.$getPadChrome().find(".buttonicon-bold");
+    var $boldButton = chrome$(".buttonicon-bold");
     $boldButton.click();
     
     //ace creates a new dom element when you press a button, so just get the first text element again
-    var newFirstTextElement = $inner.find("div").first();
+    var $newFirstTextElement = inner$("div").first();
     
     // is there a <b> element now?
-    var isBold = newFirstTextElement.find("b").length === 1;
+    var isBold = $newFirstTextElement.find("b").length === 1;
 
     //expect it to be bold
     expect(isBold).to.be(true);
 
     //make sure the text hasn't changed
-    expect(newFirstTextElement.text()).to.eql(firstTextElement.text());
+    expect($newFirstTextElement.text()).to.eql($firstTextElement.text());
   });
 });