Added cleanup functionality and circleci integration

NimaSoroush · NimaSoroush · commit 3b67eefa2535 · 2017-07-21T14:24:09.000+01:00
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -0,0 +1,25 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: circleci/node:7
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: install-packages
+          command: npm install
+      - save_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+          paths:
+            - .node_modules
+      - run:
+          name: test
+          command: npm test
+      
+workflows:
+  version: 2
+  build_and_test:
+    jobs:
+      - build
diff --git a/API.md b/API.md
@@ -0,0 +1,7 @@
+### Methods
+
+|Method|Arguments|description|
+|------|---------|-----------|
+|`update`|[TestOptions](https://github.com/NimaSoroush/differencify#testoptions)|Creates reference screenshots|
+|`test`|[TestOptions](https://github.com/NimaSoroush/differencify#testoptions)|Validate your changes by testing against reference screenshots|
+|`cleanup`|no argument|Closes all leftover browser instances|
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [0.0.11] - 2017-07-21
+### Added
+- Added cleanup functionality
+- Added circleci to project
+
 ## [0.0.10] - 2017-07-07
 ### Added
 - Added chromy.screenshot()
diff --git a/README.md b/README.md
@@ -6,18 +6,20 @@ Regression Testing suite!
 </p>
 <br>
 
+Status: [![CircleCI](https://circleci.com/gh/NimaSoroush/differencify/tree/master.svg?style=svg)](https://circleci.com/gh/NimaSoroush/differencify/tree/master)
+
 ## About
 
 Differencify is library for visual regression testing by comparing your locall changes with reference screenshots of your website.
 
 ## Requirements
 - Node > 6
-- Chrome > 59 or [Chrome Canary](https://confluence.skyscannertools.net/display/DW/Shared+Cache+Client)
+- Chrome > 59 or [Chrome Canary](https://www.google.co.uk/chrome/browser/canary.html)
 
 ## Installation
 Install the module:
 ```bash
-npm install --save-dev differencify
+npm install differencify
 ```
 ## Usage
 ```js
@@ -39,6 +41,10 @@ async () => {
 }
 ```
 
+### API
+
+See [API.md](API.md) for full list of API calls
+
 ### GlobalOptions
 
 |Parameter|type|required|description|default|
diff --git a/examples/configs/global-config.js b/examples/configs/global-config.js
@@ -1,4 +1,4 @@
-export default {
+exports.default = {
   screenshots: './screenshots',
   debug: false,
   visible: true,
diff --git a/examples/configs/test-config.js b/examples/configs/test-config.js
@@ -1,4 +1,4 @@
-export default {
+exports.default = {
   name: 'default',
   resolution: {
     width: 1366,
diff --git a/examples/example-test.js b/examples/example-test.js
@@ -1,9 +1,10 @@
 const Differencify = require('differencify');
-const globalConfig = require('./configs/global-config');
-const testConfig = require('./configs/test-config');
+const globalConfig = require('./configs/global-config').default;
+const testConfig = require('./configs/test-config').default;
 
 const differencify = new Differencify(globalConfig);
 
-differencify.test(testConfig).then((r) => {
-  console.log(r);
+differencify.test(testConfig).then((result) => {
+  console.log(result); // true or false
+  differencify.cleanup();
 });
diff --git a/examples/example-update.js b/examples/example-update.js
@@ -1,9 +1,10 @@
 const Differencify = require('differencify');
-const globalConfig = require('./configs/global-config');
-const testConfig = require('./configs/test-config');
+const globalConfig = require('./configs/global-config').default;
+const testConfig = require('./configs/test-config').default;
 
 const differencify = new Differencify(globalConfig);
 
-differencify.update(testConfig).then((r) => {
-  console.log(r);
+differencify.update(testConfig).then((result) => {
+  console.log(result); // true or false
+  differencify.cleanup();
 });
diff --git a/examples/jest-example.js b/examples/jest-example.js
@@ -2,11 +2,14 @@ import Differencify from 'differencify';
 import globalConfig from './configs/global-config';
 import testConfig from './configs/test-config';
 
-const differencify = new Differencify(globalConfig);
+const differencify = new Differencify(globalConfig.default);
 
 describe('My website', () => {
+  afterAll(() => {
+    differencify.cleanup();
+  });
   it('validate visual regression test', async () => {
-    const result = await differencify.test(testConfig);
+    const result = await differencify.test(testConfig.default);
     expect(result).toEqual(true);
   }, 30000);
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "differencify",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Perceptual diffing tool",
   "main": "dist/index.js",
   "scripts": {
@@ -33,7 +33,7 @@
     "babel-preset-env": "^1.5.2",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-jest": "^20.0.3",
-    "eslint": "^3.10.2",
+    "eslint": "^3.19.0",
     "eslint-config-airbnb": "^13.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^2.2.3",
diff --git a/src/chromyRunner.js b/src/chromyRunner.js
@@ -1,14 +1,9 @@
 import fs from 'fs';
-import Chromy from 'chromy';
 import logger from './logger';
 import compareImage from './compareImage';
 import actions from './actions';
 import { configTypes } from './defaultConfig';
 
-const CHROME_PORT = 9222;
-const CHROME_WIDTH = 800;
-const CHROME_HEIGHT = 600;
-
 const saveImage = (filename, image, testType, screenshotsPath, testReportPath) => {
   if (testType === configTypes.test) {
     logger.log(`screenshot saved in -> ${testReportPath}/${filename}.png`);
@@ -18,99 +13,69 @@ const saveImage = (filename, image, testType, screenshotsPath, testReportPath) =
   return fs.writeFileSync(`${screenshotsPath}/${filename}.png`, image);
 };
 
-class ChromyRunner {
-  constructor(options) {
-    this.options = options;
-    this.currentTestId = 0;
-  }
-
-  async _stepRunner(chromy, test) {
-    /* eslint-disable no-restricted-syntax */
-    for (const action of test.steps) {
-    /* eslint-enable no-restricted-syntax */
-      switch (action.name) {
-        case actions.goto:
-          try {
-            await chromy.goto(action.value);
-            logger.log(`goto -> ${action.value}`);
-          } catch (error) {
-            logger.error(error);
-            return false;
-          }
-          break;
-        case actions.capture:
-          switch (action.value) {
-            case 'document':
-              try {
-                logger.log('Capturing screenshot of whole DOM');
-                const png = await chromy.screenshotDocument();
-                await saveImage(test.name, png, test.type, this.options.screenshots, this.options.testReportPath);
-              } catch (error) {
-                logger.error(error);
-                return false;
-              }
-              break;
-            case undefined:
-              try {
-                logger.log('Capturing screenshot of chrome window');
-                const png = await chromy.screenshot();
-                await saveImage(test.name, png, test.type, this.options.screenshots, this.options.testReportPath);
-              } catch (error) {
-                logger.error(error);
-                return false;
-              }
-              break;
-            default:
-              try {
-                logger.log(`Capturing screenshot of ${action.value} selector`);
-                const png = await chromy.screenshotSelector(action.value);
-                await saveImage(test.name, png, test.type, this.options.screenshots, this.options.testReportPath);
-              } catch (error) {
-                logger.error(error);
-                return false;
-              }
-              break;
-          }
-          break;
-        case actions.test:
-          try {
-            logger.log(`comparing -> ${this.options.testReportPath}/${test.name}.png
-             and ${this.options.screenshots}/${test.name}.png`);
-            const result = await compareImage(this.options, test.name);
-            logger.log(result);
-          } catch (error) {
-            logger.error(error);
-            return false;
-          }
-          break;
-        default:
-          break;
-      }
+const run = async (chromy, options, test) => {
+  // eslint-disable-next-line no-restricted-syntax
+  for (const action of test.steps) {
+    switch (action.name) {
+      case actions.goto:
+        try {
+          await chromy.goto(action.value);
+          logger.log(`goto -> ${action.value}`);
+        } catch (error) {
+          logger.error(error);
+          return false;
+        }
+        break;
+      case actions.capture:
+        switch (action.value) {
+          case 'document':
+            try {
+              logger.log('Capturing screenshot of whole DOM');
+              const png = await chromy.screenshotDocument();
+              await saveImage(test.name, png, test.type, options.screenshots, options.testReportPath);
+            } catch (error) {
+              logger.error(error);
+              return false;
+            }
+            break;
+          case undefined:
+            try {
+              logger.log('Capturing screenshot of chrome window');
+              const png = await chromy.screenshot();
+              await saveImage(test.name, png, test.type, options.screenshots, options.testReportPath);
+            } catch (error) {
+              logger.error(error);
+              return false;
+            }
+            break;
+          default:
+            try {
+              logger.log(`Capturing screenshot of ${action.value} selector`);
+              const png = await chromy.screenshotSelector(action.value);
+              await saveImage(test.name, png, test.type, options.screenshots, options.testReportPath);
+            } catch (error) {
+              logger.error(error);
+              return false;
+            }
+            break;
+        }
+        break;
+      case actions.test:
+        try {
+          logger.log(`comparing -> ${options.testReportPath}/${test.name}.png
+            and ${options.screenshots}/${test.name}.png`);
+          const result = await compareImage(options, test.name);
+          logger.log(result);
+        } catch (error) {
+          logger.error(error);
+          return false;
+        }
+        break;
+      default:
+        break;
     }
-    return true;
   }
+  return true;
+};
 
-  async run(test) {
-    const width = test.resolution.width || CHROME_WIDTH;
-    const height = test.resolution.height || CHROME_HEIGHT;
-    const flags = [`--window-size=${width},${height}`];
-    const chromy = new Chromy({
-      chromeFlags: flags,
-      port: CHROME_PORT + this.currentTestId,
-      waitTimeout: this.options.timeout,
-      visible: this.options.visible || false,
-    });
-    this.currentTestId += 1;
-    const result = await this._stepRunner(chromy, test);
-    logger.log('closing browser');
-    try {
-      chromy.close();
-    } catch (error) {
-      logger.error(error);
-      return false;
-    }
-    return result;
-  }
-}
-
-exports.ChromyRunner = ChromyRunner;
+export default run;
diff --git a/src/chromyRunner.test.js b/src/chromyRunner.test.js
diff --git a/src/compareImage.js b/src/compareImage.js
diff --git a/src/compareImage.test.js b/src/compareImage.test.js
diff --git a/src/index.js b/src/index.js
diff --git a/src/index.test.js b/src/index.test.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-export default {`
	`1`	`+exports.default = {`
`2`	`2`	`screenshots: './screenshots',`
`3`	`3`	`debug: false,`
`4`	`4`	`visible: true,`