From b78795e9246f7e4085e740f83d5002195415693c Mon Sep 17 00:00:00 2001
From: Gleb Bahmutov <gleb.bahmutov@gmail.com>
Date: Sun, 10 Dec 2017 23:04:58 -0500
Subject: [PATCH] feat: convert to JSON for dom is working, close #2

---
 README.md    | 12 ++++++++++++
 src/index.js | 24 ++++++++++++------------
 src/utils.js | 16 +++++++++++++---
 3 files changed, 37 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 44e4e39..6f78bf2 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,18 @@ If you change the site values, the saved snapshot will no longer match, throwing
 
 ![Snapshot mismatch](img/snapshot-mismatch.png)
 
+### Options
+
+You can control snapshot comparison and behavior through a few options.
+
+```js
+cy.get(...).snapshot({
+  name: 'human snapshot name', // to use in the snapshot file
+  json: false                  // convert DOM elements into JSON
+                               // when storing in the snapshot file
+})
+```
+
 ## Debugging
 
 To debug this module run with environment variable `DEBUG=@cypress/snapshot`
diff --git a/src/index.js b/src/index.js
index 46889e3..4c1e9d7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,11 +5,11 @@ const itsName = require('its-name')
 const { initStore } = require('snap-shot-store')
 const la = require('lazy-ass')
 const is = require('check-more-types')
-const switchcase = require('switchcase')
 const compare = require('snap-shot-compare')
 
 const {
   isJqueryElement,
+  serializeDomElement,
   serializeReactToHTML,
   identity,
   countSnapshots
@@ -130,23 +130,23 @@ function registerCypressSnapshot () {
     storeSnapshot({
       value,
       name,
-      // compare: compareValues,
       raiser: cyRaiser
     })
   }
 
-  const pickSerializer = switchcase({
-    // [isJqueryElement]: serializeDomElement,
-    [isJqueryElement]: serializeReactToHTML,
-    default: identity
-  })
+  const pickSerializer = (asJson, value) => {
+    if (isJqueryElement(value)) {
+      return asJson ? serializeDomElement : serializeReactToHTML
+    }
+    return identity
+  }
 
-  function snapshot (value, humanName) {
-    console.log('human name', humanName)
-    const snapshotName = getSnapshotName(this.test, humanName)
-    const serializer = pickSerializer(value)
+  function snapshot (value, { name, json } = {}) {
+    console.log('human name', name)
+    const snapshotName = getSnapshotName(this.test, name)
+    const serializer = pickSerializer(json, value)
     const serialized = serializer(value)
-    setSnapshot(snapshotName, serialized, value, humanName)
+    setSnapshot(snapshotName, serialized, value)
 
     // always just pass value
     return value
diff --git a/src/utils.js b/src/utils.js
index 6a307d9..c2520af 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -8,9 +8,7 @@ function isJqueryElement (x) {
 // converts DOM element to a JSON object
 function serializeDomElement ($el) {
   // console.log('snapshot value!', $el)
-  const json = sd.toJSON($el.context)
-  // remove React id, too transient
-  delete json.attributes['data-reactid']
+  const json = sd.toJSON($el[0])
   // console.log('as json', json)
 
   // hmm, why is value not serialized?
@@ -18,6 +16,18 @@ function serializeDomElement ($el) {
     json.attributes.value = $el.context.value
   }
 
+  return deleteReactIdFromJson(json)
+}
+
+// remove React id, too transient
+function deleteReactIdFromJson (json) {
+  if (json.attributes) {
+    delete json.attributes['data-reactid']
+  }
+
+  if (Array.isArray(json.childNodes)) {
+    json.childNodes.forEach(deleteReactIdFromJson)
+  }
   return json
 }