testcafe-blink-diff - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

dist/report.es5.js

@@ -6,2 +6,11 @@ /* global window, document */
 
+function push(target) {
+  var nodes = [], len = arguments.length - 1;
+  while ( len-- > 0 ) nodes[ len ] = arguments[ len + 1 ];
+
+  nodes.forEach(function (source) {
+    target.appendChild(source);
+  });
+}
+
 function tag(name, attrs, content) {
@@ -21,3 +30,7 @@ var target = document.createElement(name);
   if (content) {
-    target.innerHTML = content;
+    if (!Array.isArray(content)) {
+      target.innerHTML = content;
+    } else {
+      push.apply(void 0, [ target ].concat( content ));
+    }
   }
@@ -28,9 +41,81 @@
 
-function push(target) {
-  var nodes = [], len = arguments.length - 1;
-  while ( len-- > 0 ) nodes[ len ] = arguments[ len + 1 ];
+function ui(img, onClose) {
+  var w = img.offsetWidth;
+  var h = img.offsetHeight;
 
-  nodes.forEach(function (source) {
-    target.appendChild(source);
-  });
+  var clicked;
+
+  img.style.width = (w / 2) + "px";
+
+  var slider = tag('div', { class: 'slider' });
+
+  push(img.parentElement, slider);
+
+  slider.style.top = ((h / 2) - (slider.offsetHeight / 2)) + "px";
+  slider.style.left = ((w / 2) - (slider.offsetWidth / 2)) + "px";
+
+  function slide(x) {
+    img.style.width = x + "px";
+    slider.style.left = (img.offsetWidth - (slider.offsetWidth / 2)) + "px";
+  }
+
+  function getCursorPos(e) {
+    var a = img.getBoundingClientRect();
+
+    var x = (e || window.event).pageX - a.left;
+
+    x -= window.pageXOffset;
+
+    return x;
+  }
+
+  function slideMove(e) {
+    var pos;
+
+    if (!clicked) {
+      return false;
+    }
+
+    pos = getCursorPos(e);
+
+    if (pos < 0) {
+      pos = 0;
+    }
+
+    if (pos > w) {
+      pos = w;
+    }
+
+    slide(pos);
+  }
+
+  function slideReady(e) {
+    e.preventDefault();
+    clicked = 1;
+
+    window.addEventListener('mousemove', slideMove);
+    window.addEventListener('touchmove', slideMove);
+  }
+
+  function slideFinish() {
+    clicked = 0;
+  }
+
+  push(img.parentElement, tag('button', { class: 'close', click: onClose }, '&times;'));
+
+  slider.addEventListener('mousedown', slideReady);
+  slider.addEventListener('touchstart', slideReady);
+  window.addEventListener('mouseup', slideFinish);
+  window.addEventListener('touchstop', slideFinish);
+
+  return {
+    teardown: function teardown() {
+      slider.removeEventListener('mousedown', slideReady);
+      slider.removeEventListener('touchstart', slideReady);
+      window.removeEventListener('mouseup', slideFinish);
+      window.removeEventListener('touchstop', slideFinish);
+      window.removeEventListener('mousemove', slideMove);
+      window.removeEventListener('touchmove', slideMove);
+    },
+  };
 }
@@ -46,23 +131,55 @@
 
-  function click() {
-    var modal = tag('div', {
+  function openModal(asDiff) {
+    var overlay;
+    var modal;
+
+    function onClose() {
+      if (overlay) {
+        overlay.teardown();
+      }
+
+      document.body.removeChild(modal);
+      document.body.style.overflow = '';
+    }
+
+    function closeCheck(e) {
+      if (e.keyCode === 27) {
+        onClose();
+        window.removeEventListener('keyup', closeCheck);
+      }
+    }
+
+    window.addEventListener('keyup', closeCheck);
+
+    modal = tag('div', {
       class: 'modal',
-      click: function click() {
-        document.body.removeChild(modal);
-        document.body.style.overflow = '';
+      click: function click(e) {
+        if (e.target === modal) {
+          onClose();
+        }
       },
-    });
+    }, [
+      tag('div', { class: 'container', style: ("width:" + (imageInfo.width) + "px") },
+        asDiff
+          ? [
+            tag('img', { src: imageInfo.images.out }),
+            tag('button', { class: 'close', click: onClose }, '&times;') ] : [
+            tag('div', { class: 'layer' }, [
+              tag('img', { src: imageInfo.images.base }) ]),
+            tag('div', { class: 'layer overlay' }, [
+              tag('img', { src: imageInfo.images.actual }) ]) ]
+      ) ]);
 
-    var imgOld = tag('img', { src: imageInfo.images.base });
-    var imgNew = tag('img', { src: imageInfo.images.actual });
-    var imgDiff = tag('img', { src: imageInfo.images.out });
-
     document.body.style.overflow = 'hidden';
-    push(modal, imgOld, imgDiff, imgNew);
     push(document.body, modal);
+
+    if (!asDiff) {
+      overlay = ui(document.getElementsByClassName('overlay')[0], onClose);
+    }
   }
 
-  var open = tag('button', { click: click }, 'Open diff');
+  var open = tag('button', { click: function () { return openModal(true); } }, 'Open diff');
+  var compare = tag('button', { click: function () { return openModal(); } }, 'Compare');
 
-  push(diffDetails, isOK, diff, open);
+  push(diffDetails, isOK, diff, open, compare);
 
@@ -69,0 +186,0 @@ var actualImg = tag('img', { src: imageInfo.thumbnails.actual });

lib/index.js

 const path = require('path');
 const fs = require('fs');
 
-const KEYS = {};
-const GROUPS = {};
-
 const isFullPage = process.argv.slice(2).indexOf('--full-page');
@@ -18,6 +15,2 @@ const isTakeSnapshot = process.argv.slice(2).indexOf('--take-snapshot');
 
-function padLeft(value) {
-  return `000${value}`.substr(-3);
-}
-
 function normalize(value) {
@@ -34,14 +27,4 @@ return value
   const groupId = t.testRun.test.fixture.name;
-
-  if (!GROUPS[groupId]) {
-    GROUPS[groupId] = 0;
-    KEYS[groupId] = Object.keys(GROUPS).length;
-  }
-
-  GROUPS[groupId] += 1;
-
-  const prefix = padLeft(KEYS[groupId]);
-  const offset = padLeft(GROUPS[groupId]);
   const filename = normalize(options.label || t.testRun.test.name);
-  const imagePath = `${prefix}_${normalize(groupId)}/${offset}_${filename}/${type}.png`;
+  const imagePath = `${normalize(groupId)}/${filename}/${type}.png`;
 
@@ -48,0 +31,0 @@ await t.wait(options.timeout === false ? 0 : (options.timeout || 500));

package.json

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

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

17626

increased by21.84%

Lines of code

385

increased by25%

No dependency changes