Merge pull request #7524 from cjcenizal/improvement/silence-dot-template-log
Update visualRegression task to use Handlebars instead of DoT templates.
This commit is contained in:
commit
2694a84ea9
|
@ -161,7 +161,6 @@
|
||||||
"babel-eslint": "4.1.8",
|
"babel-eslint": "4.1.8",
|
||||||
"chokidar": "1.4.3",
|
"chokidar": "1.4.3",
|
||||||
"chromedriver": "2.21.2",
|
"chromedriver": "2.21.2",
|
||||||
"dot": "1.0.3",
|
|
||||||
"elasticdump": "2.1.1",
|
"elasticdump": "2.1.1",
|
||||||
"eslint": "1.10.3",
|
"eslint": "1.10.3",
|
||||||
"eslint-plugin-mocha": "1.1.0",
|
"eslint-plugin-mocha": "1.1.0",
|
||||||
|
@ -179,6 +178,7 @@
|
||||||
"grunt-s3": "0.2.0-alpha.3",
|
"grunt-s3": "0.2.0-alpha.3",
|
||||||
"grunt-simple-mocha": "0.4.0",
|
"grunt-simple-mocha": "0.4.0",
|
||||||
"gruntify-eslint": "1.0.1",
|
"gruntify-eslint": "1.0.1",
|
||||||
|
"handlebars": "4.0.5",
|
||||||
"html-entities": "1.1.3",
|
"html-entities": "1.1.3",
|
||||||
"husky": "0.8.1",
|
"husky": "0.8.1",
|
||||||
"image-diff": "1.6.0",
|
"image-diff": "1.6.0",
|
||||||
|
|
|
@ -126,13 +126,14 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="meta">
|
<div class="meta">
|
||||||
{{=it.branch}} - {{=it.date}}
|
{{branch}} - {{date}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{~it.comparisons :comparison:index}}
|
{{#each comparisons as |comparison|}}
|
||||||
<div class="comparison{{? comparison.change <= it.hiddenThreshold }} comparison--collapsed{{?}} {{? comparison.change >= it.warningThreshold }} comparison--warning{{?}}">
|
<div class="comparison{{#lte comparison.change ../hiddenThreshold}} comparison--collapsed{{/lte}} {{#gte comparison.change ../warningThreshold }} comparison--warning{{/gte}}">
|
||||||
|
|
||||||
<div class="comparison__title">
|
<div class="comparison__title">
|
||||||
<span class="comparison__percent">({{=comparison.percentage}}%)</span> {{=comparison.name}}
|
<span class="comparison__percent">({{comparison.percentage}}%)</span> {{comparison.name}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="comparison__subTitle">
|
<div class="comparison__subTitle">
|
||||||
|
@ -155,7 +156,7 @@
|
||||||
<div class="comparisonScreenshot">
|
<div class="comparisonScreenshot">
|
||||||
<img
|
<img
|
||||||
class="comparisonScreenshot__image"
|
class="comparisonScreenshot__image"
|
||||||
src="data:image/png;base64,{{=comparison.imageData.diff}}"
|
src="data:image/png;base64,{{comparison.imageData.diff}}"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -166,7 +167,7 @@
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
class="comparisonScreenshot__image"
|
class="comparisonScreenshot__image"
|
||||||
src="data:image/png;base64,{{=comparison.imageData.session}}"
|
src="data:image/png;base64,{{comparison.imageData.session}}"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -174,12 +175,12 @@
|
||||||
<div class="comparisonScreenshot comparisonScreenshot--baseline">
|
<div class="comparisonScreenshot comparisonScreenshot--baseline">
|
||||||
<img
|
<img
|
||||||
class="comparisonScreenshot__image"
|
class="comparisonScreenshot__image"
|
||||||
src="data:image/png;base64,{{=comparison.imageData.baseline}}"
|
src="data:image/png;base64,{{comparison.imageData.baseline}}"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{~}}
|
{{/each}}
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -3,7 +3,7 @@ import bluebird, {
|
||||||
fromNode,
|
fromNode,
|
||||||
promisify,
|
promisify,
|
||||||
} from 'bluebird';
|
} from 'bluebird';
|
||||||
import dot from 'dot';
|
import Handlebars from 'handlebars';
|
||||||
import fs from 'fs';
|
import fs from 'fs';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import imageDiff from 'image-diff';
|
import imageDiff from 'image-diff';
|
||||||
|
@ -15,33 +15,42 @@ const readDirAsync = promisify(fs.readdir);
|
||||||
const readFileAsync = promisify(fs.readFile);
|
const readFileAsync = promisify(fs.readFile);
|
||||||
const writeFileAsync = promisify(fs.writeFile);
|
const writeFileAsync = promisify(fs.writeFile);
|
||||||
|
|
||||||
// Preserve whitespace in our HTML output.
|
|
||||||
dot.templateSettings.strip = false;
|
|
||||||
|
|
||||||
const templates = dot.process({
|
Handlebars.registerHelper('lte', function lessThanEquals(value, threshold, options) {
|
||||||
path: path.resolve('./utilities/templates')
|
if (value <= threshold) {
|
||||||
|
return options.fn(this);
|
||||||
|
}
|
||||||
|
return options.inverse(this);
|
||||||
});
|
});
|
||||||
|
|
||||||
function buildGallery(comparisons) {
|
Handlebars.registerHelper('gte', function greaterThanEquals(value, threshold, options) {
|
||||||
|
if (value >= threshold) {
|
||||||
|
return options.fn(this);
|
||||||
|
}
|
||||||
|
return options.inverse(this);
|
||||||
|
});
|
||||||
|
|
||||||
|
async function buildGallery(comparisons) {
|
||||||
const simpleGit = new SimpleGit();
|
const simpleGit = new SimpleGit();
|
||||||
const asyncBranch = promisify(simpleGit.branch, simpleGit);
|
const asyncBranch = promisify(simpleGit.branch, simpleGit);
|
||||||
|
const branch = await asyncBranch();
|
||||||
|
|
||||||
return asyncBranch().then(data => {
|
const template = Handlebars.compile(await readFileAsync(
|
||||||
const branch = data.current;
|
path.resolve('./utilities/templates/visual_regression_gallery.handlebars')
|
||||||
|
, 'utf8'));
|
||||||
|
|
||||||
const html = templates.visual_regression_gallery({
|
const html = template({
|
||||||
date: moment().format('MMMM Do YYYY, h:mm:ss a'),
|
date: moment().format('MMMM Do YYYY, h:mm:ss a'),
|
||||||
branch,
|
branch: branch.current,
|
||||||
hiddenThreshold: 0,
|
hiddenThreshold: 0,
|
||||||
warningThreshold: 0.03,
|
warningThreshold: 0.03,
|
||||||
comparisons,
|
comparisons,
|
||||||
});
|
|
||||||
|
|
||||||
return writeFileAsync(
|
|
||||||
path.resolve('./test/screenshots/visual_regression_gallery.html'),
|
|
||||||
html
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
return writeFileAsync(
|
||||||
|
path.resolve('./test/screenshots/visual_regression_gallery.html'),
|
||||||
|
html
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function compareScreenshots() {
|
async function compareScreenshots() {
|
||||||
|
|
Loading…
Reference in a new issue