Add Input Value

* Move files around
* Documentation
* Add in different data types
* Have Travis verify Node support
* Force npm version in Travis
* Improve stringify
* EOL
* Bump and Deps
* segregate date because travis
* Prevent test bleed

Author: TheJaredWilcurt

.travis.yml

@@ -1,9 +1,13 @@
 sudo: required
 dist: trusty
 language: node_js
+# This ensures we don't accidentally stop supporting our lowest supported Node version
 node_js:
-  - "13"
+  - "8.3.0"
+# However Node 8.3.0 comes with npm 5.3.0.
+# npm 5.7.1 is the first version to support npm ci
 install:
+    - npm install -g [email protected]
     - npm ci
 script:
     - npm run travis

README.md

@@ -211,7 +211,9 @@ module.exports = {
       removeDataVId: true,
       removeIdTest: false,
       removeServerRendered: true,
-      stringifyObjects: false
+      addInputValues: false,
+      stringifyObjects: false,
+      verbose: true
     }
   }
 };
@@ -229,6 +231,8 @@ removeDataQa         | `false`           | Removes `data-qa="whatever"` from you
 removeDataVId        | `true`            | Removes `data-v-1234abcd=""` from your snapshots. Important if a 3rd-party component uses scoped styles, to prevent ID changes from breaking your `mount` based tests when updating a dependency.
 removeIdTest         | `false`           | Removes `id="test-whatever"` or `id="testWhatever"`from snapshots. **Warning:** You should never use ID's for test tokens, as they can also be used by JS and CSS, making them more brittle. Use `data-test-id` instead.
 removeServerRendered | `true`            | Removes `data-server-rendered="true"` from your snapshots if true.
+verbose              | `true`            | Logs to the console errors or other messages if true. **Strongly recommended** if using experimental features.
+addInputValues       | `false`           | **EXPERIMENTAL** Displays the value of form fields. `<input>` becomes `<input value="whatever">` in your snapshots. Requires you pass in `wrapper`, not `wrapper.html()`. On deeply nested components, it may exceed callstack.
 stringifyObjects     | `false`           | **EXPERIMENTAL** Replaces `title="[object Object]"` with `title="{a:'asdf'}"` in your snapshots, allowing you to see the data in the snapshot. Requires you to pass in `wrapper`, not `wrapper.html()`. This is still a work in progress. On deeply nested componets, it may exceed callstack.
 
 
