Merge pull request #28 from NimaSoroush/freezeimage

Freezeimage

Author: NimaSoroush

API.md

@@ -12,7 +12,8 @@
 |----|----|-----|
 |`goto`|`string`|Url|
 |`wait`|`string`, `integer` or `func`|waiting time in millisecond `or` waiting for a selector `or` waiting until the function you supplied is evaluated as true|
-|`evaluate`|`func`|Evaluates a expression in the browser context|
+|`execute`|`func`|execute an expression in the browser context|
+|`freezeImage`|`string`|Selector name of a <img> tag containing animated image to be freezed before taking screenshot|
 |`capture`|`string`|`undefiend`, `document` or selector name|
 
 #### Steps example
@@ -23,7 +24,8 @@
   steps: [
     { name: 'goto', value: 'http://www.example.com' },
     { name: 'wait', value: 5000 },
-    { name: 'evaluate', value: () => { alert("Hello! I am an alert box!!") } },
+    { name: 'freezeImage', value: '#myImage' },
+    { name: 'execute', value: () => { alert("Hello! I am an alert box!!") } },
     { name: 'capture', value: 'document' },
   ],
   ...

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [0.0.15] - 2017-08-03
+### Added
+- Adding evaluate functionality to evaluate expression on browser
+- Adding freeze image functionality to freeze animations
+
 ## [0.0.14] - 2017-08-01
 ### Added
 - Assign free ports to run chrome instances

package.json

@@ -1,6 +1,6 @@
 {
   "name": "differencify",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Perceptual diffing tool",
   "main": "dist/index.js",
   "scripts": {

src/actions.js

@@ -4,4 +4,5 @@ export default {
   test: 'test',
   wait: 'wait',
   evaluate: 'evaluate',
+  freezeImage: 'freezeImge',
 };

src/chromyRunner.js

@@ -2,6 +2,7 @@ import fs from 'fs';
 import check from 'check-types';
 import logger from './logger';
 import compareImage from './compareImage';
+import freezeImage from './freezeImage';
 import actions from './actions';
 import { configTypes } from './defaultConfig';
 
@@ -101,6 +102,19 @@ const run = async (chromy, options, test) => {
           return false;
         }
         break;
+      case actions.freezeImage:
+        try {
+          prefixedLogger.log(`Freezing image ${action.value} in browser`);
+          const result = await chromy.evaluate(freezeImage(action.value));
+          if (!result) {
+            prefixedLogger.log(`Tag with selector ${action.value} is not a valid image`);
+            return false;
+          }
+        } catch (error) {
+          prefixedLogger.error(error);
+          return false;
+        }
+        break;
       default:
         break;
     }

src/freezeImage.js

@@ -0,0 +1,18 @@
+const freezeImage = (selector) => {
+  const image = document.querySelector(selector);
+  if (image.tagName !== 'IMG') {
+    return false;
+  }
+  const className = image.className;
+  const canvas = document.createElement('canvas');
+  canvas.className = className;
+  const context = canvas.getContext('2d');
+  image.parentNode.replaceChild(canvas, image);
+
+  canvas.width = image.width;
+  canvas.height = image.height;
+  context.drawImage(image, 0, 0);
+  return true;
+};
+
+export default freezeImage;

src/freezeImage.test.js

@@ -0,0 +1,34 @@
+import freezeImage from './freezeImage';
+
+const replaceChild = jest.fn();
+document.querySelector = jest.fn(() => ({
+  tagName: 'IMG',
+  parentNode: {
+    replaceChild,
+  },
+}));
+
+const drawImage = jest.fn();
+const getContext = jest.fn(() => ({
+  drawImage,
+}));
+document.createElement = jest.fn(() => ({
+  className: 'class',
+  getContext,
+}));
+
+describe('Freeze Image', () => {
+  beforeEach(() => {
+    document.querySelector.mockClear();
+    document.createElement.mockClear();
+  });
+
+  it('calls document with correct value', () => {
+    freezeImage('test');
+    expect(document.querySelector).toHaveBeenCalledWith('test');
+    expect(document.createElement).toHaveBeenCalledWith('canvas');
+    expect(getContext).toHaveBeenCalledWith('2d');
+    expect(drawImage).toHaveBeenCalledTimes(1);
+    expect(replaceChild).toHaveBeenCalledTimes(1);
+  });
+});