Merge pull request #2 from mouafa/development

Development

.gitignore

@@ -14,6 +14,7 @@ yarn-debug.log*
 yarn-error.log*
 
 shots/
+__shots__/
 ignore/
 service/
 *.ignore.*

README.md

@@ -43,5 +43,9 @@ firn http://example.com/
 ```js
 const firn = require('firn')
 
-firn('http://example.com/')
+;(async () => {
+  const [err, raport] = await firn(urls, config)
+  if (err) log('😦 Oh No! ', err)
+  log('📝  raport ', raport)
+})()
 ```

__mocks__/browser.mock.js

@@ -0,0 +1,12 @@
+const page = {
+  setViewport: jest.fn(),
+  goto: jest.fn(),
+  screenshot: jest.fn(() => Buffer.from('mock')),
+  close: jest.fn()
+}
+
+const browser = {
+  newPage: jest.fn(() => page)
+}
+
+module.exports = browser

__mocks__/make-dir.js

@@ -0,0 +1 @@
+module.exports = jest.fn()

__mocks__/royax.js

@@ -0,0 +1,9 @@
+const royax = jest.fn(x => {
+  throw new Error(`\n ${x} NOT MOCKED`)
+})
+
+royax.mockResult = data => {
+  royax.mockImplementationOnce(() => data)
+}
+
+module.exports = royax

bin/cli.js

@@ -11,19 +11,14 @@ program
   .option('-c, --config [path]', 'Remove recursively')
   .option('-u, --update', 'Update specefic Shots')
   .option('-a, --all', 'Update all Shots')
