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": "errorhandling", "hooks": { "expressCreateServer": "ep_etherpad-lite/node/hooks/express/errorhandling: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": {
|
||||
"expressCreateServer": "ep_etherpad-lite/node/hooks/express/adminplugins:expressCreateServer",
|
||||
"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