html snapshot from dom elements

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "standard.enable": false,
   "eslint.enable": true,
-  "eslint.autoFixOnSave": false,
+  "eslint.autoFixOnSave": true,
   "git.ignoreLimitWarning": true
 }

package.json

@@ -86,6 +86,7 @@
     "am-i-a-dependency": "1.1.2",
     "check-more-types": "2.24.0",
     "its-name": "1.0.0",
+    "js-beautify": "1.7.5",
     "lazy-ass": "1.6.0",
     "snap-shot-store": "1.2.3",
     "switchcase": "0.0.3"

src/index.js

@@ -6,7 +6,7 @@ const { initStore } = require('snap-shot-store')
 const la = require('lazy-ass')
 const is = require('check-more-types')
 const {
-  serializeDomElement,
+  isJqueryElement,
   serializeReactToHTML,
   identity,
   countSnapshots
@@ -114,10 +114,6 @@ function registerCypressSnapshot () {
     default: identity
   })
 
-  function isJqueryElement (x) {
-    return 'wrap' in x
-  }
-
   function snapshot (value, humanName) {
     console.log('human name', humanName)
     const snapshotName = getSnapshotName(this.test, humanName)

src/utils.js

@@ -1,5 +1,6 @@
 /* global Cypress */
 const sd = require('@wildpeaks/snapshot-dom')
+const beautify = require('js-beautify').html
 
 function isJqueryElement (x) {
   return 'wrap' in x
@@ -21,23 +22,29 @@ function serializeDomElement ($el) {
   return json
 }
 
-const stripReactIdAttributes = html => {
+const stripReactIdAttributes = (html) => {
   const dataReactId = /data\-reactid="[\.\d\$\-abcdfef]+"/g
   return html.replace(dataReactId, '')
 }
 
-const serializeReactToHTML = el$ => {
-  debugger
+const serializeReactToHTML = (el$) => {
   const html = el$[0].outerHTML
   const stripped = stripReactIdAttributes(html)
-  return stripped
+  const options = {
+    wrap_line_length: 80,
+    indent_inner_html: true,
+    indent_size: 2,
+    wrap_attributes: 'force'
+  }
+  const pretty = beautify(stripped, options)
+  return pretty
 }
 
-const identity = x => x
+const identity = (x) => x
 
-const publicProps = name => !name.startsWith('__')
+const publicProps = (name) => !name.startsWith('__')
 
-const countSnapshots = snapshots =>
+const countSnapshots = (snapshots) =>
   Object.keys(snapshots).filter(publicProps).length
 
 module.exports = {