testcafe-blink-diff - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

builder.js

@@ -1,5 +0,2 @@
-const BlinkDiff = require('blink-diff');
 const wargs = require('wargs');
-const open = require('open');
-const glob = require('glob');
 const path = require('path');
@@ -17,2 +14,3 @@ const fs = require('fs');
   -f, --force      Ignore missing screenshots
+  -c, --compare    Custom snapshots, e.g. \`-c base:actual\`
   -t, --threshold  Percentage of difference expected
@@ -22,5 +20,12 @@
 
-- Import and call \`await takeSnapshot(t)\` within your tests, e.g. \`import { takeSnapshot } from '${pkgInfo.name}';\`
-- Run testcafe with \`--take-snapshot\` to take the base screenshots, run again without \`--take-snapshot\` to take actual screenshots
-- Run ${pkgInfo.name} to generate a report from the taken screenshots, e.g. \`npx ${pkgInfo.name} tests/screenshots --open --threshold 0.03\`
+- Import and call \`await takeSnapshot(t)\` within your tests,
+  e.g. \`import { takeSnapshot } from '${pkgInfo.name}';\`
+
+- Run testcafe with \`--take-snapshot\` to take the base screenshots,
+  run again without \`--take-snapshot\` to take actual screenshots
+
+- Run ${pkgInfo.name} to generate a report from the taken screenshots,
+  e.g. \`npx ${pkgInfo.name} tests/screenshots --open --threshold 0.03\`
+
+You can name your snapshots, e.g. \`--take-snapshot latest\` and compare with \`--compare v1:latest \`
 `;
@@ -31,5 +36,9 @@
   alias: {
+    t: 'threshold',
+    c: 'compare',
     v: 'version',
+    f: 'force',
+    o: 'open',
   },
-  boolean: 'v',
+  boolean: 'vfo',
 });
@@ -56,3 +65,3 @@
 
-const sources = glob
+const sources = require('glob') // eslint-disable-line
   .sync('**/*.png', { cwd: imagesPath })
@@ -64,6 +73,8 @@ .filter(x => x.indexOf('out.png') === -1);
   .reduce((prev, cur) => {
-    const groupedName = cur.match(/\/(actual|base)\.png$/);
-    const fixedName = cur.replace(groupedName[0], '')
-      .replace('__or__', '/')
-      .replace(/_/g, ' ');
+    const groupedName = path.basename(cur, '.png');
+    const fixedName = `${path.dirname(cur) === '.' ? groupedName : path.dirname(cur)}`
+      .replace(/__/g, '§')
+      .replace('-or-', '/')
+      .replace(/_/g, ' ')
+      .replace(/§/g, '_');
 
@@ -74,3 +85,3 @@ if (!prev[fixedName]) {
 
-    prev[fixedName][groupedName[1]] = path.join(imagesPath, cur);
+    prev[fixedName][groupedName] = path.join(imagesPath, cur);
 
@@ -117,5 +128,9 @@ return prev;
 
+  const check = (argv.flags.compare || '').split(':');
+  const left = check[0] || 'base';
+  const right = check[1] || 'actual';
+
   Object.keys(images).forEach(groupedName => {
-    if (!(images[groupedName].base && images[groupedName].actual)) {
-      const errorMessage = `Missing snapshots for '${groupedName}'`;
+    if (!(images[groupedName][left] && images[groupedName][right])) {
+      const errorMessage = `Missing snapshots for '${groupedName}', given '${left}:${right}'`;
 
@@ -132,10 +147,12 @@ if (!argv.flags.force) {
 
-    const actualImage = path.relative(imagesPath, images[groupedName].actual);
-    const baseImage = path.relative(imagesPath, images[groupedName].base);
-    const baseDir = path.dirname(images[groupedName].base);
+    const actualImage = path.relative(imagesPath, images[groupedName][right]);
+    const baseImage = path.relative(imagesPath, images[groupedName][left]);
+    const baseDir = path.dirname(images[groupedName][left]);
     const outFile = path.join(baseDir, 'out.png');
 
+    const BlinkDiff = require('blink-diff');
+
     const diff = new BlinkDiff({
-      imageAPath: images[groupedName].base,
-      imageBPath: images[groupedName].actual,
+      imageAPath: images[groupedName][left],
+      imageBPath: images[groupedName][right],
 
@@ -157,5 +174,6 @@ thresholdType: BlinkDiff.THRESHOLD_PERCENT,
           const ok = diff.hasPassed(result.code);
+          const fixed = ((result.differences / result.dimension) * 100).toFixed(2);
 
           if (!ok && !argv.flags.force) {
-            reject(new Error(`Failed '${groupedName}', diff: ${result.differences}`));
+            reject(new Error(`Failed '${groupedName}', diff: ${fixed}%`));
             return;
@@ -177,3 +195,3 @@ }
             label: groupedName,
-            diff: ((result.differences / result.dimension) * 100).toFixed(2),
+            diff: fixed,
             ok,
@@ -221,3 +239,3 @@ });
     if (argv.flags.open) {
-      open(destFile, typeof argv.flags.open === 'string' ? argv.flags.open : undefined);
+      require('open')(destFile, typeof argv.flags.open === 'string' ? argv.flags.open : undefined);
     }
@@ -224,0 +242,0 @@ })

index.js

 const isTakeSnapshot = process.argv.slice(2).indexOf('--take-snapshot');
+const snapshotName = isTakeSnapshot > -1 ? process.argv.slice(2)[isTakeSnapshot + 1] : null;
+const type = snapshotName || ((process.env.SNAPSHOT || isTakeSnapshot !== -1) ? 'base' : 'actual');
 
-// FIXME: take given value for custom naming, e.g. `--take-snapshot test`
-const type = (process.env.SNAPSHOT || isTakeSnapshot !== -1) ? 'base' : 'actual';
-
 function normalize(value) {
-  return value.replace(/\W+/g, '_');
+  return value
+    .replace(/_/g, '__')
+    .replace(/[^a-zA-Z/\d%[(@;,.)\]_-]+/g, '_')
+    .replace(/^_+|_+$/g, '')
+    .replace(/\//g, '-or-');
 }
@@ -12,3 +15,3 @@
 function takeSnapshot(t, label, timeout) {
-  const filename = normalize(label || t.testRun.test.name).replace(/\//g, '__or__');
+  const filename = normalize(label || t.testRun.test.name);
   const imagePath = `${normalize(t.testRun.test.fixture.name)}/${filename}/${type}.png`;
@@ -15,0 +18,0 @@

package.json

 {
   "name": "testcafe-blink-diff",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Visual regression for Testcafé through BlinkDiff",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -0,1 +1,4 @@
+[![NPM version](https://badge.fury.io/js/testcafe-blink-diff.png)](http://badge.fury.io/js/testcafe-blink-diff)
+[![Known Vulnerabilities](https://snyk.io/test/npm/testcafe-blink-diff/badge.svg)](https://snyk.io/test/npm/testcafe-blink-diff)
+
 # How it works?
@@ -42,3 +45,3 @@
 <p align="center">
-  <img width="479" height="794" src="report.png">
+  <img width="479" height="347" src="screenshot.png">
 </p>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11682

increased by7.88%

Lines of code

251

increased by7.26%

Number of lines in readme file

47

increased by6.82%

No dependency changes