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

This commit is contained in:
Pim 2019-02-11 22:02:30 +01:00 committed by Pooya Parsa
parent 3997d5049d
commit 75a74543f4
5 changed files with 194 additions and 130 deletions

View File

@ -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",

View File

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

View File

@ -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')
})
})

View File

@ -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()
})
})
})

View File

@ -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"