snap-shot-jsdom-test

jsdom example for snap-shot project

This is a test project for snap-shot for snapshot testing.

• DOM element serialized with package-snapshot-dom
• output HTML can be pretty formatted with posthtml-beautify or other processors

See spec.js for actual test code. In principle to use snapshot testing on Node with jsdom and mocha

• Run mocha with mocha -r jsdom-global/register spec.js option that loads jsdom-global module
• Beautify the element's HTML representation, for example

const clean = require('clean-html').clean
const snapshot = require('snap-shot')

const pretty = html => {
  let result
  clean(html, out => {
    result = out
  })
  return result
}
it('can serialize div using js-beautify.html', function () {
  const div = document.createElement('div')
  div.innerHTML = '<div class="hello"><div id="message">Hello World</div></div>'
  snapshot(pretty(div.innerHTML))
})

• Alternatively use JSON representation of the DOM tree

const elementToJson = require('@wildpeaks/snapshot-dom').toJSON
const snapshot = require('snap-shot')
it('can serialize div', function () {
  const div = document.createElement('div')
  div.innerHTML = '<p class="hello">Hello World</p>'
  snapshot(elementToJson(div))
})