From f5f0b20492d90f4b4ac5ee755760eb73782f6104 Mon Sep 17 00:00:00 2001
From: Gleb Bahmutov <gleb.bahmutov@gmail.com>
Date: Sun, 10 Dec 2017 14:03:20 -0500
Subject: [PATCH] html snapshot from dom elements

---
 .vscode/settings.json |  2 +-
 package.json          |  1 +
 src/index.js          |  6 +-----
 src/utils.js          | 21 ++++++++++++++-------
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index fc9601a..3fe16e7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "standard.enable": false,
   "eslint.enable": true,
-  "eslint.autoFixOnSave": false,
+  "eslint.autoFixOnSave": true,
   "git.ignoreLimitWarning": true
 }
diff --git a/package.json b/package.json
index 2eb2082..a3f642c 100644
--- a/package.json
+++ b/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"
diff --git a/src/index.js b/src/index.js
index 48a8ea3..547f592 100644
--- a/src/index.js
+++ b/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)
diff --git a/src/utils.js b/src/utils.js
index d46655b..e9148fe 100644
--- a/src/utils.js
+++ b/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 = {