test: improve nuxt-loading component tests (#5005)

package.json

@@ -28,6 +28,8 @@
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.3.1",
     "@nuxtjs/eslint-config": "^0.0.1",
+    "@vue/server-test-utils": "^1.0.0-beta.29",
+    "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",

packages/vue-app/test/__utils__/index.js

@@ -0,0 +1,5 @@
+export const vmTick = (vm) => {
+  return new Promise((resolve) => {
+    vm.$nextTick(resolve)
+  })
+}

packages/vue-app/test/nuxt-loading.test.js

@@ -0,0 +1,167 @@
+/**
+ * @jest-environment jsdom
+ */
+import { resolve } from 'path'
+import { mount, createLocalVue } from '@vue/test-utils'
+import { renderToString } from '@vue/server-test-utils'
+import { loadFixture } from '../../../test/utils'
+import { vmTick } from './__utils__'
+
+jest.useFakeTimers()
+
+describe('nuxt-loading', () => {
+  let localVue
+  let Component
+
+  beforeAll(async () => {
+    const config = await loadFixture('basic')
+    const componentDir = resolve(config.rootDir, '.nuxt/components')
+
+    localVue = createLocalVue()
+    Component = (await import(resolve(componentDir, 'nuxt-loading.vue'))).default
+  })
+
+  afterEach(() => jest.clearAllTimers())
+
+  test('removed when not loading', () => {
+    const str = renderToString(Component)
+    expect(str).toBe('<!---->')
+  })
+
+  test('added when loading', () => {
+    const wrapper = mount(Component, { localVue })
+
+    wrapper.setData({ throttle: 0 })
+    wrapper.vm.start()
+
+    expect(wrapper.html()).toBe('<div class="nuxt-progress" style="width: 0%;"></div>')
+  })
+
+  test('percentage changed after 1s', () => {
+    const wrapper = mount(Component, { localVue })
+    wrapper.setData({
+      duration: 1000,
+      throttle: 0
+    })
+
+    wrapper.vm.start()
+
+    jest.advanceTimersByTime(250)
+
+    const html = wrapper.html()
+    expect(html).not.toBe('<div class="nuxt-progress" style="width:0%;"></div>')
+    expect(wrapper.vm.get()).not.toBe(0)
+  })
+
+  test('can be finished', async () => {
+    const wrapper = mount(Component, { localVue })
+
+    wrapper.setData({
+      duration: 1000,
+      throttle: 0
+    })
+
+    wrapper.vm.start()
+    wrapper.vm.finish()
+
+    let html = wrapper.html()
+    expect(html).toBe('<div class="nuxt-progress" style="width: 100%;"></div>')
+    expect(wrapper.vm.get()).toBe(100)
+
+    jest.runAllTimers()
+    await vmTick(wrapper.vm)
+
+    html = wrapper.html()
+    expect(html).toBeUndefined()
+    expect(wrapper.vm.get()).toBe(0)
+  })
+
+  test('can fail', () => {
+    const wrapper = mount(Component, { localVue })
+
+    wrapper.vm.set(50)
+    wrapper.vm.fail()
+
+    const html = wrapper.html()
+    expect(html).toBe('<div class="nuxt-progress nuxt-progress-failed" style="width: 50%;"></div>')
+  })
+
+  test('not shown until throttle', () => {
+    const wrapper = mount(Component, { localVue })
+
+    wrapper.setData({
+      duration: 2000,
+      throttle: 1000
+    })
+
+    wrapper.vm.start()
+    jest.advanceTimersByTime(250)
+
+    let html = wrapper.html()
+    expect(html).toBeUndefined()
+
+    jest.advanceTimersByTime(1000)
+
+    html = wrapper.html()
+    expect(html).not.toBe('<div class="nuxt-progress" style="width: 0%;"></div>')
+    expect(html).toContain('<div class="nuxt-progress"')
+  })
+
+  test('can pause and resume', () => {
+    const wrapper = mount(Component, { localVue })
+
+    wrapper.setData({
+      duration: 2000,
+      throttle: 0
+    })
+
+    wrapper.vm.start()
+    jest.advanceTimersByTime(250)
+
+    let html = wrapper.html()
+    expect(html).toContain('<div class="nuxt-progress"')
+
+    wrapper.vm.pause()
+    jest.advanceTimersByTime(500)
+
+    const html2 = wrapper.html()
+    expect(html2).toBe(html)
+
+    wrapper.vm.resume()
+
+    jest.advanceTimersByTime(500)
+
+    html = wrapper.html()
+    expect(html).toContain('<div class="nuxt-progress"')
+    expect(html).not.toBe(html2)
+  })
+
+  test('continues after duration', () => {
+    const wrapper = mount(Component, { localVue })
+
+    wrapper.setData({
+      continuous: true,
+      duration: 500,
+      rtl: false,
+      throttle: 0
+    })
+
+    wrapper.vm.start()
+
+    jest.advanceTimersByTime(500)
+
+    let html = wrapper.html()
+    expect(html).toBe('<div class="nuxt-progress nuxt-progress-notransition" style="width: 100%; left: 0px;"></div>')
+
+    jest.advanceTimersByTime(250)
+
+    html = wrapper.html()
+    expect(wrapper.vm.reversed).toBe(true)
+    expect(html).toContain('<div class="nuxt-progress"')
+    expect(html).not.toContain('width: 0%')
+    expect(html).not.toContain('width: 100%')
+    expect(wrapper.vm.left).toBe('auto')
+    // TODO: check why the rendered html still has left: 0px (probably test-utils issue)
+    // expect(html).toContain('left: auto')
+  })
+})

test/unit/components.test.js

@@ -1,130 +0,0 @@
-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%;"></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%;"></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%;"></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%;"></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%;"></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%;"></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%;"></div>')
-      expect(str).not.toBe('<div data-server-rendered="true" class="nuxt-progress nuxt-progress-notransition" style="width:100%;left:auto;"></div>')
-      component.clear()
-    })
-  })
-})

