From 72961acabd9d7be22d494d155f14b6ed270d8057 Mon Sep 17 00:00:00 2001
From: Pim <pimlie@hotmail.com>
Date: Mon, 29 Oct 2018 16:48:40 +0100
Subject: [PATCH] feat: nuxt-loading enhancenments (#3891)

---
 jest.config.js                                |   5 +
 package.json                                  |   3 +-
 .../app/template/components/nuxt-loading.vue  | 184 ++++++++++++------
 packages/config/src/config/index.js           |   4 +-
 test/e2e/basic.browser.test.js                |   8 +-
 test/unit/components.test.js                  | 130 +++++++++++++
 yarn.lock                                     | 142 +++++++++++++-
 7 files changed, 401 insertions(+), 75 deletions(-)
 create mode 100644 test/unit/components.test.js

diff --git a/jest.config.js b/jest.config.js
index fed3f02f49..f4706457af 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -30,6 +30,11 @@ module.exports = {
     'examples/.*'
   ],
 
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '.*\\.(vue)$': 'vue-jest'
+  },
+
   transformIgnorePatterns: [
     '/node_modules/',
     '/dist/'
diff --git a/package.json b/package.json
index d888c5e575..8ffd0f9296 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "rollup-plugin-license": "^0.7.0",
     "rollup-plugin-node-resolve": "^3.4.0",
     "rollup-plugin-replace": "^2.1.0",
-    "sort-package-json": "^1.16.0"
+    "sort-package-json": "^1.16.0",
+    "vue-jest": "^2.6.0"
   }
 }
diff --git a/packages/app/template/components/nuxt-loading.vue b/packages/app/template/components/nuxt-loading.vue
index 5e4ca5f0e3..a6d69a4e1f 100644
--- a/packages/app/template/components/nuxt-loading.vue
+++ b/packages/app/template/components/nuxt-loading.vue
@@ -1,115 +1,177 @@
-<template>
-  <div
-    class="nuxt-progress"
-    :style="{
-      'width': percent + '%',
-      'height': height,
-      'background-color': canSuccess ? color : failedColor,
-      'opacity': show ? 1 : 0
-    }"
-  />
-</template>
-
 <script>
