Feat: updated child process so that it no longer has to compare scree…

…nshots, I have moved this functionality into its own process called compare-screenshots

app/child-process.js

@@ -6,13 +6,6 @@ var path = '';
 var referenceFolder = 'reference/';
 var testFolder = 'test/';
 
-var messages = {
-  doesNotExist: ' does not exist',
-  passed: 'Passed - ',
-  failed: 'Failed - ',
-  noReference: 'There is no reference image for '
-};
-
 var args = require('system').args;
 var isReference = args[1] === 'Test' ? false : true;
 var data = JSON.parse(args[2]);
@@ -54,21 +47,11 @@ function loopThroughEachComponent () {
 }
 
 function handleEachComponent () {
-  var base64Path = getBase64Path();
-
   clipPageToComponent(data.selectorList[currentSelector]);
   screenshotElement();
   handleBase64();
 }
 
-// TODO: Check if component is on page
-function checkIfComponentExists (selector) {
-  return page.evaluate (function (selector) {
-    if (document.querySelectorAll(selector)[0] === undefined) return false;
-    return true;
-  }, selector);
-}
-
 function clipPageToComponent (selector) {
   page.clipRect = page.evaluate (function (selector) {
     return document.querySelectorAll(selector)[0].getBoundingClientRect();
@@ -82,34 +65,18 @@ function screenshotElement () {
 }
 
 function logReferenceMessage () {
-  if (isReference === false) return;
   console.log(screenShotName());
 }
 
 function handleBase64 () {
   var base64Path = getBase64Path();
   writeBase64(base64Path);
-
-  if (isReference) return;
-
-  var isTheSame = compareBase64(base64Path);
-  logImageComparisonMessage(isTheSame);
 }
 
 function writeBase64 (base64Path) {
   fs.write(base64Path, getBase64Image(), 'w');
 }
 
-function compareBase64(base64Path) {
-  if (isReference) return;
-
-  var base64ReferencePath = getBase64ReferencePath(base64Path);
-  var base64Reference = fs.read(base64ReferencePath);
-
-  if (base64Reference === getBase64Image()) return true;
-  return false;
-}
-
 function screenShotName () {
   return viewportName + '--' + currentSelector;
 }
@@ -122,25 +89,4 @@ function getBase64Path () {
   return path + screenShotName() + '.txt';
 }
 
-function getBase64ReferencePath (base64Path) {
-  var base64ReferencePath = base64Path.replace(testFolder, referenceFolder);
-  if (!fs.exists(base64ReferencePath)) {
-    throw new Error(messages.noReference + currentSelector);
-  }
-
-  return base64ReferencePath;
-}
-
-function logImageComparisonMessage (imagesAreTheSame) {
-  var passedMessage = messages.passed + screenShotName();
-  var failedMessage = messages.failed + screenShotName();
-
-  if (imagesAreTheSame) {
-    console.log(passedMessage);
-    return;
-  }
-
-  console.log(failedMessage);
-}
-
 openPage();

app/cli.js

@@ -0,0 +1,42 @@
+module.exports = function (currentDirectory) {
+
+  const store = require('./store');
+  const inquirer = require('inquirer');
+
+  var questions = [{
+    type: 'list',
+    name: 'screenShotType',
+    message: 'Would you like to run Reference or Test screenshots?',
+    choices: [ 'Reference', 'Test', 'Exit' ],
+    default: 'Reference'
+  }];
+
+  function init () {
+    askQuestion();
+  }
+
+  function handleChange() {
+    var completed = store.getState()[0].completed;
+    if (completed === false || completed === undefined) return;
+    askQuestion();
+  }
+
+  function askQuestion () {
+    inquirer.prompt(questions).then(function (answers) {
+      if (answers.screenShotType === 'Exit') return;
+      sendQuestionResultToStore(answers.screenShotType);
+    });
+  }
+
+  function sendQuestionResultToStore (answer) {
+    store.dispatch({
+      type: 'APP',
+      answer: answer,
+      completed: false
+    });
+  }
+
+  init();
+
+  store.subscribe(handleChange);
+};

app/compare-screenshots.js

@@ -0,0 +1,62 @@
+module.exports = function (currentDirectory) {
+
+  const fs = require('fs');
+  const store = require('./store');
+  const colors = require('colors');
+
+  const message = {
+    passed: 'Passed - ',
+    failed: 'Failed - ',
+  };
+
+  var obj = {
+    test: {
+      folder: currentDirectory + '/ocular/screenshots/reference/',
+      base64: ''
+    },
+    reference: {
+      folder: currentDirectory + '/ocular/screenshots/test/',
+      base64: ''
+    }
+  }
+
+  function init () {
+    getBase64Data('test');
+    getBase64Data('reference');
+    compareReferenceAndTestBase64();
+  }
+
+  function getBase64Path (folder) {
+    var str = screenshotName.replace(/\s+/g, '');
+    return `${folder}${str}.txt`;
+  }
+
+  function getBase64Data (type) {
+    var folderName = obj[type].folder;
+
+    fs.readFile(getBase64Path(folderName), 'utf8', function (error, data) {
+      if (error) return;
+      obj[type].base64 = data;
+    });
+  }
+
+  function compareReferenceAndTestBase64 () {
+    var successMessage = message.passed + screenshotName;
+    var failedMessage = message.failed + screenshotName;
+
+    if (obj.test.base64 === obj.reference.base64) {
+      console.log(successMessage.green);
+      return;
+    }
+
+    console.log(failedMessage.red);
+  }
+
+  function handleChange () {
+    screenshotName = store.getState()[0].name;
+    if (screenshotName === undefined) return;
+    init();
+  }
+
+  store.subscribe(handleChange);
+};

app/main.js

@@ -1,40 +1,5 @@
 module.exports = function (currentDirectory) {
-
-  const store = require('./store');
+  const cli = require('./cli')(currentDirectory);
   const process = require('./process')(currentDirectory);
-  const inquirer = require('inquirer');
-  const fs = require('fs');
-
-  var questions = [{
-    type: 'list',
-    name: 'screenShotType',
-    message: 'Would you like to run Reference or Test screenshots?',
-    choices: [ 'Reference', 'Test', 'Exit' ],
-    default: 'Reference'
-  }];
-
-  function askQuestion () {
-    inquirer.prompt(questions).then(function (answers) {
-      if (answers.screenShotType === 'Exit') return;
-      sendQuestionResultToStore(answers.screenShotType);
-    });
-  }
-
-  function sendQuestionResultToStore (answer) {
-    store.dispatch({
-      type: 'APP',
-      answer: answer,
-      completed: false
-    });
-  }
-
-  function handleChange() {
-    var completed = store.getState()[0].completed;
-    if (completed === false) return;
-    askQuestion();
-  }
-
-  askQuestion();
-
-  store.subscribe(handleChange);
+  const compareScreenshots = require('./compare-screenshots')(currentDirectory);
 }

app/process.js

@@ -58,12 +58,10 @@ module.exports = function (currentDirectory) {
       return;
     }
 
-    if (output.indexOf('Passed') > -1) {
-      console.log(output.green);
-      return;
-    }
-
-    console.log(output.red);
+    store.dispatch({
+      type: 'SCREENSHOT',
+      name: output,
+    });
   }
 
   function dispatchActionWhenLastChildProcessEnds () {
@@ -79,7 +77,7 @@ module.exports = function (currentDirectory) {
 
   function handleChange () {
     var completed = store.getState()[0].completed;
-    if (completed) return;
+    if (completed || completed === undefined) return;
     loopThroughViewports();
   }
 

app/store.js

@@ -10,6 +10,10 @@ function Reducer() {
         answer: action.answer,
         completed: action.completed
       }]
+      case 'SCREENSHOT':
+        return [{
+          name: action.name,
+        }]
     default:
       return state;
   }

ocularjs-test/_client/main.css

@@ -14,12 +14,13 @@ body {
 }
 
 .container--red {
-  background-color: tomato;
-  /*background-color: blue;*/
+  /*background-color: tomato;*/
+  background-color: blue;
 }
 
 .container--yellow {
-  background-color: orange;
+  /*background-color: orange;*/
+  background-color: blue;
 }
 
 .container--green {

ocularjs-test/website.js

@@ -7,7 +7,7 @@ website.get('/', function (req, res) {
   res.sendFile(__dirname + '/index.html');
 });
 
-website.use(express.static('_client'));
+website.use(express.static('ocularjs-test/_client'));
 
 http.listen(7000, function () {
   console.log('Listening on port 7000');

package.json

@@ -17,6 +17,7 @@
     "ocularjs": "app.js"
   },
   "dependencies": {
+    "bluebird": "^3.4.6",
     "cli": "^0.11.2",
     "colors": "^1.1.2",
     "express": "^4.13.4",