yarn.lock

@@ -1523,6 +1523,21 @@
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.8.2"
 
+"@vue/server-test-utils@^1.0.0-beta.29":
+  version "1.0.0-beta.29"
+  resolved "https://registry.npmjs.org/@vue/server-test-utils/-/server-test-utils-1.0.0-beta.29.tgz#8a61a9900992b742cda7c143593db1c5e4a019bd"
+  integrity sha512-N6e2cixTnz7+mos0wL+R3LM/2op+f3ym1aSQYuNfksZzvX81lrQtjGr6Aszv0+1Ryms+WrqlL18Jb/MY8XyXaQ==
+  dependencies:
+    cheerio "^1.0.0-rc.2"
+
+"@vue/test-utils@^1.0.0-beta.29":
+  version "1.0.0-beta.29"
+  resolved "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.0.0-beta.29.tgz#c942cf25e891cf081b6a03332b4ae1ef430726f0"
+  integrity sha512-yX4sxEIHh4M9yAbLA/ikpEnGKMNBCnoX98xE1RwxfhQVcn0MaXNSj1Qmac+ZydTj6VBSEVukchBogXBTwc+9iA==
+  dependencies:
+    dom-event-types "^1.0.0"
+    lodash "^4.17.4"
+
 "@webassemblyjs/ast@1.7.11":
   version "1.7.11"
   resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.7.11.tgz#b988582cafbb2b095e8b556526f30c90d057cace"
@@ -3912,6 +3927,11 @@ dom-converter@~0.2:
   dependencies:
     utila "~0.4"
 
+dom-event-types@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/dom-event-types/-/dom-event-types-1.0.0.tgz#5830a0a29e1bf837fe50a70cd80a597232813cae"
+  integrity sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==
+
 dom-serializer@0, dom-serializer@~0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"