fix: indentation issues (#1)

- Fix issues with indentation
  - If using two spaces / complex structures indentation is broken
  - Use pretty which solves these issues
- Update dependencies
- Add missing dev dependencies
- Use vue-jest
- Use npm version for vue-test-utils

index.js

@@ -1,11 +1,11 @@
-const beautify = require('js-beautify').html
+const beautify = require('pretty')
 
 module.exports = {
   test (object) {
     return typeof object === 'string' && object[0] === '<'
   },
   print (val) {
     const removedServerRenderedText = val.replace(/ data-server-rendered="true"/, '')
-    return beautify(removedServerRenderedText, {})
+    return beautify(removedServerRenderedText, { indent_size: 4 })
   }
 }

package.json

@@ -28,20 +28,22 @@
   },
   "homepage": "https://github.com/eddyerburgh/jest-serializer-vue#readme",
   "devDependencies": {
-    "babel-jest": "^21.0.0",
-    "conventional-changelog": "^1.1.5",
-    "eslint": "^4.6.1",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-node": "^5.1.1",
-    "eslint-plugin-promise": "^3.5.0",
+    "babel-jest": "21.2.0",
+    "babel-preset-es2015": "6.24.1",
+    "conventional-changelog": "1.1.6",
+    "eslint": "4.10.0",
+    "eslint-config-standard": "10.2.1",
+    "eslint-plugin-import": "2.8.0",
+    "eslint-plugin-node": "5.2.1",
+    "eslint-plugin-promise": "3.6.0",
     "eslint-plugin-standard": "^3.0.1",
     "eslint-plugin-vue": "beta",
-    "jest": "^21.0.1",
-    "jest-vue": "^0.5.2",
-    "vue": "^2.4.2",
-    "vue-server-renderer": "^2.4.2",
-    "vue-test-utils": "https://github.com/vuejs/vue-test-utils"
+    "jest": "21.2.1",
+    "vue": "2.5.3",
+    "vue-jest": "1.0.2",
+    "vue-server-renderer": "2.5.3",
+    "vue-template-compiler": "2.5.3",
+    "vue-test-utils": "1.0.0-beta.4"
   },
   "jest": {
     "moduleFileExtensions": [
@@ -51,13 +53,13 @@
     ],
     "transform": {
       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
-      ".*\\.vue$": "<rootDir>/node_modules/jest-vue"
+      ".*\\.vue$": "<rootDir>/node_modules/vue-jest"
     },
     "snapshotSerializers": [
       "<rootDir>/index.js"
     ]
   },
   "dependencies": {
-    "js-beautify": "^1.7.3"
+    "pretty": "2.0.0"
   }
 }

test/ListSpaced.spec.js

@@ -0,0 +1,14 @@
+import { shallow } from 'vue-test-utils'
+import ListSpaced from './components/ListSpaced.vue'
+import { createRenderer } from 'vue-server-renderer'
+
+describe('ListSpaced.vue', () => {
+  it('hasn\'t changed snapshot', () => {
+    const renderer = createRenderer()
+    const wrapper = shallow(ListSpaced)
+    renderer.renderToString(wrapper.vm, (err, str) => {
+      if (err) throw new Error(err)
+      expect(str).toMatchSnapshot()
+    })
+  })
+})

test/__snapshots__/ListSpaced.spec.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ListSpaced.vue hasn't changed snapshot 1`] = `
+<aside role="banner" class="test">
+    <a title="one" class="one">
+        one
+    </a>
+    <a title="two" class="two">
+        two
+    </a>
+    <a title="three" class="three">
+        three
+    </a>
+    <a title="four" class="four">
+        four
+    </a>
+</aside>
+`;

test/components/List.vue

@@ -1,6 +1,8 @@
 <template>
     <ul>
-        <li v-for="(item, key) in items" :key={key}>
+        <li
+            v-for="(item, key) in items"
+            :key="key">
             {{ item }}
         </li>
     </ul>

test/components/ListSpaced.vue

@@ -0,0 +1,30 @@
+<template>
+  <aside class="test" role="banner">
+    <a
+      title="one"
+      class="one">
+      one
+    </a>
+    <a
+      title="two"
+      class="two">
+      two
+    </a>
+    <a
+      title="three"
+      class="three">
+      three
+    </a>
+    <a
+      title="four"
+      class="four">
+      four
+    </a>
+  </aside>
+</template>
+
+<script>
+export default {
+  name: 'ListSpaced'
+}
+</script>