mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-01-19 14:13:34 +01:00
Setted up an enviroment for frontend tests, first steps
This commit is contained in:
Peter 'Pita' Martischka
parent
3578e36616
commit
ba4ebbba3b
9 changed files with 6501 additions and 0 deletions
|
|
@ -13,6 +13,7 @@
|
||||||
{ "name": "importexport", "hooks": { "expressCreateServer": "ep_etherpad-lite/node/hooks/express/importexport:expressCreateServer" } },
|
{ "name": "importexport", "hooks": { "expressCreateServer": "ep_etherpad-lite/node/hooks/express/importexport:expressCreateServer" } },
|
||||||
{ "name": "errorhandling", "hooks": { "expressCreateServer": "ep_etherpad-lite/node/hooks/express/errorhandling:expressCreateServer" } },
|
{ "name": "errorhandling", "hooks": { "expressCreateServer": "ep_etherpad-lite/node/hooks/express/errorhandling:expressCreateServer" } },
|
||||||
{ "name": "socketio", "hooks": { "expressCreateServer": "ep_etherpad-lite/node/hooks/express/socketio:expressCreateServer" } },
|
{ "name": "socketio", "hooks": { "expressCreateServer": "ep_etherpad-lite/node/hooks/express/socketio:expressCreateServer" } },
|
||||||
|
{ "name": "tests", "hooks": { "expressCreateServer": "ep_etherpad-lite/node/hooks/express/tests:expressCreateServer" } },
|
||||||
{ "name": "adminplugins", "hooks": {
|
{ "name": "adminplugins", "hooks": {
|
||||||
"expressCreateServer": "ep_etherpad-lite/node/hooks/express/adminplugins:expressCreateServer",
|
"expressCreateServer": "ep_etherpad-lite/node/hooks/express/adminplugins:expressCreateServer",
|
||||||
"socketio": "ep_etherpad-lite/node/hooks/express/adminplugins:socketio" } }
|
"socketio": "ep_etherpad-lite/node/hooks/express/adminplugins:socketio" } }
|
||||||
|
|
|
||||||
15
src/node/hooks/express/tests.js
Normal file
15
src/node/hooks/express/tests.js
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
var path = require("path");
|
||||||
|
|
||||||
|
exports.expressCreateServer = function (hook_name, args, cb) {
|
||||||
|
args.app.get('/tests/frontend/*', function (req, res) {
|
||||||
|
var subPath = req.url.substr("/tests/frontend".length);
|
||||||
|
if (subPath == ""){
|
||||||
|
subPath = "index.html"
|
||||||
|
}
|
||||||
|
|
||||||
|
var filePath = path.normalize(__dirname + "/../../../../tests/frontend/")
|
||||||
|
filePath += subPath.replace("..", "");
|
||||||
|
|
||||||
|
res.sendfile(filePath);
|
||||||
|
});
|
||||||
|
}
|
||||||
80
tests/frontend/helper.js
Normal file
80
tests/frontend/helper.js
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
var testHelper = {};
|
||||||
|
|
||||||
|
(function(){
|
||||||
|
var $iframeContainer = $("#iframe-container"), $iframe;
|
||||||
|
|
||||||
|
testHelper.randomString = function randomString(len)
|
||||||
|
{
|
||||||
|
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
|
||||||
|
var randomstring = '';
|
||||||
|
for (var i = 0; i < len; i++)
|
||||||
|
{
|
||||||
|
var rnum = Math.floor(Math.random() * chars.length);
|
||||||
|
randomstring += chars.substring(rnum, rnum + 1);
|
||||||
|
}
|
||||||
|
return randomstring;
|
||||||
|
}
|
||||||
|
|
||||||
|
testHelper.newPad = function(cb){
|
||||||
|
var padName = "FRONTEND_TEST_" + testHelper.randomString(20);
|
||||||
|
$iframe = $("<iframe src='/p/" + padName + "'></iframe>")
|
||||||
|
|
||||||
|
$iframeContainer.empty().append($iframe);
|
||||||
|
|
||||||
|
var checkInterval;
|
||||||
|
$iframe.load(function(){
|
||||||
|
checkInterval = setInterval(function(){
|
||||||
|
var loaded = false;
|
||||||
|
|
||||||
|
try {
|
||||||
|
//check if loading div is hidden
|
||||||
|
loaded = !testHelper.$getPadChrome().find("#editorloadingbox").is(":visible");
|
||||||
|
} catch(e){}
|
||||||
|
|
||||||
|
if(loaded){
|
||||||
|
clearTimeout(timeout);
|
||||||
|
clearInterval(checkInterval);
|
||||||
|
|
||||||
|
cb(null, {name: padName});
|
||||||
|
}
|
||||||
|
}, 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(){
|
||||||
|
return $iframe.contents()
|
||||||
|
}
|
||||||
|
|
||||||
|
testHelper.$getPadOuter = function(){
|
||||||
|
return testHelper.$getPadChrome().find('iframe.[name="ace_outer"]').contents();
|
||||||
|
}
|
||||||
|
|
||||||
|
testHelper.$getPadInner = function(){
|
||||||
|
return testHelper.$getPadOuter().find('iframe.[name="ace_inner"]').contents();
|
||||||
|
}
|
||||||
|
|
||||||
|
// copied from http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse
|
||||||
|
testHelper.selectText = function(element){
|
||||||
|
var doc = document, range, selection;
|
||||||
|
|
||||||
|
if (doc.body.createTextRange) { //ms
|
||||||
|
range = doc.body.createTextRange();
|
||||||
|
range.moveToElementText(element);
|
||||||
|
range.select();
|
||||||
|
} else if (window.getSelection) { //all others
|
||||||
|
selection = window.getSelection();
|
||||||
|
range = doc.createRange();
|
||||||
|
range.selectNodeContents(element);
|
||||||
|
selection.removeAllRanges();
|
||||||
|
selection.addRange(range);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
|
||||||
22
tests/frontend/index.html
Normal file
22
tests/frontend/index.html
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<title>Frontend tests</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="runner.css" />
|
||||||
|
|
||||||
|
<div id="mocha"></div>
|
||||||
|
<div id="iframe-container"></div>
|
||||||
|
|
||||||
|
<script src="/static/js/jquery.js"></script>
|
||||||
|
|
||||||
|
<script src="lib/mocha.js"></script>
|
||||||
|
<script> mocha.setup('bdd') </script>
|
||||||
|
<script src="lib/expect.js"></script>
|
||||||
|
|
||||||
|
<script src="helper.js"></script>
|
||||||
|
|
||||||
|
<script src="specs/button_bold.js"></script>
|
||||||
|
|
||||||
|
<script src="runner.js"></script>
|
||||||
|
</html>
|
||||||
1247
tests/frontend/lib/expect.js
Normal file
1247
tests/frontend/lib/expect.js
Normal file
File diff suppressed because it is too large
Load diff
4868
tests/frontend/lib/mocha.js
Normal file
4868
tests/frontend/lib/mocha.js
Normal file
File diff suppressed because it is too large
Load diff
228
tests/frontend/runner.css
Normal file
228
tests/frontend/runner.css
Normal file
|
|
@ -0,0 +1,228 @@
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#iframe-container {
|
||||||
|
width: 600px;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#iframe-container iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha {
|
||||||
|
font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
border-right: 2px solid #999;
|
||||||
|
width: 400px;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha #report {
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha ul, #mocha li {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha h1, #mocha h2 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha h1 {
|
||||||
|
margin-top: 15px;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha h1 a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha h1 a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .suite .suite h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: .8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha h2 {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: normal;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .suite {
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test {
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test:hover h2::after {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
right: -10px;
|
||||||
|
content: '(view source)';
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: arial;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test.pending:hover h2::after {
|
||||||
|
content: '(pending)';
|
||||||
|
font-family: arial;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test.pass.medium .duration {
|
||||||
|
background: #C09853;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test.pass.slow .duration {
|
||||||
|
background: #B94A48;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test.pass::before {
|
||||||
|
content: '✓';
|
||||||
|
font-size: 12px;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin-right: 5px;
|
||||||
|
color: #00d6b2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test.pass .duration {
|
||||||
|
font-size: 9px;
|
||||||
|
margin-left: 5px;
|
||||||
|
padding: 2px 5px;
|
||||||
|
color: white;
|
||||||
|
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
|
||||||
|
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
|
||||||
|
box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
-ms-border-radius: 5px;
|
||||||
|
-o-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test.pass.fast .duration {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test.pending {
|
||||||
|
color: #0b97c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test.pending::before {
|
||||||
|
content: '◦';
|
||||||
|
color: #0b97c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test.fail {
|
||||||
|
color: #c00;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test.fail pre {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test.fail::before {
|
||||||
|
content: '✖';
|
||||||
|
font-size: 12px;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin-right: 5px;
|
||||||
|
color: #c00;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test pre.error {
|
||||||
|
color: #c00;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mocha .test pre {
|
||||||
|
display: inline-block;
|
||||||
|
font: 12px/1.5 monaco, monospace;
|
||||||
|
margin: 5px;
|
||||||
|
padding: 15px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-bottom-color: #ddd;
|
||||||
|
-webkit-border-radius: 3px;
|
||||||
|
-webkit-box-shadow: 0 1px 3px #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
#report.pass .test.fail {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#report.fail .test.pass {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#error {
|
||||||
|
color: #c00;
|
||||||
|
font-size: 1.5 em;
|
||||||
|
font-weight: 100;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stats {
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
right: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 0;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stats .progress {
|
||||||
|
float: right;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stats em {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stats a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stats a:hover {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stats li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 5px;
|
||||||
|
list-style: none;
|
||||||
|
padding-top: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
code .comment { color: #ddd }
|
||||||
|
code .init { color: #2F6FAD }
|
||||||
|
code .string { color: #5890AD }
|
||||||
|
code .keyword { color: #8A6343 }
|
||||||
|
code .number { color: #2F6FAD }
|
||||||
7
tests/frontend/runner.js
Normal file
7
tests/frontend/runner.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
(function(){
|
||||||
|
//allow iframe access
|
||||||
|
document.domain = document.domain;
|
||||||
|
|
||||||
|
//start test framework
|
||||||
|
mocha.run();
|
||||||
|
})()
|
||||||
33
tests/frontend/specs/button_bold.js
Normal file
33
tests/frontend/specs/button_bold.js
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
describe("bold button", function(){
|
||||||
|
//create a new pad before each test run
|
||||||
|
beforeEach(function(cb){
|
||||||
|
testHelper.newPad(cb);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("makes text bold", function() {
|
||||||
|
//get the inner iframe
|
||||||
|
var $inner = testHelper.$getPadInner();
|
||||||
|
|
||||||
|
//get the first text element out of the inner iframe
|
||||||
|
var firstTextElement = $inner.find("div").first();
|
||||||
|
|
||||||
|
//select this text element
|
||||||
|
testHelper.selectText(firstTextElement[0]);
|
||||||
|
|
||||||
|
//get the bold button and click it
|
||||||
|
var $boldButton = testHelper.$getPadChrome().find(".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();
|
||||||
|
|
||||||
|
// is there a <b> element now?
|
||||||
|
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());
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue