libretic
/
etherpad-lite
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

major restructering of the front end test framework

This commit is contained in:
Peter 'Pita' Martischka 2012-10-08 00:34:29 +02:00
parent 6587852138
commit ca6ebd6151
11 changed files with 267 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/node/hooks/express/tests.js
View File

@ -6,6 +6,7 @@ exports.expressCreateServer = function (hook_name, args, cb) {
if (subPath == ""){
subPath = "index.html"
}
subPath = subPath.split("?")[0];
var filePath = path.normalize(__dirname + "/../../../../tests/frontend/")
filePath += subPath.replace("..", "");

159
tests/frontend/helper.js
View File

@ -1,10 +1,20 @@
var helper = {};
(function(){
var $iframeContainer, $iframe, $padChrome, $padOuter, $padInner;
var $iframeContainer, $iframe, jsLibraries = {};
helper.init = function(){
helper.init = function(cb){
$iframeContainer = $("#iframe-container");
$.get('/static/js/jquery.js').done(function(code){
jsLibraries["jquery"] = code;
$.get('/tests/frontend/sendkeys.js').done(function(code){
jsLibraries["sendkeys"] = code;
cb();
});
});
}
helper.randomString = function randomString(len)
@ -19,125 +29,106 @@ var helper = {};
return randomstring;
}
var getFrameJQuery = function($, selector, callback){
//find the iframe and get its window and document
var $iframe = $(selector);
var $content = $iframe.contents();
var getFrameJQuery = function($iframe){
/*
I tried over 9000 ways to inject javascript into iframes.
This is the only way I found that worked in IE 7+8+9, FF and Chrome
*/
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");
}
//IE 8+9 Hack to make eval appear
//http://stackoverflow.com/questions/2720444/why-does-this-window-object-not-have-the-eval-function
win.execScript && win.execScript("null");
helper.waitFor(function(){
return win.$
}).then(function(){
if(!(win.$ && win.$.fn && win.$.fn.sendkeys)){
helper.injectJS(doc, "/tests/frontend/sendkeys.js");
}
win.eval(jsLibraries["jquery"]);
win.eval(jsLibraries["sendkeys"]);
win.$.window = win;
win.$.document = doc;
helper.waitFor(function(){
return (win.$ && win.$.fn && win.$.fn.sendkeys);
}).then(function(){
win.$.window = win;
win.$.document = doc;
callback(win.$);
});
});
return win.$;
}
helper.newPad = function(cb){
var padName = "FRONTEND_TEST_" + helper.randomString(20);
$iframe = $("<iframe src='/p/" + padName + "'></iframe>");
//clean up inner iframe references
helper.padChrome$ = helper.padOuter$ = helper.padInner$ = null;
$iframeContainer.empty().append($iframe);
var checkInterval;
$iframe.load(function(){
helper.waitFor(function(){
return !$iframe.contents().find("#editorloadingbox").is(":visible");
}).then(function(){
//INCEPTION!!!
getFrameJQuery($, '#iframe-container iframe', function(_$padChrome){
$padChrome = _$padChrome;
getFrameJQuery($padChrome, 'iframe.[name="ace_outer"]', function(_$padOuter){
$padOuter = _$padOuter;
getFrameJQuery($padOuter, 'iframe.[name="ace_inner"]', function(_$padInner){
$padInner = _$padInner;
cb();
});
});
})
//clean up iframes properly to prevent IE from memoryleaking
$iframeContainer.find("iframe").purgeFrame().done(function(){
$iframeContainer.append($iframe);
$iframe.one('load', function(){
helper.waitFor(function(){
return !$iframe.contents().find("#editorloadingbox").is(":visible");
}, 4000).done(function(){
helper.padChrome$ = getFrameJQuery( $('#iframe-container iframe'));
helper.padOuter$ = getFrameJQuery(helper.padChrome$('iframe.[name="ace_outer"]'));
helper.padInner$ = getFrameJQuery( helper.padOuter$('iframe.[name="ace_inner"]'));
cb();
}).fail(function(){
throw new Error("Pad never loaded");
});
});
});
});
return padName;
}
//helper to inject javascript
helper.injectJS = function(doc, url){
var script = doc.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
doc.body.appendChild(script);
}
helper.waitFor = function(conditionFunc, _timeoutTime, _intervalTime){
var timeoutTime = _timeoutTime || 1000;
var intervalTime = _intervalTime || 10;
var deferred = $.Deferred();
var callback = function(){}
var returnObj = { then: function(_callback){
callback = _callback;
}}
var _fail = deferred.fail;
var listenForFail = false;
deferred.fail = function(){
listenForFail = true;
_fail.apply(this, arguments);
}
var intervalCheck = setInterval(function(){
var passed = false;
try {
passed = conditionFunc();
} catch(e){}
passed = conditionFunc();
if(passed){
clearInterval(intervalCheck);
clearTimeout(timeout);
callback(passed);
deferred.resolve();
}
}, intervalTime);
var timeout = setTimeout(function(){
clearInterval(intervalCheck);
throw Error("wait for condition never became true");
var error = new Error("wait for condition never became true " + conditionFunc.toString());
deferred.reject(error);
if(!listenForFail){
throw error;
}
}, timeoutTime);
return returnObj;
return deferred;
}
helper.log = function(){
if(console && console.log){
console.log.apply(console, arguments);
/* Ensure console.log doesn't blow up in IE, ugly but ok for a test framework imho*/
window.console = window.console || {};
window.console.log = window.console.log || function(){}
//force usage of callbacks in it
var _it = it;
it = function(name, func){
if(func && func.length !== 1){
throw new Error("Please use always a callback with it() - " + func.toString());
}
_it.apply(null, arguments);
}
helper.jQueryOf = function(name){
switch(name){
case "chrome":
return $padChrome;
break;
case "outer":
return $padOuter;
break;
case "inner":
return $padInner;
break;
}
}
})()
})()

11
tests/frontend/index.html
View File

@ -16,13 +16,22 @@
<script src="helper.js"></script>
<script src="sendkeys.js"></script>
<script src="lib/jquery.iframe.js"></script>
<script src="specs/helper.js"></script>
<script src="specs/button_bold.js"></script>
<script src="specs/button_italic.js"></script>
<script src="specs/keystroke_urls_become_clickable.js"></script>
<script src="specs/keystroke_delete.js"></script>
<!--
<script src="specs/button_indentation.js"></script>
<script src="specs/font_type.js"></script>
<script src="specs/keystroke_urls_become_clickable.js"></script>
<script src="specs/button_bold.js"></script>
<script src="specs/button_italic.js"></script>
<script src="specs/keystroke_delete.js"></script>
<script src="specs/embed_value.js"></script>
<script src="specs/embed_value.js"></script>-->
<script src="runner.js"></script>
</html>

39
tests/frontend/lib/jquery.iframe.js Normal file
View File

@ -0,0 +1,39 @@
//copied from http://stackoverflow.com/questions/8407946/is-it-possible-to-use-iframes-in-ie-without-memory-leaks
(function($) {
$.fn.purgeFrame = function() {
var deferred;
if ($.browser.msie && parseFloat($.browser.version, 10) < 9) {
deferred = purge(this);
} else {
this.remove();
deferred = $.Deferred();
deferred.resolve();
}
return deferred;
};
function purge($frame) {
var sem = $frame.length
, deferred = $.Deferred();
$frame.load(function() {
var frame = this;
frame.contentWindow.document.innerHTML = '';
sem -= 1;
if (sem <= 0) {
$frame.remove();
deferred.resolve();
}
});
$frame.attr('src', 'about:blank');
if ($frame.length === 0) {
deferred.resolve();
}
return deferred.promise();
}
})(jQuery);

16
tests/frontend/runner.js
View File

@ -1,12 +1,14 @@
$(function(){
//allow cross iframe access
document.domain = document.domain;
if ((!$.browser.msie) && (!($.browser.mozilla && $.browser.version.indexOf("1.8.") == 0))) {
document.domain = document.domain; // for comet
}
//initalize the test helper
helper.init();
//configure and start the test framework
mocha.timeout(5000);
mocha.ignoreLeaks();
mocha.run();
helper.init(function(){
//configure and start the test framework
//mocha.suite.timeout(5000);
mocha.ignoreLeaks();
mocha.run();
});
});

10
tests/frontend/specs/button_bold.js
View File

@ -1,13 +1,13 @@
describe("bold button", function(){
//create a new pad before each test run
beforeEach(function(cb){
this.timeout(5000);
helper.newPad(cb);
this.timeout(5000);
});
it("makes text bold", function() {
var inner$ = helper.jQueryOf("inner");
var chrome$ = helper.jQueryOf("chrome");
it("makes text bold", function(done) {
var inner$ = helper.padInner$;
var chrome$ = helper.padChrome$;
//get the first text element out of the inner iframe
var $firstTextElement = inner$("div").first();
@ -30,5 +30,7 @@ describe("bold button", function(){
//make sure the text hasn't changed
expect($newFirstTextElement.text()).to.eql($firstTextElement.text());
done();
});
});

9
tests/frontend/specs/button_italic.js
View File

@ -2,11 +2,12 @@ describe("italic button", function(){
//create a new pad before each test run
beforeEach(function(cb){
helper.newPad(cb);
this.timeout(5000);
});
it("makes text italic", function() {
var inner$ = helper.jQueryOf("inner");
var chrome$ = helper.jQueryOf("chrome");
it("makes text italic", function(done) {
var inner$ = helper.padInner$;
var chrome$ = helper.padChrome$;
//get the first text element out of the inner iframe
var $firstTextElement = inner$("div").first();
@ -29,5 +30,7 @@ describe("italic button", function(){
//make sure the text hasn't changed
expect($newFirstTextElement.text()).to.eql($firstTextElement.text());
done();
});
});

13
tests/frontend/specs/font_type.js
View File

@ -2,6 +2,7 @@ describe("font select", function(){
//create a new pad before each test run
beforeEach(function(cb){
testHelper.newPad(cb);
this.timeout(5000);
});
it("makes text monospace", function() {
@ -12,6 +13,16 @@ describe("font select", function(){
var $settingsButton = testHelper.$getPadChrome().find(".buttonicon-settings");
$settingsButton.click();
//get the font selector and click it
var $viewfontmenu = testHelper.$getPadChrome().find("#viewfontmenu");
$viewfontmenu.click();
//get the monospace option and click it
var $monospaceoption = testHelper.$getPadChrome().find("[value=monospace]");
$monospaceoption.attr('selected','selected');
/*
//get the font selector and click it
var $viewfontmenu = testHelper.$getPadChrome().find("#viewfontmenu");
$viewfontmenu.click(); // this doesnt work but I left it in for posterity.
@ -22,6 +33,8 @@ describe("font select", function(){
$monospaceoption.attr('selected','selected'); // despite this being selected the event doesnt fire
$monospaceoption.click(); // this doesnt work but it should.
*/
// get the attributes of the body of the editor iframe
var bodyAttr = $inner.find("body");
var cssText = bodyAttr[0].style.cssText;

99
tests/frontend/specs/helper.js Normal file
View File

@ -0,0 +1,99 @@
describe("the test helper", function(){
describe("the newPad method", function(){
xit("doesn't leak memory if you creates iframes over and over again", function(done){
this.timeout(200000);
var times = 10;
var loadPad = function(){
helper.newPad(function(){
times--;
if(times > 0){
loadPad();
} else {
done();
}
})
}
loadPad();
});
it("gives me 3 jquery instances of chrome, outer and inner", function(done){
this.timeout(5000);
helper.newPad(function(){
//check if the jquery selectors have the desired elements
expect(helper.padChrome$("#editbar").length).to.be(1);
expect(helper.padOuter$("#outerdocbody").length).to.be(1);
expect(helper.padInner$("#innerdocbody").length).to.be(1);
//check if the document object was set correctly
expect(helper.padChrome$.window.document).to.be(helper.padChrome$.document);
expect(helper.padOuter$.window.document).to.be(helper.padOuter$.document);
expect(helper.padInner$.window.document).to.be(helper.padInner$.document);
done();
});
});
});
describe("the waitFor method", function(){
it("takes a timeout and waits long enough", function(done){
this.timeout(2000);
var startTime = new Date().getTime();
helper.waitFor(function(){
return false;
}, 1500).fail(function(){
var duration = new Date().getTime() - startTime;
expect(duration).to.be.greaterThan(1400);
done();
});
});
it("takes an interval and checks on every interval", function(done){
this.timeout(4000);
var checks = 0;
helper.waitFor(function(){
checks++;
return false;
}, 2000, 100).fail(function(){
expect(checks).to.be.greaterThan(18);
expect(checks).to.be.lessThan(22);
done();
});
});
describe("returns a deferred object", function(){
it("it calls done after success", function(done){
helper.waitFor(function(){
return true;
}).done(function(){
done();
});
});
it("calls fail after failure", function(done){
helper.waitFor(function(){
return false;
},0).fail(function(){
done();
});
});
xit("throws if you don't listen for fails", function(done){
var onerror = window.onerror;
window.onerror = function(){
window.onerror = onerror;
done();
}
helper.waitFor(function(){
return false;
},100);
});
});
});
});

11
tests/frontend/specs/keystroke_delete.js
View File

@ -2,11 +2,12 @@ describe("delete keystroke", function(){
//create a new pad before each test run
beforeEach(function(cb){
helper.newPad(cb);
this.timeout(5000);
});
it("makes text delete", function() {
var inner$ = helper.jQueryOf("inner");
var chrome$ = helper.jQueryOf("chrome");
it("makes text delete", function(done) {
var inner$ = helper.padInner$;
var chrome$ = helper.padChrome$;
//get the first text element out of the inner iframe
var $firstTextElement = inner$("div").first();
@ -31,8 +32,6 @@ describe("delete keystroke", function(){
//expect it to be one char less in length
expect(newElementLength).to.be((elementLength-1));
//make sure the text has changed correctly
expect($newFirstTextElement.text()).to.eql(originalTextValueMinusFirstChar);
done();
});
});

19
tests/frontend/specs/keystroke_urls_become_clickable.js
View File

@ -2,11 +2,12 @@ describe("urls", function(){
//create a new pad before each test run
beforeEach(function(cb){
helper.newPad(cb);
this.timeout(5000);
});
it("when you enter an url, it becomes clickable", function(done) {
var inner$ = helper.jQueryOf("inner");
var chrome$ = helper.jQueryOf("chrome");
var inner$ = helper.padInner$;
var chrome$ = helper.padChrome$;
//get the first text element out of the inner iframe
var firstTextElement = inner$("div").first();
@ -16,18 +17,6 @@ describe("urls", function(){
firstTextElement.sendkeys('{del}'); // clear the first line
firstTextElement.sendkeys('http://etherpad.org'); // insert a URL
helper.waitFor(function(){
//ace creates a new dom element when you press a keystroke, so just get the first text element again
var newFirstTextElement = inner$("div").first();
var locatedHref = newFirstTextElement.find("a");
var isURL = locatedHref.length == 1; // if we found a URL and it is for etherpad.org
//expect it to be bold
expect(isURL).to.be(true);
//it will only come to this point if the expect statement above doesn't throw
done();
return true;
});
done();
});
});