visual-acceptance-test

Create visual acceptance tests.

Usage

Install visual-acceptance-test

$ npm install doodzik/visual-acceptance-test

Configure your Visual Accaptance Test

Create a vat.js file in the project root

const {
  browser,
  FileServer,
  Time,
  diff,
  confirmation
} = require('visual-acceptance-test')

const fs        = require('fs-extra')
const path      = require('path')
const time      = new Time.LastCommit(__dirname)
const staticDir = path.resolve(__dirname, '.tmp')
const server    = new FileServer({dir: staticDir})

const dimensions = [{width: 1080}, {width: 720}]

function pathTo(dir) {
  return path.resolve(__dirname, '.visual-acceptance-test', dir)
}

var shell = require('shelljs')

function build() {
  return new Promise(function(resolve, reject) {
    shell.exec('npm install', function(code, stdout, stderr) {
      shell.exec('make build', function(code, stdout, stderr) {
        resolve()
      })
    })
  })
}


return Promise.all([
  server.listen(),
  build(),
  fs.remove(pathTo('HEAD')),
  fs.remove(pathTo('DIFF')),
])
  .then(() => browser.screenshotSitemap({server, dir: pathTo('HEAD'), dimensions}))
  .then(() => time.past())
  .then(build)
  .then(() => browser.screenshotSitemap({server, dir: pathTo(time.pastCommit), dimensions}))
  .then(() => time.now())
  .then(() => {
    return diff({
      actual:      pathTo(time.pastCommit),
      expected:    pathTo('HEAD'),
      diff:        pathTo('DIFF'),
      persistDiff: true
    })
  })
  .then(result => {
    return (process.env.CI) ? confirmation.cli({result}) : confirmation.browser({result})
  })
  .then(exitCode => {
    return server.destroy().then(() => process.exit(exitCode))
  })

DOESN'T WORK YET

Create a vat.js file in the project root

const {
  browser,
  FileServer,
  Time,
  diff,
  confirmation
} = require('visual-acceptance-test')

const fs        = require('fs-extra')
const path      = require('path')
const time      = new Time.LastCommit(__dirname)
const staticDir = path.resolve(__dirname, '.tmp')
const server    = new FileServer({dir: staticDir})

const dimensions = [{width: 1080}, {width: 720}]

function pathTo(dir) {
  return path.resolve(__dirname, '.visual-acceptance-test', dir)
}

var shell = require('shelljs')

function build(pathToResults) {
  return new Promise(function(resolve, reject) {
    shell.exec('npm install', function(code, stdout, stderr) {
      shell.exec(`VAT_DIR=${pathToResults} make test`, function(code, stdout, stderr) {
        resolve()
      })
    })
  })
}


return Promise.all([
  server.listen(),
  fs.remove(pathTo('HEAD')),
  fs.remove(pathTo('DIFF')),
])
  .then(() => build(pathTo('HEAD')))
  .then(() => time.past())
  .then(() => build(pathTo(time.pastCommit)))
  .then(() => time.now())
  .then(() => {
    return diff({
      actual:      pathTo(time.pastCommit),
      expected:    pathTo('HEAD'),
      diff:        pathTo('DIFF'),
      persistDiff: true
    })
  })
  .then(result => {
    return (process.env.CI) ? confirmation.cli({result}) : confirmation.browser({result})
  })
  .then(exitCode => {
    return server.destroy().then(() => process.exit(exitCode))
  })

And then add the following helper in your tests where you want to test your website visuals. NightmareJs

const { browser, } = require('visual-acceptance-test')
const Nightmare    = require('nightmare')

browser.dynamicScreenshot(Nightmare) 

const nightmare=new Nightmare({ show: false, frame: false, useContentSize: true})

nightmare
  .goto('https://duckduckgo.com')
  .type('#search_form_input_homepage', 'github nightmare')
  .click('#search_button_homepage')
  .wait('#r1-0 a.result__a')
  .vatScreenshot(() => document.querySelector('#r1-0 a.result__a').href)
  .end()