@@ -294,16 +298,16 @@ describe('YourComponent.vue', () => {
 });
 ```
 
-**How do I opt out of stringifyObjects for one test?** - This is actually much easier. Stringify objects can only be done on a Vue VNode. So if you do `.html()` prior to sending it, it will always skip the `stringifyObjects` code. This allows you to use this experimental feature more easily, while opting out of the more troublesome tests.
+**How do I opt out of stringifyObjects or addInputValues for one test?** - This is actually much easier. These experimetnal features can only be done on a Vue VNode. So if you do `.html()` prior to sending it, it will always skip these transforms. This allows you to use these experimental feature more easily, while opting out of the more troublesome tests.
 
 ```js
 test('Assuming stringifyObjects is enabled', () => {
   const wrapper = shallowMount(YourComponent);
 
   expect(wrapper)
-    .toMatchSnapshot('Stringify objects');
+    .toMatchSnapshot('Stringify objects and add input values');
 
   expect(wrapper.html())
-    .toMatchSnapshot('Opt out of stringify objects');
+    .toMatchSnapshot('Opt out of stringify objects and adding input values');
 });
 ```

index.js

@@ -1,106 +1,11 @@
 const beautify = require('js-beautify').html;
 const fs = require('fs');
+const _cloneDeep = require('lodash.clonedeep');
 
 const helpers = require('./src/helpers.js');
 const loadOptions = require('./src/loadOptions.js');
-const replaceObjectObject = require('./src/replaceObjectObject.js');
-const removeTestTokens = require('./src/removeTestTokens.js');
-
-/**
- * Determines if the passed in value is markup.
- *
- * @param  {string}  received  The markup to be serialized
- * @return {boolean}           true = value is HTML
- */
-function isHtmlString (received) {
-  return (
-    received &&
-    typeof(received) === 'string' &&
-    received.startsWith('<')
-  );
-}
-
-/**
- * Determines if the passed in value is a Vue wrapper.
- *
- * @param  {object}  received  The Vue wrapper containing the markup to be serialized
- * @return {boolean}           true = value is a Vue wrapper
- */
-function isVueWrapper (received) {
-  return (
-    received &&
-    typeof(received) === 'object' &&
-    typeof(received.isVueInstance) === 'function'
-  );
-}
-
-/**
- * This removes the data-server-rendered="true" from your snapshots.
- *
- * @param  {string} html     The markup being serialized
- * @param  {object} options  Options object for this serializer
- * @return {string}          Modified HTML string
- */
-function removeServerRenderedText (html, options) {
-  if (!options || options.removeServerRendered) {
-    const $ = helpers.$(html);
-
-    $('[data-server-rendered]').removeAttr('data-server-rendered');
-
-    return $.html();
-  }
-  return html;
-}
-
-/**
- * This removes data-v-1234abcd="" from your snapshots.
- *
- * @param  {string} html     The markup being serialized
- * @param  {object} options  Options object for this serializer
- * @return {string}          Modified HTML string
- */
-function removeScopedStylesDataVIDAttributes (html, options) {
-  if (!options || options.removeDataVId) {
-    // [-\w]+ will catch 1 or more instaces of a-z, A-Z, 0-9, hyphen (-), or underscore (_)
-    const regex = / data-v-[-\w]+/g;
-
-    // [' data-v-asdf=""', ' data-v-qwer', ' data-v-asdf']
-    let dataVIds = html.match(regex) || [];
-    // ['data-v-asdf', 'data-v-qwer', 'data-v-asdf']
-    dataVIds = dataVIds.map(function (match) {
-      return match.trim().replace('=""', '');
-    });
-    // ['data-v-asdf', 'data-v-qwer']
-    dataVIds = Array.from(new Set(dataVIds));
-
-    const $ = helpers.$(html);
-    dataVIds.forEach(function (attribute) {
-      $('[' + attribute + ']').removeAttr(attribute);
-    });
-
-    html = $.html();
-  }
-  return html;
-}
-
-/**
- * This removes all HTML comments from your snapshots.
- * Normal <!---->
- * Multi-line <!-- \n asdf \n asdf \n -->
- * Containing HTML <!-- <div></div> -->
- *
- * @param  {string} html     The markup being serialized
- * @param  {object} options  Options object for this serializer
- * @return {string}          Modified HTML string
- */
-function removeAllComments (html, options) {
-  if (options && options.removeComments) {
-    // The best Stackoverflow has to offer.
-    // Also removes a trailing newline if it exists.
-    return html.replace(/(?=<!--)([\s\S]*?)-->(\n)?/g, '');
-  }
-  return html;
-}
+const stringManipulation = require('./src/stringManipulation.js');
+const vnodeManipulation = require('./src/vnodeManipulation.js');
 
 module.exports = {
   /**
@@ -111,7 +16,7 @@ module.exports = {
    * @return {boolean}                 true = Tells Jest to run the print function
    */
   test: function (received) {
-    return isHtmlString(received) || isVueWrapper(received);
+    return helpers.isHtmlString(received) || helpers.isVueWrapper(received);
   },
   /**
    * Print function for Jest's serializer API.
@@ -124,14 +29,10 @@ module.exports = {
     const options = loadOptions(fs);
 
     let html = received || '';
-    if (isVueWrapper(received)) {
-      html = replaceObjectObject(received, options) || '';
-    }
-    html = removeServerRenderedText(html, options);
-    html = removeTestTokens(html, options);
-    html = removeScopedStylesDataVIDAttributes(html, options);
-    html = removeAllComments(html, options);
+    html = vnodeManipulation(html, options, _cloneDeep);
+    html = stringManipulation(html, options);
 
+    // Format markup
     return beautify(html, options.formatting);
   }
 };