feat: better comparator function, close #3

.vscode/settings.json

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

package.json

@@ -88,6 +88,7 @@
     "its-name": "1.0.0",
     "js-beautify": "1.7.5",
     "lazy-ass": "1.6.0",
+    "snap-shot-compare": "2.7.1",
     "snap-shot-store": "1.2.3",
     "switchcase": "0.0.3"
   }

src/index.js

@@ -5,15 +5,24 @@ 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,
   serializeReactToHTML,
   identity,
   countSnapshots
 } = require('./utils')
-const switchcase = require('switchcase')
+
 /* eslint-disable no-console */
 
+function compareValues ({ expected, value }) {
+  const noColor = true
+  const json = true
+  return compare({ expected, value, noColor, json })
+}
+
 function registerCypressSnapshot () {
   la(is.fn(global.before), 'missing global before function')
   la(is.fn(global.after), 'missing global after function')
@@ -82,29 +91,47 @@ function registerCypressSnapshot () {
     const message = Cypress._.last(name)
     console.log('current snapshot name', name)
 
+    const devToolsLog = {
+      value
+    }
+    if (isJqueryElement($el)) {
+      // only add DOM elements, otherwise "expected" value is enough
+      devToolsLog.$el = $el
+    }
+
     const options = {
       name: 'snapshot',
       message,
-      consoleProps: () => {
+      consoleProps: () => devToolsLog
-        const devToolsLog = {
-          value,
-          snapshot: message
-        }
-        if ($el) {
-          devToolsLog.$el = $el
-        }
-        return devToolsLog
-      }
     }
 
     if ($el) {
       options.$el = $el
     }
 
+    const cyRaiser = ({ value, expected }) => {
+      const result = compareValues({ expected, value })
+      result.orElse((json) => {
+        // by deleting property and adding it at the last position
+        // we reorder how the object is displayed
+        // We want convenient:
+        //   - message
+        //   - expected
+        //   - value
+        devToolsLog.message = json.message
+        devToolsLog.expected = expected
+        delete devToolsLog.value
+        devToolsLog.value = value
+        throw new Error(`Snapshot difference\n${json.message}`)
+      })
+    }
+
     Cypress.log(options)
     storeSnapshot({
       value,
-      name
+      name,
+      // compare: compareValues,
+      raiser: cyRaiser
     })
   }
 

src/utils.js

@@ -1,9 +1,12 @@
-/* global Cypress */
 const sd = require('@wildpeaks/snapshot-dom')
 const beautify = require('js-beautify').html
 
 function isJqueryElement (x) {
-  return 'wrap' in x
+  // had to work around "switchcase" bug
+  function isObject (x) {
+    return x instanceof Object
+  }
+  return x && isObject(x) && 'wrap' in x
 }
 
 // converts DOM element to a JSON object