Permalink
Browse files

Html report for multiple browsers

Lodash templates replaced with handlebars for better readability
  • Loading branch information...
1 parent 296e3b0 commit e097eb72521554f4e5beb43235bb2346d7c2c8d7 Sergey Tatarintsev committed Feb 24, 2014
Showing with 82 additions and 44 deletions.
  1. +39 −26 lib/reporters/html-tpl.html
  2. +42 −17 lib/reporters/html.js
  3. +1 −1 package.json
@@ -3,6 +3,14 @@
<head>
<title>Shooter report</title>
<style>
+ .plan {
+ padding-left: 30px;
+ }
+
+ .state {
+ padding-left: 30px;
+ }
+
.success::before {
content: '\2713 ';
color: green;
@@ -27,32 +35,37 @@
<body>
<h1>Shooter report</h1>
- <% plans.forEach(function(plan) { %>
- <h2><%- plan.name %></h2>
- <% plan.tests.forEach(function(test) { %>
- <h3 class="<%= test.equal? 'success' : 'fail' %>"><%- test.state %></h3>
- <% if (test.equal) { %>
- <img src="<%= attach(plan.name, test.state, 'current') %>">
- <%} else {%>
- <div class="image-box">
- <div>Reference</div>
- <img class="ref-image" src="<%= attach(plan.name, test.state, 'ref') %>">
- </div>
-
-
- <div class="image-box">
- <div>Current</div>
- <img class="current-image" src="<%= attach(plan.name, test.state, 'current') %>">
- </div>
-
-
- <div class="image-box">
- <div>Diff</div>
- <img class="ref-image" src="<%= attach(plan.name, test.state, 'diff') %>">
- </div>
+ {{#each plans}}
+ <h2>{{name}}</h2>
+ <div class="plan">
+ {{#each states}}
+ <h3>{{name}}</h3>
+ <div class="state">
+ {{#each browsers}}
+ <h4 class="{{status}}">{{browser}}</h4>
+ <div class="browser">
+ {{#if equal}}
+ {{image "current"}}
+ {{else}}
+ <div class="image-box">
+ <div class="image-title">Reference</div>
+ {{image "ref"}}
+ </div>
+ <div class="image-box">
+ <div class="image-title">Current</div>
+ {{image "current"}}
+ </div>
+ <div class="image-box">
+ <div class="image-title">Diff</div>
+ {{image "diff"}}
+ </div>
- <%} %>
- <%});%>
- <% });%>
+ {{/if}}
+ </div>
+ {{/each}}
+ </div>
+ {{/each}}
+ </div>
+ {{/each}}
</body>
</html>
View
@@ -2,24 +2,41 @@
var fs = require('q-io/fs'),
path = require('path'),
- _ = require('lodash'),
+ Handlebars = require('handlebars'),
Image = require('../image');
var REPORT_DIR = 'shooter-report',
REPORT_INDEX = path.join(REPORT_DIR, 'index.html'),
REPORT_ATTACHMENTS = path.join(REPORT_DIR, 'attach');
-function attachmentsPath(plan) {
- return path.join(REPORT_ATTACHMENTS, plan);
+function attachmentStateDir(planName, stateName) {
+ return path.join('attach', planName, stateName);
}
-function attachmentPath(plan, state, kind) {
- return path.join(attachmentsPath(plan), state + '~' + kind + '.png');
+function attachmentPath(result, kind) {
+ return path.resolve(REPORT_DIR, attachmentRelPath(result, kind));
}
+// Path to attachments relative to root report
+function attachmentRelPath(result, kind) {
+ return path.join(attachmentStateDir(result.plan, result.state), result.browser + '~' + kind + '.png');
+}
+
+Handlebars.registerHelper('status', function() {
+ return this.equal? 'success' : 'fail';
+});
+
+Handlebars.registerHelper('image', function(kind) {
+ return new Handlebars.SafeString(
+ '<img src="' +
+ encodeURIComponent(attachmentRelPath(this, kind)) +
+ '">');
+});
+
module.exports = function htmlReporter(tester) {
var plans,
currentPlan,
+ currentState,
attachmentsQueue;
tester.on('beginTests', function() {
@@ -28,27 +45,35 @@ module.exports = function htmlReporter(tester) {
});
tester.on('beginPlan', function(plan) {
- currentPlan = {name: plan, tests: []};
+ currentPlan = {name: plan, states: []};
plans.push(currentPlan);
+ });
+
+ tester.on('beginState', function(state) {
+ currentState = {name: state, browsers: []};
+ currentPlan.states.push(currentState);
attachmentsQueue.then(function() {
- return fs.makeDirectory(attachmentsPath(plan));
+ var dir = path.resolve(REPORT_DIR, attachmentStateDir(currentPlan.name, currentState.name));
+ return fs.makeTree(dir);
});
});
tester.on('endTest', function(result) {
- result.diffPath = attachmentPath(result.name, result.state, 'diff');
- currentPlan.tests.push(result);
+ result.diffPath = attachmentPath(result, 'diff');
+ currentState.browsers.push(result);
+
attachmentsQueue.then(function() {
- var copyCurrent = fs.copy(result.currentPath, attachmentPath(result.name, result.state, 'current'));
+ var copyCurrent = fs.copy(result.currentPath, attachmentPath(result, 'current'));
if (result.equal) {
return copyCurrent;
}
return copyCurrent
.then(function() {
- return fs.copy(result.previousPath, attachmentPath(result.name, result.state, 'ref'));
+ return fs.copy(result.previousPath, attachmentPath(result, 'ref'));
})
.then(function() {
- return Image.buildDiff(result.previousPath, result.currentPath, result.diffPath);
+ return Image.buildDiff(result.previousPath, result.currentPath,
+ attachmentPath(result, 'diff'));
})
.done();
});
@@ -60,12 +85,12 @@ module.exports = function htmlReporter(tester) {
return fs.read(path.resolve(__dirname, './html-tpl.html'));
})
.then(function(tpl) {
- var tplFunc = _.template(tpl);
+ var tplFunc = Handlebars.compile(tpl);
return tplFunc({
- plans: plans,
- attach: function(plan, state, kind) {
- return encodeURIComponent(path.join('attach', plan, state + '~' + kind + '.png'));
- }
+ plans: plans
+ //attach: function(result, kind) {
+ //return encodeURIComponent(attachmentRelPath(result, kind));
+ //}
});
})
.then(function(index) {
View
@@ -15,7 +15,7 @@
"q-io": "~1.10.8",
"chalk": "~0.4.0",
"temp": "~0.6.0",
- "lodash": "~2.4.1"
+ "handlebars": "~1.3.0"
},
"devDependencies": {
"mocha": "~1.17.1",

0 comments on commit e097eb7

Please sign in to comment.