-import Vue from 'vue'
-
 export default {
   name: 'nuxt-loading',
   data() {
     return {
       percent: 0,
       show: false,
-      canSuccess: true,
+      canSucceed: true,
+      reversed: false,
+      skipTimerCount: 0,
+      rtl: <%= loading.rtl || false %>,
       throttle: <%= loading.throttle || 200 %>,
-      duration: <%= loading.duration || 1000 %>,
-      height: '<%= loading.height %>',
-      color: '<%= loading.color %>',
-      failedColor: '<%= loading.failedColor %>'
+      duration: <%= loading.duration || 3000 %>,
+      continuous: <%= loading.continuous || false %>
     }
   },
+  computed: {
+    left() {
+      if (!this.continuous && !this.rtl) {
+        return false
+      }
+      return this.rtl
+        ? (this.reversed ? '0px' : 'auto')
+        : (!this.reversed ? '0px' : 'auto')
+    }
+  },
+  beforeDestroy() {
+    this.clear()
+  },
   methods: {
+    clear() {
+      clearInterval(this._timer)
+      clearTimeout(this._throttle)
+      this._timer = null
+    },
     start() {
-      this.canSuccess = true
-      if (this._throttle) {
-        clearTimeout(this._throttle)
+      this.clear()
+      this.percent = 0
+      this.reversed = false
+      this.skipTimerCount = 0
+      this.canSucceed = true
+
+      if (this.throttle) {
+        this._throttle = setTimeout(() => this.startTimer(), this.throttle)
+      } else {
+        this.startTimer()
       }
-      if (this._timer) {
-        clearInterval(this._timer)
-        this._timer = null
-        this.percent = 0
-      }
-      this._throttle = setTimeout(() => {
-        this.show = true
-        this._cut = 10000 / Math.floor(this.duration)
-        this._timer = setInterval(() => {
-          this.increase(this._cut * Math.random())
-          if (this.percent > 95) {
-            this.finish()
-          }
-        }, 100)
-      }, this.throttle)
       return this
     },
     set(num) {
       this.show = true
-      this.canSuccess = true
-      this.percent = Math.floor(num)
+      this.canSucceed = true
+      this.percent = Math.min(100, Math.max(0, Math.floor(num)))
       return this
     },
     get() {
-      return Math.floor(this.percent)
+      return this.percent
     },
     increase(num) {
-      this.percent = this.percent + Math.floor(num)
+      this.percent = Math.min(100, Math.floor(this.percent + num))
       return this
     },
     decrease(num) {
-      this.percent = this.percent - Math.floor(num)
-      return this
-    },
-    finish() {
-      this.percent = 100
-      this.hide()
+      this.percent = Math.max(0, Math.floor(this.percent - num))
       return this
     },
     pause() {
       clearInterval(this._timer)
       return this
     },
+    resume() {
+      this.startTimer()
+      return this
+    },
+    finish() {
+      this.percent = this.reversed ? 0 : 100
+      this.hide()
+      return this
+    },
     hide() {
-      clearInterval(this._timer)
-      this._timer = null
-      clearTimeout(this._throttle)
-      this._throttle = null
+      this.clear()
       setTimeout(() => {
         this.show = false
-        Vue.nextTick(() => {
-          setTimeout(() => {
-            this.percent = 0
-          }, 200)
+        this.$nextTick(() => {
+          this.percent = 0
+          this.reversed = false
         })
       }, 500)
       return this
     },
     fail() {
-      this.canSuccess = false
+      this.canSucceed = false
       return this
+    },
+    startTimer() {
+      if (!this.show) {
+        this.show = true
+      }
+      if (typeof this._cut === 'undefined') {
+        this._cut = 10000 / Math.floor(this.duration)
+      }
+
+      this._timer = setInterval(() => {
+        /**
+         * When reversing direction skip one timers
+         * so 0, 100 are displayed for two iterations
+         * also disable css width transitioning
+         * which otherwise interferes and shows
+         * a jojo effect
+         */
+        if (this.skipTimerCount > 0) {
+          this.skipTimerCount--
+          return
+        }
+
+        if (this.reversed) {
+          this.decrease(this._cut)
+        } else {
+          this.increase(this._cut)
+        }
+
+        if (this.continuous) {
+          if (this.percent >= 100) {
+            this.skipTimerCount = 1
+
+            this.reversed = !this.reversed
+          } else if (this.percent <= 0) {
+            this.skipTimerCount = 1
+
+            this.reversed = !this.reversed
+          }
+        }
+      }, 100)
     }
+  },
+  render(h) {
+    let el = h(false)
+    if (this.show) {
+      el = h('div', {
+        staticClass: 'nuxt-progress',
+        class: {
+          'nuxt-progress-notransition': this.skipTimerCount > 0,
+          'nuxt-progress-failed': !this.canSucceed
+        },
+        style: {
+          'width': this.percent + '%',
+          'left': this.left
+        }
+      })
+    }
+    return el
   }
 }
 </script>
-
+<% if (loading && loading.css) { %>
 <style>
 .nuxt-progress {
   position: fixed;
   top: 0px;
   left: <%= loading.rtl === true ? 'auto' : '0px' %>;
   right: 0px;
-  height: 2px;
+  height: <%= loading.height %>;
   width: 0%;
-  transition: width 0.2s, opacity 0.4s;
   opacity: 1;
-  background-color: #efc14e;
+  transition: width 0.1s, opacity 0.4s;
+  background-color: <%= loading.color %>;
   z-index: 999999;
 }
-</style>
+
+.nuxt-progress.nuxt-progress-notransition {
+  transition: none;
+}
+
+.nuxt-progress-failed {
+  background-color: <%= loading.failedColor %>;
+}
+</style><% } %>
diff --git a/packages/config/src/config/index.js b/packages/config/src/config/index.js
index c9bd2a93dd..8a16689662 100644
--- a/packages/config/src/config/index.js
+++ b/packages/config/src/config/index.js
@@ -85,7 +85,9 @@ export default {
     height: '2px',
     throttle: 200,
     duration: 5000,
-    rtl: false
+    continuous: false,
+    rtl: false,
+    css: true
   },
   loadingIndicator: 'default',
   transition: {
diff --git a/test/e2e/basic.browser.test.js b/test/e2e/basic.browser.test.js
index 4dcf5b504e..86cdc222d3 100644
--- a/test/e2e/basic.browser.test.js
+++ b/test/e2e/basic.browser.test.js
@@ -1,5 +1,5 @@
 import Browser from '../utils/browser'
-import { loadFixture, getPort, Nuxt } from '../utils'
+import { loadFixture, getPort, Nuxt, waitFor } from '../utils'
 
 let port
 const browser = new Browser()
@@ -28,10 +28,12 @@ describe('basic browser', () => {
   })
 
   test('/noloading', async () => {
-    const { hook } = await page.nuxt.navigate('/noloading')
-    const loading = await page.nuxt.loadingData()
+    const { hook } = await page.nuxt.navigate('/noloading', false)
+    await waitFor(nuxt.options.loading.throttle + 100)
+    let loading = await page.nuxt.loadingData()
     expect(loading.show).toBe(true)
     await hook
+    loading = await page.nuxt.loadingData()
     expect(loading.show).toBe(true)
     await page.waitForFunction(
       `$nuxt.$loading.$data.show === false`
diff --git a/test/unit/components.test.js b/test/unit/components.test.js
new file mode 100644
index 0000000000..db9e3fa898
--- /dev/null
+++ b/test/unit/components.test.js
@@ -0,0 +1,130 @@
+import { resolve } from 'path'
+import { promisify } from 'util'
+import Vue from 'vue'
+import { loadFixture, waitFor } from '../utils'
+
+const renderer = require('vue-server-renderer').createRenderer()
+const renderToString = promisify(renderer.renderToString)
+
+let componentDir
+
+describe('components', () => {
+  beforeAll(async () => {
+    const config = await loadFixture('basic')
+    componentDir = resolve(config.rootDir, '.nuxt/components')
+  })
+
+  describe('nuxt-loading', () => {
+    let VueComponent
+
+    beforeAll(async () => {
+      const Component = (await import(resolve(componentDir, 'nuxt-loading.vue'))).default
+      VueComponent = Vue.extend(Component)
+    })
+
+    test('removed when not loading', async () => {
+      const component = new VueComponent().$mount()
+      const str = await renderToString(component)
+      expect(str).toBe('<!---->')
+    })
+
+    test('added when loading', async () => {
+      const component = new VueComponent().$mount()
+      component.throttle = 0
+      component.start()
+      const str = await renderToString(component)
+      expect(str).toBe('<div data-server-rendered="true" class="nuxt-progress" style="width:0%;left:false;"></div>')
+      component.clear()
+    })
+
+    test('percentage changed after 1s', async () => {
+      jest.useRealTimers()
+      const component = new VueComponent().$mount()
+      component.duration = 2000
+      component.throttle = 0
+      component.start()
+      await waitFor(250)
+      const str = await renderToString(component)
+      expect(str).not.toBe('<!---->')
+      expect(str).not.toBe('<div data-server-rendered="true" class="nuxt-progress" style="width:0%;left:false;"></div>')
+      expect(component.$data.percent).not.toBe(0)
+      component.clear()
+    })
+
+    test('can be finished', async () => {
+      jest.useFakeTimers()
+      const component = new VueComponent().$mount()
+      component.throttle = 0
+      component.start()
+      component.finish()
+      let str = await renderToString(component)
+      expect(str).toBe('<div data-server-rendered="true" class="nuxt-progress" style="width:100%;left:false;"></div>')
+      expect(component.$data.percent).toBe(100)
+      jest.runAllTimers()
+      str = await renderToString(component)
+      expect(str).toBe('<!---->')
+      expect(component.$data.percent).toBe(0)
+      component.clear()
+      jest.useRealTimers()
+    })
+
+    test('can fail', async () => {
+      const component = new VueComponent().$mount()
+      component.set(50)
+      component.fail()
+      const str = await renderToString(component)
+      expect(str).toBe('<div data-server-rendered="true" class="nuxt-progress nuxt-progress-failed" style="width:50%;left:false;"></div>')
+    })
+
+    test('not shown until throttle', async () => {
+      const component = new VueComponent().$mount()
+      component.duration = 2000
+      component.throttle = 1000
+      component.start()
+      await waitFor(300)
+      let str = await renderToString(component)
+      expect(str).toBe('<!---->')
+      await waitFor(1000)
+      str = await renderToString(component)
+      expect(str).not.toBe('<!---->')
+      expect(str).not.toBe('<div data-server-rendered="true" class="nuxt-progress" style="width:0%;left:false;"></div>')
+      component.clear()
+    })
+
+    test('can pause and resume', async () => {
+      const component = new VueComponent().$mount()
+      component.duration = 2000
+      component.throttle = 0
+      component.start()
+      await waitFor(250)
+      let str = await renderToString(component)
+      expect(str).not.toBe('<!---->')
+      component.pause()
+      await waitFor(500)
+      const str2 = await renderToString(component)
+      expect(str2).toBe(str)
+      component.resume()
+      await waitFor(500)
+      str = await renderToString(component)
+      expect(str).not.toBe('<!---->')
+      expect(str).not.toBe(str2)
+      component.clear()
+    })
+
+    test('continues after duration', async () => {
+      const component = new VueComponent().$mount()
+      component.continuous = true
+      component.duration = 500
+      component.throttle = 0
+      component.start()
+      await waitFor(850)
+      const str = await renderToString(component)
+      expect(str).not.toBe('<!---->')
+      expect(str).not.toBe('<div data-server-rendered="true" class="nuxt-progress" style="width:100%;left:false;"></div>')
+      expect(str).not.toBe('<div data-server-rendered="true" class="nuxt-progress" style="width:100%;left:auto;"></div>')
+      expect(str).not.toBe('<div data-server-rendered="true" class="nuxt-progress nuxt-progress-notransition" style="width:100%;left:false;"></div>')
+      expect(str).not.toBe('<div data-server-rendered="true" class="nuxt-progress nuxt-progress-notransition" style="width:100%;left:auto;"></div>')
+      component.clear()
+    })
+  })
+})
diff --git a/yarn.lock b/yarn.lock
index a9a0185bec..c816802c6d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1391,11 +1391,26 @@
   resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
-"@types/node@*":
+"@types/node@*", "@types/node@^10.11.7":
   version "10.12.0"
   resolved "https://registry.npmjs.org/@types/node/-/node-10.12.0.tgz#ea6dcbddbc5b584c83f06c60e82736d8fbb0c235"
   integrity sha512-3TUHC3jsBAB7qVRGxT6lWyYo2v96BMmD2PTcl47H25Lu7UXtFH/2qqmKiVrnel6Ne//0TFYf6uvNX+HW2FRkLQ==
 
+"@types/semver@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.npmjs.org/@types/semver/-/semver-5.5.0.tgz#146c2a29ee7d3bae4bf2fcb274636e264c813c45"
+  integrity sha512-41qEJgBH/TWgo5NFSvBCJ1qkoi3Q6ONSF2avrHq1LVEZfYpdHmj0y9SuTK+u9ZhG1sYQKBL1AWXKyLWP4RaUoQ==
+
+"@types/strip-bom@^3.0.0":
+  version "3.0.0"
+  resolved "http://registry.npmjs.org/@types/strip-bom/-/strip-bom-3.0.0.tgz#14a8ec3956c2e81edb7520790aecf21c290aebd2"
+  integrity sha1-FKjsOVbC6B7bdSB5CuzyHCkK69I=
+
+"@types/strip-json-comments@0.0.30":
+  version "0.0.30"
+  resolved "https://registry.npmjs.org/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
+  integrity sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==
+
 "@vue/component-compiler-utils@^2.0.0":
   version "2.2.0"
   resolved "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-2.2.0.tgz#bbbb7ed38a9a8a7c93abe7ef2e54a90a04b631b4"
@@ -2107,6 +2122,24 @@ babel-plugin-syntax-object-rest-spread@^6.13.0:
   resolved "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
   integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
 
+babel-plugin-transform-es2015-modules-commonjs@^6.26.0:
+  version "6.26.2"
+  resolved "https://registry.npmjs.org/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.2.tgz#58a793863a9e7ca870bdc5a881117ffac27db6f3"
+  integrity sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==
+  dependencies:
+    babel-plugin-transform-strict-mode "^6.24.1"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-types "^6.26.0"
+
+babel-plugin-transform-strict-mode@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
+  integrity sha1-1fr3qleKZbvlkc9e2uBKDGcCB1g=
+  dependencies:
+    babel-runtime "^6.22.0"
+    babel-types "^6.24.1"
+
 babel-plugin-transform-vue-jsx@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-4.0.1.tgz#2c8bddce87a6ef09eaa59869ff1bfbeeafc5f88d"
@@ -2169,7 +2202,7 @@ babel-traverse@^6.0.0, babel-traverse@^6.18.0, babel-traverse@^6.26.0:
     invariant "^2.2.2"
     lodash "^4.17.4"
 
-babel-types@^6.0.0, babel-types@^6.18.0, babel-types@^6.26.0:
+babel-types@^6.0.0, babel-types@^6.18.0, babel-types@^6.24.1, babel-types@^6.26.0:
   version "6.26.0"
   resolved "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
   integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
@@ -2765,6 +2798,11 @@ cliui@^4.0.0:
     strip-ansi "^4.0.0"
     wrap-ansi "^2.0.0"
 
+clone@2.x:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
 clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
@@ -2872,7 +2910,7 @@ commander@2.17.x, commander@~2.17.1:
   resolved "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
   integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
-commander@^2.18.0:
+commander@^2.18.0, commander@^2.19.0:
   version "2.19.0"
   resolved "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
@@ -2940,7 +2978,7 @@ concat-stream@1.6.2, concat-stream@^1.5.0, concat-stream@^1.6.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-config-chain@^1.1.11:
+config-chain@^1.1.11, config-chain@~1.1.5:
   version "1.1.12"
   resolved "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
   integrity sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==
@@ -3335,6 +3373,16 @@ css-what@2.1:
   resolved "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
   integrity sha1-lGfQMsOM+u+58teVASUwYvh/ob0=
 
+css@^2.1.0:
+  version "2.2.4"
+  resolved "https://registry.npmjs.org/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
+  dependencies:
+    inherits "^2.0.3"
+    source-map "^0.6.1"
+    source-map-resolve "^0.5.2"
+    urix "^0.1.0"
+
 cssdb@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/cssdb/-/cssdb-3.2.1.tgz#65e7dc90be476ce5b6e567b19f3bd73a8c66bcb5"
@@ -3876,6 +3924,18 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+editorconfig@^0.15.0:
+  version "0.15.2"
+  resolved "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.2.tgz#047be983abb9ab3c2eefe5199cb2b7c5689f0702"
+  integrity sha512-GWjSI19PVJAM9IZRGOS+YKI8LN+/sjkSjNyvxL5ucqP9/IqtYNXBaQ/6c/hkPNYQHyOHra2KoXZI/JVpuqwmcQ==
+  dependencies:
+    "@types/node" "^10.11.7"
+    "@types/semver" "^5.5.0"
+    commander "^2.19.0"
+    lru-cache "^4.1.3"
+    semver "^5.6.0"
+    sigmund "^1.0.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -4441,6 +4501,13 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+extract-from-css@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.npmjs.org/extract-from-css/-/extract-from-css-0.4.4.tgz#1ea7df2e7c7c6eb9922fa08e8adaea486f6f8f92"
+  integrity sha1-HqffLnx8brmSL6COitrqSG9vj5I=
+  dependencies:
+    css "^2.1.0"
+
 extract-zip@^1.6.6:
   version "1.6.7"
   resolved "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz#a840b4b8af6403264c8db57f4f1a74333ef81fe9"
@@ -4605,6 +4672,14 @@ finalhandler@1.1.1, finalhandler@^1.1.1:
     statuses "~1.4.0"
     unpipe "~1.0.0"
 
+find-babel-config@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/find-babel-config/-/find-babel-config-1.1.0.tgz#acc01043a6749fec34429be6b64f542ebb5d6355"
+  integrity sha1-rMAQQ6Z0n+w0Qpvmtk9ULrtdY1U=
+  dependencies:
+    json5 "^0.5.1"
+    path-exists "^3.0.0"
+
 find-cache-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
@@ -6207,6 +6282,16 @@ jest@^23.6.0:
     import-local "^1.0.0"
     jest-cli "^23.6.0"
 
+js-beautify@^1.6.14:
+  version "1.8.8"
+  resolved "https://registry.npmjs.org/js-beautify/-/js-beautify-1.8.8.tgz#1eb175b73a3571a5f1ed8d98e7cf2b05bfa98471"
+  integrity sha512-qVNq7ZZ7ZbLdzorvSlRDadS0Rh5oyItaE95v6I4wbbuSiijxn7SnnsV6dvKlcXuO2jX7lK8tn9fBulx34K/Ejg==
+  dependencies:
+    config-chain "~1.1.5"
+    editorconfig "^0.15.0"
+    mkdirp "~0.5.0"
+    nopt "~4.0.1"
+
 js-levenshtein@^1.1.3:
   version "1.1.4"
   resolved "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.4.tgz#3a56e3cbf589ca0081eb22cd9ba0b1290a16d26e"
@@ -6643,7 +6728,7 @@ lodash@4.17.9:
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.9.tgz#9c056579af0bdbb4322e23c836df13ef2b271cb7"
   integrity sha512-vuRLquvot5sKUldMBumG0YqLvX6m/RGBBOmqb3CWR/MC/QvvD1cTH1fOqxz2FJAQeoExeUdX5Gu9vP2EP6ik+Q==
 
-lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1:
+lodash@4.x, lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1:
   version "4.17.11"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -7171,6 +7256,14 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+node-cache@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/node-cache/-/node-cache-4.2.0.tgz#48ac796a874e762582692004a376d26dfa875811"
+  integrity sha512-obRu6/f7S024ysheAjoYFEEBqqDWv4LOMNJEuO8vMeEw2AT4z+NCzO4hlc2lhI4vATzbCQv6kke9FVdx0RbCOw==
+  dependencies:
+    clone "2.x"
+    lodash "4.x"
+
 node-fetch-npm@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.2.tgz#7258c9046182dca345b4208eda918daf33697ff7"
@@ -7282,7 +7375,7 @@ node-releases@^1.0.0-alpha.14:
   dependencies:
     abbrev "1"
 
-nopt@^4.0.1:
+nopt@^4.0.1, nopt@~4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
   integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=
@@ -9580,7 +9673,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
+"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
   version "5.6.0"
   resolved "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
   integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==
@@ -9699,6 +9792,11 @@ shellwords@^0.1.1:
   resolved "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+sigmund@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
+  integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -9809,7 +9907,7 @@ source-list-map@^2.0.0:
   resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-resolve@^0.5.0:
+source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.2"
   resolved "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
   integrity sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==
@@ -10115,7 +10213,7 @@ strip-indent@^2.0.0:
   resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
   integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
 
-strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
+strip-json-comments@^2.0.0, strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
@@ -10455,6 +10553,16 @@ tryer@^1.0.0:
   resolved "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
+tsconfig@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/tsconfig/-/tsconfig-7.0.0.tgz#84538875a4dc216e5c4a5432b3a4dec3d54e91b7"
+  integrity sha512-vZXmzPrL+EmC4T/4rVlT2jNVMWCi/O4DIiSj3UHg1OE5kCKbk4mfrXc6dZksLgRM/TZlKnousKH9bbTazUWRRw==
+  dependencies:
+    "@types/strip-bom" "^3.0.0"
+    "@types/strip-json-comments" "0.0.30"
+    strip-bom "^3.0.0"
+    strip-json-comments "^2.0.0"
+
 tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
@@ -10786,6 +10894,22 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.1.tgz#b2d3d95402a811602380783ea4f566eb875569a2"
   integrity sha512-AA86yKZ5uOKz87/q1UpngEXhbRkaYg1b7HMMVRobNV1IVKqZe8oLIzo6iMocVwZXnYitlGwf2k4ZRLOZlS8oPQ==
 
+vue-jest@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.npmjs.org/vue-jest/-/vue-jest-2.6.0.tgz#23dc99a4dce0bb59fea3946e1317b234968cf12a"
+  integrity sha512-kVgKGcycJ1ce3tUc48JKFSSXsbRNy5QOCAcK9k1aYDRD0m6tTbbFm8Q8yGkfsXLyFeUsvO1OEgsCYxZeD5GL2g==
+  dependencies:
+    babel-plugin-transform-es2015-modules-commonjs "^6.26.0"
+    chalk "^2.1.0"
+    extract-from-css "^0.4.4"
+    find-babel-config "^1.1.0"
+    js-beautify "^1.6.14"
+    node-cache "^4.1.1"
+    object-assign "^4.1.1"
+    source-map "^0.5.6"
+    tsconfig "^7.0.0"
+    vue-template-es2015-compiler "^1.6.0"
+
 vue-loader@^15.4.2:
   version "15.4.2"
   resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-15.4.2.tgz#812bb26e447dd3b84c485eb634190d914ce125e2"