Skip to content

Commit 477518b

Browse files
authored
Merge pull request #830 from LinusU/test-cleanup
Test cleanup
2 parents 84d8e89 + 7098506 commit 477518b

File tree

11 files changed

+1971
-2099
lines changed

11 files changed

+1971
-2099
lines changed

package.json

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,17 @@
2424
"prebenchmark": "node-gyp build",
2525
"benchmark": "node benchmarks/run.js",
2626
"pretest": "node-gyp build",
27-
"test": "standard examples/*.js && mocha test/*.test.js",
27+
"test": "standard examples/*.js test/server.js test/public/*.js && mocha test/*.test.js",
2828
"pretest-server": "node-gyp build",
2929
"test-server": "node test/server.js"
3030
},
3131
"dependencies": {
3232
"nan": "^2.3.2"
3333
},
3434
"devDependencies": {
35-
"body-parser": "^1.13.3",
36-
"express": "^4.13.2",
37-
"pug": "^2.0.0-beta3",
38-
"mocha": "*",
39-
"standard": "^7.1.1"
35+
"express": "^4.14.0",
36+
"mocha": "^3.1.2",
37+
"standard": "^8.5.0"
4038
},
4139
"engines": {
4240
"node": ">=0.10.0"
File renamed without changes.
File renamed without changes.
File renamed without changes.

test/public/app.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>node-canvas</title>
5+
<link href="/style.css" rel="stylesheet">
6+
</head>
7+
<body>
8+
9+
<h1>node-canvas</h1>
10+
11+
<p class="msg">
12+
The tests below assert visual and api integrity by running the <em>exact</em> same code utilizing the client canvas api, as well as node-canvas.
13+
</p>
14+
15+
<script src="/tests.js"></script>
16+
<script src="/app.js"></script>
17+
18+
</body>
19+
</html>

test/public/app.js

Lines changed: 38 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,55 @@
1+
window.addEventListener('load', runTests)
12

2-
function log() {
3-
if (window.console) console.log.apply(this, arguments);
4-
}
5-
6-
window.onload = function(){
7-
runTests();
8-
get('run').addEventListener('click', runTests, false);
9-
};
3+
function create (type, attrs, children) {
4+
const element = Object.assign(document.createElement(type), attrs)
105

11-
document.addEventListener('keypress', function(event){
12-
if (114 == event.charCode) runTests();
13-
}, false);
14-
15-
function get(id) {
16-
return document.getElementById(id);
17-
}
6+
if (children) {
7+
children.forEach(function (child) { element.appendChild(child) })
8+
}
189

19-
function create(type, str) {
20-
var el = document.createElement(type);
21-
if (str) el.appendChild(text(str));
22-
return el;
10+
return element
2311
}
2412

25-
function text(str) {
26-
return document.createTextNode(str);
13+
function pdfLink (name) {
14+
return create('a', {
15+
href: '/pdf?name=' + encodeURIComponent(name),
16+
target: '_blank',
17+
textContent: 'PDF'
18+
})
2719
}
2820

29-
function pdfForm(fn, canvas) {
30-
var form = create('form')
31-
, input = create('input')
32-
, submit = create('input');
33-
34-
form.setAttribute('action', '/pdf');
35-
form.setAttribute('method', 'post');
36-
form.setAttribute('target', '_blank');
37-
38-
input.setAttribute('type', 'hidden');
39-
input.setAttribute('name', 'json');
40-
input.setAttribute('value', JSON.stringify({
41-
fn: fn.toString()
42-
, width: canvas.width
43-
, height: canvas.height
44-
}));
21+
function localRendering (name) {
22+
var canvas = create('canvas', { width: 200, height: 200, title: name })
4523

46-
submit.setAttribute('type', 'submit');
47-
submit.setAttribute('value', 'PDF');
24+
window.tests[name](canvas.getContext('2d'), function () {})
4825

49-
form.appendChild(input);
50-
form.appendChild(submit);
51-
52-
return form;
26+
return canvas
5327
}
5428

55-
function clearTests() {
56-
var table = get('tests');
57-
table.removeChild(table.children[1]);
29+
function clearTests () {
30+
var table = document.getElementById('tests')
31+
if (table) document.body.removeChild(table)
5832
}
5933

60-
function runTests() {
61-
clearTests();
62-
var table = get('tests')
63-
, tbody = create('tbody');
64-
for (var name in tests) {
65-
var fn = tests[name]
66-
, canvas = create('canvas')
67-
, tr = create('tr')
68-
, tds = [create('td'), create('td'), create('td'), create('td')];
69-
70-
canvas.width = 200;
71-
canvas.height = 200;
72-
canvas.title = name;
34+
function runTests () {
35+
clearTests()
7336

74-
tds[2].appendChild(canvas);
75-
tds[3].appendChild(create('h3', name));
76-
tds[3].appendChild(pdfForm(fn, canvas));
37+
var testNames = Object.keys(window.tests)
7738

78-
tr.appendChild(tds[0]);
79-
tr.appendChild(tds[1]);
80-
tr.appendChild(tds[2]);
81-
tr.appendChild(tds[3]);
39+
var table = create('table', { id: 'tests' }, [
40+
create('thead', {}, [
41+
create('th', { textContent: 'node-canvas' }),
42+
create('th', { textContent: 'browser canvas' }),
43+
create('th', { textContent: '' })
44+
]),
45+
create('tbody', {}, testNames.map(function (name) {
46+
return create('tr', {}, [
47+
create('td', {}, [create('img', { src: '/render?name=' + encodeURIComponent(name) })]),
48+
create('td', {}, [localRendering(name)]),
49+
create('td', {}, [create('h3', { textContent: name }), pdfLink(name)])
50+
])
51+
}))
52+
])
8253

83-
tbody.appendChild(tr);
84-
table.appendChild(tbody);
85-
runTest(name, canvas, tds[0], tds[1], tds[3]);
86-
}
54+
document.body.appendChild(table)
8755
}
88-
89-
function runTest(name, canvas, dest, jpegDest, stats) {
90-
var fn = tests[name]
91-
, start = new Date;
92-
try {
93-
fn(canvas.getContext('2d'), function(){});
94-
} catch (err) {
95-
log(err);
96-
}
97-
var duration = new Date - start;
98-
stats.appendChild(create('p', 'browser: ' + duration + 'ms'));
99-
stats.appendChild(create('p', 'fps: ' + (1000 / duration).toFixed(0)));
100-
renderOnServer('/render', name, canvas, function(res){
101-
if (res.error) {
102-
var p = create('p');
103-
p.innerText = res.error;
104-
dest.appendChild(p);
105-
} else if (res.data) {
106-
var img = create('img');
107-
img.src = res.data;
108-
stats.appendChild(create('p', 'node: ' + res.duration + 'ms'));
109-
stats.appendChild(create('p', 'fps: ' + (1000 / res.duration).toFixed(0)));
110-
dest.appendChild(img);
111-
}
112-
});
113-
renderOnServer('/jpeg', name, canvas, function(res){
114-
if (res.error) {
115-
var p = create('p');
116-
p.innerText = res.error;
117-
jpegDest.appendChild(p);
118-
} else if (res.data) {
119-
var img = create('img');
120-
img.src = res.data;
121-
jpegDest.appendChild(img);
122-
}
123-
});
124-
}
125-
126-
function renderOnServer(url, name, canvas, fn) {
127-
var req = new XMLHttpRequest
128-
, json = JSON.stringify({
129-
fn: tests[name].toString()
130-
, width: canvas.width
131-
, height: canvas.height
132-
});
133-
req.open('POST', url);
134-
req.setRequestHeader('Content-Type', 'application/json');
135-
req.onreadystatechange = function(){
136-
if (4 == req.readyState) {
137-
try {
138-
fn(JSON.parse(req.responseText));
139-
} catch (err) {
140-
fn({ error: err });
141-
}
142-
}
143-
};
144-
req.send(json);
145-
}

test/public/style.css

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,38 @@ body {
22
padding: 40px 50px;
33
font: 13px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
44
}
5+
56
p {
67
margin: 15px 5px;
78
}
8-
em {
9-
color: #00C5F7;
10-
}
9+
1110
a {
1211
color: #00C5F7;
1312
}
13+
1414
canvas, img {
1515
padding: 5px;
1616
border: 1px solid #eee;
1717
}
18-
pre {
19-
height: 200px;
20-
font-size: 12px;
21-
overflow: auto;
22-
}
18+
2319
p.msg {
2420
width: 400px;
2521
}
22+
2623
#tests {
2724
width: 100%;
2825
margin-top: 35px;
2926
}
27+
3028
table tr td:nth-child(1),
3129
table tr td:nth-child(2) {
3230
width: 200px;
3331
}
32+
3433
table tr td:nth-child(3) {
3534
padding: 0 45px;
3635
}
36+
3737
table tr td p {
3838
margin: 5px 0;
39-
}
39+
}

0 commit comments

Comments
 (0)