From 238f228bbf38f919332654f9112d99a6b1d6747b Mon Sep 17 00:00:00 2001 From: matthewmacartney Date: Fri, 9 Sep 2016 16:21:33 +0100 Subject: [PATCH] Feat: updated child process so that it no longer has to compare screenshots, I have moved this functionality into its own process called compare-screenshots --- app/child-process.js | 54 ----------------------------- app/cli.js | 42 +++++++++++++++++++++++ app/compare-screenshots.js | 62 ++++++++++++++++++++++++++++++++++ app/main.js | 39 ++------------------- app/process.js | 12 +++---- app/store.js | 4 +++ ocularjs-test/_client/main.css | 7 ++-- ocularjs-test/website.js | 2 +- package.json | 1 + 9 files changed, 121 insertions(+), 102 deletions(-) create mode 100644 app/cli.js create mode 100644 app/compare-screenshots.js diff --git a/app/child-process.js b/app/child-process.js index d03a824..f418be8 100644 --- a/app/child-process.js +++ b/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(); diff --git a/app/cli.js b/app/cli.js new file mode 100644 index 0000000..311d541 --- /dev/null +++ b/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); +}; diff --git a/app/compare-screenshots.js b/app/compare-screenshots.js new file mode 100644 index 0000000..5ed1e88 --- /dev/null +++ b/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); +}; diff --git a/app/main.js b/app/main.js index 72bc520..5548599 100755 --- a/app/main.js +++ b/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); } diff --git a/app/process.js b/app/process.js index 43d1f29..65a606b 100644 --- a/app/process.js +++ b/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(); } diff --git a/app/store.js b/app/store.js index 77deece..2872d90 100644 --- a/app/store.js +++ b/app/store.js @@ -10,6 +10,10 @@ function Reducer() { answer: action.answer, completed: action.completed }] + case 'SCREENSHOT': + return [{ + name: action.name, + }] default: return state; } diff --git a/ocularjs-test/_client/main.css b/ocularjs-test/_client/main.css index fc3a0fe..1ec8993 100644 --- a/ocularjs-test/_client/main.css +++ b/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 { diff --git a/ocularjs-test/website.js b/ocularjs-test/website.js index e77e386..34b0439 100755 --- a/ocularjs-test/website.js +++ b/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'); diff --git a/package.json b/package.json index dc7bd14..d6f9059 100644 --- a/package.json +++ b/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",