-  .action(function(url, config) {
+  .action(async function(url, config) {
     if (!url.startsWith('http')) url = `https://${url}`
 
     console.log('url ', url)
-    console.log('config ', program.config)
-    firn(url)
-      .then(e => {
-        log('👍 ALL GOOD')
-      })
-      .catch(e => {
-        log('😦 Oh No! ', e)
-        process.exit(1)
-      })
+    // console.log('config ', program.config)
+    const [err, raport] = await firn(url)
+    if (err) log('😦 Oh No! ', err)
+    log('📝  raport ', raport)
   })
 
 program.parse(process.argv)

jest-setup.js

@@ -1,2 +1,10 @@
+const browser = require('./__mocks__/browser.mock')
+const { getConfig } = require('./src/config')
 // const consoleLog = console.log
 console.log = jest.fn()
+
+/* start browser mock */
+
+global.browser = browser
+global.config = getConfig()
+/* end browser mock */

main.js

@@ -1,14 +1,18 @@
 const puppeteer = require('puppeteer')
+const promx = require('promx')
 /* local */
+const { mergeConfig } = require('./src/config')
+
 const log = require('./src/lib/log')
 const { check } = require('./src/lib/check')
-const { mergeConfig } = require('./src/config')
+const raport = require('./src/lib/raport')
 
 async function main(urls, config) {
-  mergeConfig(config)
+  global.config = mergeConfig(config)
   await boot()
-  await check(urls)
+  const [err] = await promx(check(urls))
   await teardown()
+  return [err, raport.get()]
 }
 
 async function boot() {
@@ -19,7 +23,8 @@ async function boot() {
 
 async function teardown() {
   log('👋 firn')
-  global.browser.close()
+  await global.browser.close()
+  global.browser = null
 }
 
 module.exports = main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "firn",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "description": "visual regression test tool",
   "main": "main.js",
   "author": "mouafa",
@@ -15,9 +15,9 @@
     "commander": "2.17.1",
     "listr": "0.14.1",
     "make-dir": "1.3.0",
-    "pixelmatch": "4.0.2",
+    "promx": "1.0.1",
     "puppeteer": "1.7.0",
-    "royax": "0.1.1"
+    "royax": "1.0.0"
   },
   "devDependencies": {
     "coveralls": "3.0.2",

src/config/default.js

@@ -0,0 +1,17 @@
+const path = require('path')
+/* local */
+
+const viewports = require('./viewport')
+
+const resolve = pth => path.resolve(__dirname, '../../', pth)
+
+const config = {
+  viewports,
+  screenshotExt: 'png',
+  tmpShotPath: resolve('.cache'),
+  legitShotPath: resolve('__shots__/legit'),
+  fishyShotPath: resolve('__shots__/fishy'),
+  diffShotPath: resolve('__shots__/diff')
+}
+
+module.exports = config

src/config/index.js

@@ -1,21 +1,11 @@
-const path = require('path')
 /* local */
-const viewports = require('./viewport')
+const defaultConfig = require('./default')
 
-const resolve = pth => path.resolve(__dirname, '../../', pth)
+let usedConfig = { ...defaultConfig }
 
-const defaultConfig = {
-  viewports,
-  screenshotExt: 'png',
-  legitShotPath: resolve('shots/legit'),
-  pendingShotPath: resolve('.cache'),
-  fishyShotPath: resolve('shots/fishy')
-}
-
-let usedConfig = defaultConfig
-
-function mergeConfig(customConfig) {
-  usedConfig = { ...defaultConfig, ...customConfig }
+function mergeConfig(userConfig) {
+  usedConfig = { ...defaultConfig, ...userConfig }
+  return usedConfig
 }
 
 function getConfig() {

src/lib/check.js

@@ -1,22 +1,46 @@
+const Listr = require('listr')
+const promx = require('promx')
+
 const Shot = require('./shot')
 const Page = require('./page')
 const log = require('./log')
 const { arrayArg } = require('./util')
 
+const Taskr = require('./taskr')
+
+const listrOption = { concurrent: true, exitOnError: false, renderer: 'default' }
+// async function check(urls) {
+//   urls = arrayArg(urls)
+//   return Promise.all(urls.map(checkPage))
+// }
+
 async function check(urls) {
   urls = arrayArg(urls)
-  return Promise.all(urls.map(checkPage))
+  const tasks = urls.map(url => {
+    return {
+      title: url,
+      task() {
+        return checkPage(url)
+      }
+    }
+  })
+
+  return new Listr(tasks, listrOption).run()
 }
 
 async function checkPage(url) {
   const page = new Page(url)
-  await page.runTasks(verifier)
+  const tasks = page.getTasks(verifier)
+  return new Listr(tasks, listrOption)
+  // await page.runTasks(verifier)
 }
 
 async function verifier([url, viewport, suffix]) {
   const shot = new Shot(url, viewport, suffix)
   const match = await shot.check()
-  log('match', match, url, suffix)
+  // console.log('verifier', match)
+
+  return match
 }
 
 module.exports = {

src/lib/compare.js

@@ -2,7 +2,6 @@ const royax = require('royax')
 
 async function compare(img1, img2, writeTo) {
   const [err, result] = await royax(img1, img2, writeTo)
-  // console.log('result', result)
   if (err) return [err]
   const match = result.match === 1
   return [null, match]

src/lib/page.js

@@ -1,3 +1,5 @@
+const Listr = require('listr')
+
 const config = require('../config').getConfig()
 const viewports = config.viewports
 
@@ -15,16 +17,21 @@ class Page {
 
   getTasks(cb) {
     return this.set.map(options => {
-      return function task() {
-        return cb(options)
+      return {
+        title: `${options[2]}`,
+        task() {
+          return cb(options)
+        }
       }
     })
   }
 
   runTasks(cb) {
-    const tasks = this.getTasks(cb)
-    const promises = tasks.map(async task => await task())
-    return Promise.all(promises)
+    const tasks = new Listr(this.getTasks(cb), { concurrent: true, exitOnError: false })
+
+    // const promises = tasks.map(async task => await task())
+    // return Promise.all(promises)
+    return tasks.run()
   }
 }
 

src/lib/raport.js

@@ -0,0 +1,20 @@
+const raport = {}
+
+function add({ url, suffix }, data) {
+  if (!raport[url]) raport[url] = {}
+  raport[url][suffix] = data
+  return raport
+}
+
+function get() {
+  return raport
+}
+
+function isObject(object) {
+  return object !== null && typeof object === 'object'
+}
+
+module.exports = {
+  add,
+  get
+}