diff --git a/package.json b/package.json index 51fb934811..7aad18bfe6 100644 --- a/package.json +++ b/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", diff --git a/packages/vue-app/test/__utils__/index.js b/packages/vue-app/test/__utils__/index.js new file mode 100644 index 0000000000..22e66e65bc --- /dev/null +++ b/packages/vue-app/test/__utils__/index.js @@ -0,0 +1,5 @@ +export const vmTick = (vm) => { + return new Promise((resolve) => { + vm.$nextTick(resolve) + }) +} diff --git a/packages/vue-app/test/nuxt-loading.test.js b/packages/vue-app/test/nuxt-loading.test.js new file mode 100644 index 0000000000..81faf9aecc --- /dev/null +++ b/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('
') + }) + + 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('') + 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('') + 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('') + }) + + 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('') + expect(html).toContain('