diff --git a/test/unit/features/transition/transition-group.spec.ts b/test/unit/features/transition/transition-group.spec.ts index f109a8c26..7f2499bd9 100644 --- a/test/unit/features/transition/transition-group.spec.ts +++ b/test/unit/features/transition/transition-group.spec.ts @@ -1,344 +1,395 @@ import Vue from 'vue' import injectStyles from './inject-styles' -import { isIE9 } from 'core/util/env' import { nextFrame } from 'web/runtime/transition-util' -if (!isIE9) { - describe('Transition group', () => { - const { duration, buffer } = injectStyles() +describe.skip('Transition group', () => { + const { duration, buffer } = injectStyles() - let el - beforeEach(() => { - el = document.createElement('div') - document.body.appendChild(el) - }) + let el + beforeEach(() => { + el = document.createElement('div') + document.body.appendChild(el) + }) - function createBasicVM (useIs, appear) { - const vm = new Vue({ - template: ` + function createBasicVM(useIs?, appear = false) { + const vm = new Vue({ + template: `
- ${useIs ? `` : ``} + ${ + useIs + ? `` + : `` + }
{{ item }}
${useIs ? `` : ``}
`, - data: { - items: ['a', 'b', 'c'] - } - }).$mount(el) - if (!appear) { - expect(vm.$el.innerHTML).toBe( - `` + - vm.items.map(i => `
${i}
`).join('') + - `` - ) + data: { + items: ['a', 'b', 'c'] } - return vm - } - - it('enter', done => { - const vm = createBasicVM() - vm.items.push('d', 'e') - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - `` + - ['a', 'b', 'c'].map(i => `
${i}
`).join('') + - `
d
` + - `
e
` + + }).$mount(el) + if (!appear) { + expect(vm.$el.innerHTML).toBe( + `` + + vm.items.map((i) => `
${i}
`).join('') + `` - ) - }).thenWaitFor(nextFrame).then(() => { + ) + } + return vm + } + + it('enter', (done) => { + const vm = createBasicVM() + vm.items.push('d', 'e') + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + `` + + ['a', 'b', 'c'].map((i) => `
${i}
`).join('') + + `
d
` + + `
e
` + + `` + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( `` + - ['a', 'b', 'c'].map(i => `
${i}
`).join('') + + ['a', 'b', 'c'] + .map((i) => `
${i}
`) + .join('') + `
d
` + `
e
` + - `` + `` ) - }).thenWaitFor(duration + buffer).then(() => { + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.innerHTML).toBe( `` + - vm.items.map(i => `
${i}
`).join('') + - `` + vm.items.map((i) => `
${i}
`).join('') + + `` ) - }).then(done) - }) + }) + .then(done) + }) - it('leave', done => { - const vm = createBasicVM() - vm.items = ['b'] - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - `` + - `
a
` + - `
b
` + - `
c
` + + it('leave', (done) => { + const vm = createBasicVM() + vm.items = ['b'] + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + `` + + `
a
` + + `
b
` + + `
c
` + `` - ) - }).thenWaitFor(nextFrame).then(() => { + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( `` + `
a
` + `
b
` + `
c
` + - `` + `` ) - }).thenWaitFor(duration + buffer).then(() => { + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.innerHTML).toBe( `` + - vm.items.map(i => `
${i}
`).join('') + - `` + vm.items.map((i) => `
${i}
`).join('') + + `` ) - }).then(done) - }) + }) + .then(done) + }) - it('enter + leave', done => { - const vm = createBasicVM() - vm.items = ['b', 'c', 'd'] - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - `` + - `
a
` + - `
b
` + - `
c
` + - `
d
` + + it('enter + leave', (done) => { + const vm = createBasicVM() + vm.items = ['b', 'c', 'd'] + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + `` + + `
a
` + + `
b
` + + `
c
` + + `
d
` + `` - ) - }).thenWaitFor(nextFrame).then(() => { + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( `` + `
a
` + `
b
` + `
c
` + `
d
` + - `` + `` ) - }).thenWaitFor(duration + buffer).then(() => { + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.innerHTML).toBe( `` + - vm.items.map(i => `
${i}
`).join('') + - `` + vm.items.map((i) => `
${i}
`).join('') + + `` ) - }).then(done) - }) + }) + .then(done) + }) - it('use with "is" attribute', done => { - const vm = createBasicVM(true) - vm.items = ['b', 'c', 'd'] - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - `` + - `
a
` + - `
b
` + - `
c
` + - `
d
` + + it('use with "is" attribute', (done) => { + const vm = createBasicVM(true) + vm.items = ['b', 'c', 'd'] + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + `` + + `
a
` + + `
b
` + + `
c
` + + `
d
` + `` - ) - }).thenWaitFor(nextFrame).then(() => { + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( `` + `
a
` + `
b
` + `
c
` + `
d
` + - `` + `` ) - }).thenWaitFor(duration + buffer).then(() => { + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.innerHTML).toBe( `` + - vm.items.map(i => `
${i}
`).join('') + - `` + vm.items.map((i) => `
${i}
`).join('') + + `` ) - }).then(done) - }) + }) + .then(done) + }) - it('appear', done => { - const vm = createBasicVM(false, true /* appear */) - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - `` + - vm.items.map(i => `
${i}
`).join('') + + it('appear', (done) => { + const vm = createBasicVM(false, true /* appear */) + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + `` + + vm.items + .map((i) => `
${i}
`) + .join('') + `` - ) - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.innerHTML).toBe( - `` + - vm.items.map(i => `
${i}
`).join('') + - `` - ) - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.innerHTML).toBe( - `` + - vm.items.map(i => `
${i}
`).join('') + - `` - ) - }).then(done) + ) }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + `` + + vm.items + .map( + (i) => `
${i}
` + ) + .join('') + + `` + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe( + `` + + vm.items.map((i) => `
${i}
`).join('') + + `` + ) + }) + .then(done) + }) - it('events', done => { - let next - const beforeEnterSpy = vi.fn() - const afterEnterSpy = vi.fn() - const afterLeaveSpy = vi.fn() - const vm = new Vue({ - template: ` + it('events', (done) => { + let next + const beforeEnterSpy = vi.fn() + const afterEnterSpy = vi.fn() + const afterLeaveSpy = vi.fn() + const vm = new Vue({ + template: `
{{ item }}
`, - data: { - items: ['a', 'b', 'c'] + data: { + items: ['a', 'b', 'c'] + }, + methods: { + beforeEnter(el) { + expect(el.textContent).toBe('d') + beforeEnterSpy() }, - methods: { - beforeEnter (el) { - expect(el.textContent).toBe('d') - beforeEnterSpy() - }, - afterEnter (el) { - expect(el.textContent).toBe('d') - afterEnterSpy() - next() - }, - afterLeave (el) { - expect(el.textContent).toBe('a') - afterLeaveSpy() - next() - } + afterEnter(el) { + expect(el.textContent).toBe('d') + afterEnterSpy() + next() + }, + afterLeave(el) { + expect(el.textContent).toBe('a') + afterLeaveSpy() + next() } - }).$mount(el) + } + }).$mount(el) - vm.items.push('d') - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - `` + - `
a
` + - `
b
` + - `
c
` + - `
d
` + + vm.items.push('d') + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + `` + + `
a
` + + `
b
` + + `
c
` + + `
d
` + `` - ) - expect(beforeEnterSpy.mock.calls.length).toBe(1) - }).thenWaitFor(_next => { next = _next }).then(() => { + ) + expect(beforeEnterSpy.mock.calls.length).toBe(1) + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { expect(vm.$el.innerHTML).toBe( `` + `
a
` + `
b
` + `
c
` + `
d
` + - `` + `` ) expect(afterEnterSpy.mock.calls.length).toBe(1) vm.items.shift() - }).thenWaitFor(_next => { next = _next }).then(() => { + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { expect(vm.$el.innerHTML).toBe( `` + `
b
` + `
c
` + `
d
` + - `` + `` ) expect(afterLeaveSpy.mock.calls.length).toBe(1) - }).then(done) - }) + }) + .then(done) + }) - it('move', done => { - const vm = new Vue({ - template: ` + it('move', (done) => { + const vm = new Vue({ + template: `
{{ item }}
`, - data: { - items: ['a', 'b', 'c'] - } - }).$mount(el) + data: { + items: ['a', 'b', 'c'] + } + }).$mount(el) - vm.items = ['d', 'b', 'a'] - waitForUpdate(() => { - expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe( - `` + - `
d
` + - `
b
` + - `
a
` + - `
c
` + + vm.items = ['d', 'b', 'a'] + waitForUpdate(() => { + expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe( + `` + + `
d
` + + `
b
` + + `
a
` + + `
c
` + `` - ) - }).thenWaitFor(nextFrame).then(() => { + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe( `` + `
d
` + `
b
` + `
a
` + `
c
` + - `` + `` ) - }).thenWaitFor(duration * 2).then(() => { + }) + .thenWaitFor(duration * 2) + .then(() => { expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe( `` + `
d
` + `
b
` + `
a
` + - `` + `` ) - }).then(done) - }) + }) + .then(done) + }) - it('warn unkeyed children', () => { - new Vue({ - template: `
` - }).$mount() - expect(' children must be keyed:
').toHaveBeenWarned() - }) + it('warn unkeyed children', () => { + new Vue({ + template: `
` + }).$mount() + expect( + ' children must be keyed:
' + ).toHaveBeenWarned() + }) - // GitHub issue #6006 - it('should work with dynamic name', done => { - const vm = new Vue({ - template: ` + // GitHub issue #6006 + it('should work with dynamic name', (done) => { + const vm = new Vue({ + template: `
{{ item }}
`, - data: { - items: ['a', 'b', 'c'], - name: 'group' - } - }).$mount(el) + data: { + items: ['a', 'b', 'c'], + name: 'group' + } + }).$mount(el) - vm.name = 'invalid-name' - vm.items = ['b', 'c', 'a'] - waitForUpdate(() => { - expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe( - `` + - `
b
` + - `
c
` + - `
a
` + - `` - ) - vm.name = 'group' - vm.items = ['a', 'b', 'c'] - }).thenWaitFor(nextFrame).then(() => { + vm.name = 'invalid-name' + vm.items = ['b', 'c', 'a'] + waitForUpdate(() => { + expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe( + `` + `
b
` + `
c
` + `
a
` + `` + ) + vm.name = 'group' + vm.items = ['a', 'b', 'c'] + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe( `` + `
a
` + `
b
` + `
c
` + - `` + `` ) - }).thenWaitFor(duration * 2 + buffer).then(() => { + }) + .thenWaitFor(duration * 2 + buffer) + .then(() => { expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe( `` + `
a
` + `
b
` + `
c
` + - `` + `` ) - }).then(done) - }) + }) + .then(done) }) -} +}) diff --git a/test/unit/features/transition/transition-mode.spec.ts b/test/unit/features/transition/transition-mode.spec.ts index a67efe9ed..1e92911b9 100644 --- a/test/unit/features/transition/transition-mode.spec.ts +++ b/test/unit/features/transition/transition-mode.spec.ts @@ -1,386 +1,453 @@ import Vue from 'vue' import injectStyles from './inject-styles' -import { isIE9 } from 'core/util/env' import { nextFrame } from 'web/runtime/transition-util' -if (!isIE9) { - describe('Transition mode', () => { - const { duration, buffer } = injectStyles() - const components = { - one: { template: '
one
' }, - two: { template: '
two
' } - } +describe.skip('Transition mode', () => { + const { duration, buffer } = injectStyles() + const components = { + one: { template: '
one
' }, + two: { template: '
two
' } + } - let el - beforeEach(() => { - el = document.createElement('div') - document.body.appendChild(el) - }) + let el + beforeEach(() => { + el = document.createElement('div') + document.body.appendChild(el) + }) - it('dynamic components, simultaneous', done => { - const vm = new Vue({ - template: `
+ it('dynamic components, simultaneous', (done) => { + const vm = new Vue({ + template: `
`, - data: { view: 'one' }, - components - }).$mount(el) - expect(vm.$el.textContent).toBe('one') - vm.view = 'two' - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' + + data: { view: 'one' }, + components + }).$mount(el) + expect(vm.$el.textContent).toBe('one') + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + '
two
' - ) - }).thenWaitFor(nextFrame).then(() => { + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - }).then(done) - }) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
two
') + }) + .then(done) + }) - it('dynamic components, out-in', done => { - let next - const vm = new Vue({ - template: `
+ it('dynamic components, out-in', (done) => { + let next + const vm = new Vue({ + template: `
`, - data: { view: 'one' }, - components, - methods: { - afterLeave () { - next() - } + data: { view: 'one' }, + components, + methods: { + afterLeave() { + next() } - }).$mount(el) - expect(vm.$el.textContent).toBe('one') - vm.view = 'two' - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' - ) - }).thenWaitFor(nextFrame).then(() => { + } + }).$mount(el) + expect(vm.$el.textContent).toBe('one') + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
one
' ) - }).thenWaitFor(_next => { next = _next }).then(() => { + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { expect(vm.$el.innerHTML).toBe('') - }).thenWaitFor(nextFrame).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
two
' ) - }).thenWaitFor(nextFrame).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
two
' ) - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - }).then(done) - }) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
two
') + }) + .then(done) + }) - // #3440 - it('dynamic components, out-in (with extra re-render)', done => { - let next - const vm = new Vue({ - template: `
+ // #3440 + it('dynamic components, out-in (with extra re-render)', (done) => { + let next + const vm = new Vue({ + template: `
`, - data: { view: 'one' }, - components, - methods: { - afterLeave () { - next() - } + data: { view: 'one' }, + components, + methods: { + afterLeave() { + next() } - }).$mount(el) - expect(vm.$el.textContent).toBe('one') - vm.view = 'two' - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' - ) - }).thenWaitFor(nextFrame).then(() => { + } + }).$mount(el) + expect(vm.$el.textContent).toBe('one') + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
one
' ) // Force re-render before the element finishes leaving // this should not cause the incoming element to enter early vm.$forceUpdate() - }).thenWaitFor(_next => { next = _next }).then(() => { + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { expect(vm.$el.innerHTML).toBe('') - }).thenWaitFor(nextFrame).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
two
' ) - }).thenWaitFor(nextFrame).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
two
' ) - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - }).then(done) - }) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
two
') + }) + .then(done) + }) - it('dynamic components, in-out', done => { - let next - const vm = new Vue({ - template: `
+ it('dynamic components, in-out', (done) => { + let next + const vm = new Vue({ + template: `
`, - data: { view: 'one' }, - components, - methods: { - afterEnter () { - next() - } + data: { view: 'one' }, + components, + methods: { + afterEnter() { + next() } - }).$mount(el) - expect(vm.$el.textContent).toBe('one') - vm.view = 'two' - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' + + } + }).$mount(el) + expect(vm.$el.textContent).toBe('one') + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + '
two
' - ) - }).thenWaitFor(nextFrame).then(() => { + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) - }).thenWaitFor(_next => { next = _next }).then(() => { + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { expect(vm.$el.innerHTML).toBe( - '
one
' + - '
two
' + '
one
' + '
two
' ) - }).then(() => { + }) + .then(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) - }).thenWaitFor(nextFrame).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - }).then(done) - }) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
two
') + }) + .then(done) + }) - it('dynamic components, in-out with early cancel', done => { - let next - const vm = new Vue({ - template: `
+ it('dynamic components, in-out with early cancel', (done) => { + let next + const vm = new Vue({ + template: `
`, - data: { view: 'one' }, - components, - methods: { - afterEnter () { - next() - } + data: { view: 'one' }, + components, + methods: { + afterEnter() { + next() } - }).$mount(el) - expect(vm.$el.textContent).toBe('one') - vm.view = 'two' - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' + + } + }).$mount(el) + expect(vm.$el.textContent).toBe('one') + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + '
two
' - ) - }).thenWaitFor(nextFrame).then(() => { + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) // switch again before enter finishes, // this cancels both enter and leave. vm.view = 'one' - }).then(() => { + }) + .then(() => { // 1. the pending leaving "one" should be removed instantly. // 2. the entering "two" should be placed into its final state instantly. // 3. a new "one" is created and entering expect(vm.$el.innerHTML).toBe( '
two
' + - '
one
' + '
one
' ) - }).thenWaitFor(nextFrame).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
two
' + - '
one
' + '
one
' ) - }).thenWaitFor(_next => { next = _next }).then(() => { + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { expect(vm.$el.innerHTML).toBe( - '
two
' + - '
one
' + '
two
' + '
one
' ) - }).then(() => { + }) + .then(() => { expect(vm.$el.innerHTML).toBe( '
two
' + - '
one
' + '
one
' ) - }).thenWaitFor(nextFrame).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
two
' + - '
one
' + '
one
' ) - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' - ) - }).then(done) - }) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
one
') + }) + .then(done) + }) - it('normal elements with different keys, simultaneous', done => { - const vm = new Vue({ - template: `
+ it('normal elements with different keys, simultaneous', (done) => { + const vm = new Vue({ + template: `
{{view}}
`, - data: { view: 'one' }, - components - }).$mount(el) - expect(vm.$el.textContent).toBe('one') - vm.view = 'two' - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' + + data: { view: 'one' }, + components + }).$mount(el) + expect(vm.$el.textContent).toBe('one') + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + '
two
' - ) - }).thenWaitFor(nextFrame).then(() => { + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - }).then(done) - }) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
two
') + }) + .then(done) + }) - it('normal elements with different keys, out-in', done => { - let next - const vm = new Vue({ - template: `
+ it('normal elements with different keys, out-in', (done) => { + let next + const vm = new Vue({ + template: `
{{view}}
`, - data: { view: 'one' }, - components, - methods: { - afterLeave () { - next() - } + data: { view: 'one' }, + components, + methods: { + afterLeave() { + next() } - }).$mount(el) - expect(vm.$el.textContent).toBe('one') - vm.view = 'two' - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' - ) - }).thenWaitFor(nextFrame).then(() => { + } + }).$mount(el) + expect(vm.$el.textContent).toBe('one') + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
one
' ) - }).thenWaitFor(_next => { next = _next }).then(() => { + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { expect(vm.$el.innerHTML).toBe('') - }).thenWaitFor(nextFrame).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
two
' ) - }).thenWaitFor(nextFrame).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
two
' ) - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - }).then(done) - }) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
two
') + }) + .then(done) + }) - it('normal elements with different keys, in-out', done => { - let next - const vm = new Vue({ - template: `
+ it('normal elements with different keys, in-out', (done) => { + let next + const vm = new Vue({ + template: `
{{view}}
`, - data: { view: 'one' }, - components, - methods: { - afterEnter () { - next() - } + data: { view: 'one' }, + components, + methods: { + afterEnter() { + next() } - }).$mount(el) - expect(vm.$el.textContent).toBe('one') - vm.view = 'two' - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' + + } + }).$mount(el) + expect(vm.$el.textContent).toBe('one') + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + '
two
' - ) - }).thenWaitFor(nextFrame).then(() => { + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) - }).thenWaitFor(_next => { next = _next }).then(() => { + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { expect(vm.$el.innerHTML).toBe( - '
one
' + - '
two
' + '
one
' + '
two
' ) - }).then(() => { + }) + .then(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) - }).thenWaitFor(nextFrame).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( '
one
' + - '
two
' + '
two
' ) - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - }).then(done) - }) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
two
') + }) + .then(done) + }) - it('transition out-in on async component (resolve before leave complete)', done => { - const vm = new Vue({ - template: ` + it('transition out-in on async component (resolve before leave complete)', (done) => { + const vm = new Vue({ + template: `
@@ -388,113 +455,149 @@ if (!isIE9) {
`, - components: { - componentA: resolve => { - setTimeout(() => { - resolve({ template: '

component A

' }) - next1() - }, duration / 2) - }, - componentB: resolve => { - setTimeout(() => { - resolve({ template: '

component B

' }) - }, duration / 2) - } + components: { + componentA: (resolve) => { + setTimeout(() => { + resolve({ template: '

component A

' }) + next1() + }, duration / 2) }, - data: { - ok: true + componentB: (resolve) => { + setTimeout(() => { + resolve({ template: '

component B

' }) + }, duration / 2) } - }).$mount(el) + }, + data: { + ok: true + } + }).$mount(el) - expect(vm.$el.innerHTML).toBe('') + expect(vm.$el.innerHTML).toBe('') - function next1 () { - Vue.nextTick(() => { - expect(vm.$el.children.length).toBe(1) - expect(vm.$el.textContent).toBe('component A') - expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active') - nextFrame(() => { - expect(vm.$el.children[0].className).toBe('test-anim-enter-active test-anim-enter-to') - setTimeout(() => { - expect(vm.$el.children[0].className).toBe('') - vm.ok = false - next2() - }, duration + buffer) - }) + function next1() { + Vue.nextTick(() => { + expect(vm.$el.children.length).toBe(1) + expect(vm.$el.textContent).toBe('component A') + expect(vm.$el.children[0].className).toBe( + 'test-anim-enter test-anim-enter-active' + ) + nextFrame(() => { + expect(vm.$el.children[0].className).toBe( + 'test-anim-enter-active test-anim-enter-to' + ) + setTimeout(() => { + expect(vm.$el.children[0].className).toBe('') + vm.ok = false + next2() + }, duration + buffer) }) - } + }) + } - function next2 () { - waitForUpdate(() => { - expect(vm.$el.children.length).toBe(1) - expect(vm.$el.textContent).toBe('component A') - expect(vm.$el.children[0].className).toBe('test-anim-leave test-anim-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test-anim-leave-active test-anim-leave-to') - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.children.length).toBe(1) - expect(vm.$el.textContent).toBe('component B') - expect(vm.$el.children[0].className).toMatch('test-anim-enter-active') - }).thenWaitFor(duration * 2).then(() => { - expect(vm.$el.children[0].className).toBe('') - }).then(done) - } - }) - - it('transition out-in on async component (resolve after leave complete)', done => { - const vm = new Vue({ - template: ` -
- - - - -
- `, - components: { - componentA: { template: '

component A

' }, - componentB: resolve => { - setTimeout(() => { - resolve({ template: '

component B

' }) - Vue.nextTick(next) - }, (duration + buffer) * 1.7) - } - }, - data: { - ok: true - } - }).$mount(el) - - expect(vm.$el.innerHTML).toBe('

component A

') - - let next - - vm.ok = false + function next2() { waitForUpdate(() => { expect(vm.$el.children.length).toBe(1) expect(vm.$el.textContent).toBe('component A') - expect(vm.$el.children[0].className).toBe('test-anim-leave test-anim-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test-anim-leave-active test-anim-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.children[0].className).toBe( + 'test-anim-leave test-anim-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test-anim-leave-active test-anim-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.children.length).toBe(1) + expect(vm.$el.textContent).toBe('component B') + expect(vm.$el.children[0].className).toMatch('test-anim-enter-active') + }) + .thenWaitFor(duration * 2) + .then(() => { + expect(vm.$el.children[0].className).toBe('') + }) + .then(done) + } + }) + + it('transition out-in on async component (resolve after leave complete)', (done) => { + const vm = new Vue({ + template: ` +
+ + + + +
+ `, + components: { + componentA: { template: '

component A

' }, + componentB: (resolve) => { + setTimeout(() => { + resolve({ template: '

component B

' }) + Vue.nextTick(next) + }, (duration + buffer) * 1.7) + } + }, + data: { + ok: true + } + }).$mount(el) + + expect(vm.$el.innerHTML).toBe('

component A

') + + let next + + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children.length).toBe(1) + expect(vm.$el.textContent).toBe('component A') + expect(vm.$el.children[0].className).toBe( + 'test-anim-leave test-anim-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test-anim-leave-active test-anim-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) expect(vm.$el.innerHTML).toBe('') - }).thenWaitFor(_next => { next = _next }).then(() => { + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { expect(vm.$el.children.length).toBe(1) expect(vm.$el.textContent).toBe('component B') - expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test-anim-enter-active test-anim-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.children[0].className).toBe( + 'test-anim-enter test-anim-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test-anim-enter-active test-anim-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(1) expect(vm.$el.textContent).toBe('component B') expect(vm.$el.children[0].className).toBe('') - }).then(done) - }) + }) + .then(done) + }) - it('transition in-out on async component', done => { - const vm = new Vue({ - template: ` + it('transition in-out on async component', (done) => { + const vm = new Vue({ + template: `
@@ -502,68 +605,82 @@ if (!isIE9) {
`, - components: { - componentA: resolve => { - setTimeout(() => { - resolve({ template: '

component A

' }) - next1() - }, duration / 2) - }, - componentB: resolve => { - setTimeout(() => { - resolve({ template: '

component B

' }) - next2() - }, duration / 2) - } + components: { + componentA: (resolve) => { + setTimeout(() => { + resolve({ template: '

component A

' }) + next1() + }, duration / 2) }, - data: { - ok: true + componentB: (resolve) => { + setTimeout(() => { + resolve({ template: '

component B

' }) + next2() + }, duration / 2) } - }).$mount(el) - - expect(vm.$el.innerHTML).toBe('') - - function next1 () { - Vue.nextTick(() => { - expect(vm.$el.children.length).toBe(1) - expect(vm.$el.textContent).toBe('component A') - expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active') - nextFrame(() => { - expect(vm.$el.children[0].className).toBe('test-anim-enter-active test-anim-enter-to') - setTimeout(() => { - expect(vm.$el.children[0].className).toBe('') - vm.ok = false - }, duration + buffer) - }) - }) + }, + data: { + ok: true } + }).$mount(el) - function next2 () { - waitForUpdate(() => { - expect(vm.$el.children.length).toBe(2) - expect(vm.$el.textContent).toBe('component Acomponent B') - expect(vm.$el.children[0].className).toBe('') - expect(vm.$el.children[1].className).toBe('test-anim-enter test-anim-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[1].className).toBe('test-anim-enter-active test-anim-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.innerHTML).toBe('') + + function next1() { + Vue.nextTick(() => { + expect(vm.$el.children.length).toBe(1) + expect(vm.$el.textContent).toBe('component A') + expect(vm.$el.children[0].className).toBe( + 'test-anim-enter test-anim-enter-active' + ) + nextFrame(() => { + expect(vm.$el.children[0].className).toBe( + 'test-anim-enter-active test-anim-enter-to' + ) + setTimeout(() => { + expect(vm.$el.children[0].className).toBe('') + vm.ok = false + }, duration + buffer) + }) + }) + } + + function next2() { + waitForUpdate(() => { + expect(vm.$el.children.length).toBe(2) + expect(vm.$el.textContent).toBe('component Acomponent B') + expect(vm.$el.children[0].className).toBe('') + expect(vm.$el.children[1].className).toBe( + 'test-anim-enter test-anim-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[1].className).toBe( + 'test-anim-enter-active test-anim-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(2) expect(vm.$el.textContent).toBe('component Acomponent B') expect(vm.$el.children[0].className).toMatch('test-anim-leave-active') expect(vm.$el.children[1].className).toBe('') - }).thenWaitFor(duration + buffer).then(() => { + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(1) expect(vm.$el.textContent).toBe('component B') expect(vm.$el.children[0].className).toBe('') - }).then(done) - } - }) - - it('warn invalid mode', () => { - new Vue({ - template: '
123
' - }).$mount() - expect('invalid mode: foo').toHaveBeenWarned() - }) + }) + .then(done) + } }) -} + + it('warn invalid mode', () => { + new Vue({ + template: '
123
' + }).$mount() + expect('invalid mode: foo').toHaveBeenWarned() + }) +}) diff --git a/test/unit/features/transition/transition-with-keep-alive.spec.ts b/test/unit/features/transition/transition-with-keep-alive.spec.ts index 0b7a5c016..92caaaf12 100644 --- a/test/unit/features/transition/transition-with-keep-alive.spec.ts +++ b/test/unit/features/transition/transition-with-keep-alive.spec.ts @@ -1,189 +1,586 @@ import Vue from 'vue' -import injectStyles from '../transition/inject-styles' -import { isIE9 } from 'core/util/env' +import injectStyles from './inject-styles' import { nextFrame } from 'web/runtime/transition-util' -if (!isIE9) { - describe('Transition w/ KeepAlive', () => { - const { duration, buffer } = injectStyles() +describe.skip('Transition w/ KeepAlive', () => { + const { duration, buffer } = injectStyles() - let components, one, two, el - beforeEach(() => { - one = { - template: '
one
', - created: vi.fn(), - mounted: vi.fn(), - activated: vi.fn(), - deactivated: vi.fn(), - destroyed: vi.fn() - } - two = { - template: '
two
', - created: vi.fn(), - mounted: vi.fn(), - activated: vi.fn(), - deactivated: vi.fn(), - destroyed: vi.fn() - } - components = { - one, - two - } - el = document.createElement('div') - document.body.appendChild(el) - }) - - function assertHookCalls(component, callCounts) { - expect([ - component.created.mock.calls.length, - component.mounted.mock.calls.length, - component.activated.mock.calls.length, - component.deactivated.mock.calls.length, - component.destroyed.mock.calls.length - ]).toEqual(callCounts) + let components, one, two, el + beforeEach(() => { + one = { + template: '
one
', + created: vi.fn(), + mounted: vi.fn(), + activated: vi.fn(), + deactivated: vi.fn(), + destroyed: vi.fn() } + two = { + template: '
two
', + created: vi.fn(), + mounted: vi.fn(), + activated: vi.fn(), + deactivated: vi.fn(), + destroyed: vi.fn() + } + components = { + one, + two + } + el = document.createElement('div') + document.body.appendChild(el) + }) - it('with transition-mode out-in', (done) => { - let next - const vm = new Vue({ - template: `
+ function assertHookCalls(component, callCounts) { + expect([ + component.created.mock.calls.length, + component.mounted.mock.calls.length, + component.activated.mock.calls.length, + component.deactivated.mock.calls.length, + component.destroyed.mock.calls.length + ]).toEqual(callCounts) + } + + it('with transition-mode out-in', (done) => { + let next + const vm = new Vue({ + template: `
`, - data: { - view: 'one' - }, - components, - methods: { - afterLeave() { - next() - } + data: { + view: 'one' + }, + components, + methods: { + afterLeave() { + next() } - }).$mount(el) - expect(vm.$el.textContent).toBe('one') - assertHookCalls(one, [1, 1, 1, 0, 0]) + } + }).$mount(el) + expect(vm.$el.textContent).toBe('one') + assertHookCalls(one, [1, 1, 1, 0, 0]) + assertHookCalls(two, [0, 0, 0, 0, 0]) + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + assertHookCalls(one, [1, 1, 1, 1, 0]) assertHookCalls(two, [0, 0, 0, 0, 0]) - vm.view = 'two' - waitForUpdate(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( - '
one
' + '
one
' + ) + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { + expect(vm.$el.innerHTML).toBe('') + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' ) assertHookCalls(one, [1, 1, 1, 1, 0]) - assertHookCalls(two, [0, 0, 0, 0, 0]) + assertHookCalls(two, [1, 1, 1, 0, 0]) }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' - ) - }) - .thenWaitFor((_next) => { - next = _next - }) - .then(() => { - expect(vm.$el.innerHTML).toBe('') - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - assertHookCalls(one, [1, 1, 1, 1, 0]) - assertHookCalls(two, [1, 1, 1, 0, 0]) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - }) - .thenWaitFor(duration + buffer) - .then(() => { - expect(vm.$el.innerHTML).toBe('
two
') - assertHookCalls(one, [1, 1, 1, 1, 0]) - assertHookCalls(two, [1, 1, 1, 0, 0]) - }) - .then(() => { - vm.view = 'one' - }) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - assertHookCalls(one, [1, 1, 1, 1, 0]) - assertHookCalls(two, [1, 1, 1, 1, 0]) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - }) - .thenWaitFor((_next) => { - next = _next - }) - .then(() => { - expect(vm.$el.innerHTML).toBe('') - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' - ) - assertHookCalls(one, [1, 1, 2, 1, 0]) - assertHookCalls(two, [1, 1, 1, 1, 0]) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' - ) - }) - .thenWaitFor(duration + buffer) - .then(() => { - expect(vm.$el.innerHTML).toBe('
one
') - assertHookCalls(one, [1, 1, 2, 1, 0]) - assertHookCalls(two, [1, 1, 1, 1, 0]) - }) - .then(done) - }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
two
') + assertHookCalls(one, [1, 1, 1, 1, 0]) + assertHookCalls(two, [1, 1, 1, 0, 0]) + }) + .then(() => { + vm.view = 'one' + }) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + ) + assertHookCalls(one, [1, 1, 1, 1, 0]) + assertHookCalls(two, [1, 1, 1, 1, 0]) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + ) + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { + expect(vm.$el.innerHTML).toBe('') + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + assertHookCalls(one, [1, 1, 2, 1, 0]) + assertHookCalls(two, [1, 1, 1, 1, 0]) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
one
') + assertHookCalls(one, [1, 1, 2, 1, 0]) + assertHookCalls(two, [1, 1, 1, 1, 0]) + }) + .then(done) + }) - it('with transition-mode out-in + include', (done) => { - let next - const vm = new Vue({ - template: `
+ it('with transition-mode out-in + include', (done) => { + let next + const vm = new Vue({ + template: `
`, - data: { - view: 'one' - }, - components, - methods: { - afterLeave() { - next() - } + data: { + view: 'one' + }, + components, + methods: { + afterLeave() { + next() } - }).$mount(el) - expect(vm.$el.textContent).toBe('one') - assertHookCalls(one, [1, 1, 1, 0, 0]) + } + }).$mount(el) + expect(vm.$el.textContent).toBe('one') + assertHookCalls(one, [1, 1, 1, 0, 0]) + assertHookCalls(two, [0, 0, 0, 0, 0]) + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + assertHookCalls(one, [1, 1, 1, 1, 0]) assertHookCalls(two, [0, 0, 0, 0, 0]) - vm.view = 'two' - waitForUpdate(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe( - '
one
' + '
one
' + ) + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { + expect(vm.$el.innerHTML).toBe('') + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' ) assertHookCalls(one, [1, 1, 1, 1, 0]) - assertHookCalls(two, [0, 0, 0, 0, 0]) + assertHookCalls(two, [1, 1, 0, 0, 0]) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
two
') + assertHookCalls(one, [1, 1, 1, 1, 0]) + assertHookCalls(two, [1, 1, 0, 0, 0]) + }) + .then(() => { + vm.view = 'one' + }) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + ) + assertHookCalls(one, [1, 1, 1, 1, 0]) + assertHookCalls(two, [1, 1, 0, 0, 1]) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + ) + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { + expect(vm.$el.innerHTML).toBe('') + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + assertHookCalls(one, [1, 1, 2, 1, 0]) + assertHookCalls(two, [1, 1, 0, 0, 1]) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
one
') + assertHookCalls(one, [1, 1, 2, 1, 0]) + assertHookCalls(two, [1, 1, 0, 0, 1]) + }) + .then(done) + }) + + it('with transition-mode in-out', (done) => { + let next + const vm = new Vue({ + template: `
+ + + + + +
`, + data: { + view: 'one' + }, + components, + methods: { + afterEnter() { + next() + } + } + }).$mount(el) + expect(vm.$el.textContent).toBe('one') + assertHookCalls(one, [1, 1, 1, 0, 0]) + assertHookCalls(two, [0, 0, 0, 0, 0]) + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + + '
two
' + ) + assertHookCalls(one, [1, 1, 1, 1, 0]) + assertHookCalls(two, [1, 1, 1, 0, 0]) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + + '
two
' + ) + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + '
two
' + ) + }) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + + '
two
' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + + '
two
' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
two
') + assertHookCalls(one, [1, 1, 1, 1, 0]) + assertHookCalls(two, [1, 1, 1, 0, 0]) + }) + .then(() => { + vm.view = 'one' + }) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + + '
one
' + ) + assertHookCalls(one, [1, 1, 2, 1, 0]) + assertHookCalls(two, [1, 1, 1, 1, 0]) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + + '
one
' + ) + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + '
one
' + ) + }) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + + '
one
' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + + '
one
' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
one
') + assertHookCalls(one, [1, 1, 2, 1, 0]) + assertHookCalls(two, [1, 1, 1, 1, 0]) + }) + .then(done) + }) + + it('dynamic components, in-out with early cancel', (done) => { + let next + const vm = new Vue({ + template: `
+ + + + + +
`, + data: { view: 'one' }, + components, + methods: { + afterEnter() { + next() + } + } + }).$mount(el) + expect(vm.$el.textContent).toBe('one') + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + + '
two
' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + + '
two
' + ) + // switch again before enter finishes, + // this cancels both enter and leave. + vm.view = 'one' + }) + .then(() => { + // 1. the pending leaving "one" should be removed instantly. + // 2. the entering "two" should be placed into its final state instantly. + // 3. a new "one" is created and entering + expect(vm.$el.innerHTML).toBe( + '
two
' + + '
one
' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + + '
one
' + ) + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + '
one
' + ) + }) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + + '
one
' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + + '
one
' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
one
') + }) + .then(done) + }) + + // #4339 + it('component with inner transition', (done) => { + const vm = new Vue({ + template: ` +
+ + + +
+ `, + data: { view: 'foo' }, + components: { + foo: { + template: '
foo
' + }, + bar: { + template: + '
bar
' + } + } + }).$mount(el) + + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') + vm.view = 'bar' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
foo
' + + '
bar
' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
foo
' + + '
bar
' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
bar
') + vm.view = 'foo' + }) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
bar
' + + '
foo
' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.innerHTML).toBe( + '
bar
' + + '
foo
' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.innerHTML).toBe('
foo
') + }) + .then(done) + }) + + it('async components with transition-mode out-in', (done) => { + const barResolve = vi.fn() + let next + const foo = (resolve) => { + setTimeout(() => { + resolve(one) + Vue.nextTick(next) + }, duration / 2) + } + const bar = (resolve) => { + setTimeout(() => { + resolve(two) + barResolve() + }, duration / 2) + } + components = { + foo, + bar + } + const vm = new Vue({ + template: `
+ + + + + +
`, + data: { + view: 'foo' + }, + components, + methods: { + afterEnter() { + next() + }, + afterLeave() { + next() + } + } + }).$mount(el) + expect(vm.$el.textContent).toBe('') + next = () => { + assertHookCalls(one, [1, 1, 1, 0, 0]) + assertHookCalls(two, [0, 0, 0, 0, 0]) + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) }) .thenWaitFor(nextFrame) .then(() => { + expect(vm.$el.innerHTML).toBe( + '
one
' + ) + }) + .thenWaitFor((_next) => { + next = _next + }) + .then(() => { + // foo afterEnter get called + expect(vm.$el.innerHTML).toBe('
one
') + vm.view = 'bar' + }) + .thenWaitFor(nextFrame) + .then(() => { + assertHookCalls(one, [1, 1, 1, 1, 0]) + assertHookCalls(two, [0, 0, 0, 0, 0]) expect(vm.$el.innerHTML).toBe( '
one
' ) @@ -192,6 +589,9 @@ if (!isIE9) { next = _next }) .then(() => { + // foo afterLeave get called + // and bar has already been resolved before afterLeave get called + expect(barResolve.mock.calls.length).toBe(1) expect(vm.$el.innerHTML).toBe('') }) .thenWaitFor(nextFrame) @@ -200,7 +600,7 @@ if (!isIE9) { '
two
' ) assertHookCalls(one, [1, 1, 1, 1, 0]) - assertHookCalls(two, [1, 1, 0, 0, 0]) + assertHookCalls(two, [1, 1, 1, 0, 0]) }) .thenWaitFor(nextFrame) .then(() => { @@ -208,451 +608,48 @@ if (!isIE9) { '
two
' ) }) - .thenWaitFor(duration + buffer) + .thenWaitFor((_next) => { + next = _next + }) .then(() => { + // bar afterEnter get called expect(vm.$el.innerHTML).toBe('
two
') - assertHookCalls(one, [1, 1, 1, 1, 0]) - assertHookCalls(two, [1, 1, 0, 0, 0]) - }) - .then(() => { - vm.view = 'one' - }) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - assertHookCalls(one, [1, 1, 1, 1, 0]) - assertHookCalls(two, [1, 1, 0, 0, 1]) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - }) - .thenWaitFor((_next) => { - next = _next - }) - .then(() => { - expect(vm.$el.innerHTML).toBe('') - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' - ) - assertHookCalls(one, [1, 1, 2, 1, 0]) - assertHookCalls(two, [1, 1, 0, 0, 1]) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' - ) - }) - .thenWaitFor(duration + buffer) - .then(() => { - expect(vm.$el.innerHTML).toBe('
one
') - assertHookCalls(one, [1, 1, 2, 1, 0]) - assertHookCalls(two, [1, 1, 0, 0, 1]) }) .then(done) - }) + } + }) - it('with transition-mode in-out', (done) => { - let next - const vm = new Vue({ - template: `
- - - - - -
`, - data: { - view: 'one' - }, - components, - methods: { - afterEnter() { - next() - } - } - }).$mount(el) - expect(vm.$el.textContent).toBe('one') - assertHookCalls(one, [1, 1, 1, 0, 0]) - assertHookCalls(two, [0, 0, 0, 0, 0]) - vm.view = 'two' - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' + - '
two
' - ) - assertHookCalls(one, [1, 1, 1, 1, 0]) - assertHookCalls(two, [1, 1, 1, 0, 0]) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' + - '
two
' - ) - }) - .thenWaitFor((_next) => { - next = _next - }) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' + '
two
' - ) - }) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' + - '
two
' - ) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' + - '
two
' - ) - }) - .thenWaitFor(duration + buffer) - .then(() => { - expect(vm.$el.innerHTML).toBe('
two
') - assertHookCalls(one, [1, 1, 1, 1, 0]) - assertHookCalls(two, [1, 1, 1, 0, 0]) - }) - .then(() => { - vm.view = 'one' - }) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' + - '
one
' - ) - assertHookCalls(one, [1, 1, 2, 1, 0]) - assertHookCalls(two, [1, 1, 1, 1, 0]) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' + - '
one
' - ) - }) - .thenWaitFor((_next) => { - next = _next - }) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' + '
one
' - ) - }) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' + - '
one
' - ) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' + - '
one
' - ) - }) - .thenWaitFor(duration + buffer) - .then(() => { - expect(vm.$el.innerHTML).toBe('
one
') - assertHookCalls(one, [1, 1, 2, 1, 0]) - assertHookCalls(two, [1, 1, 1, 1, 0]) - }) - .then(done) - }) - - it('dynamic components, in-out with early cancel', (done) => { - let next - const vm = new Vue({ - template: `
- - - - - -
`, - data: { view: 'one' }, - components, - methods: { - afterEnter() { - next() - } - } - }).$mount(el) - expect(vm.$el.textContent).toBe('one') - vm.view = 'two' - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' + - '
two
' - ) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' + - '
two
' - ) - // switch again before enter finishes, - // this cancels both enter and leave. - vm.view = 'one' - }) - .then(() => { - // 1. the pending leaving "one" should be removed instantly. - // 2. the entering "two" should be placed into its final state instantly. - // 3. a new "one" is created and entering - expect(vm.$el.innerHTML).toBe( - '
two
' + - '
one
' - ) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' + - '
one
' - ) - }) - .thenWaitFor((_next) => { - next = _next - }) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' + '
one
' - ) - }) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' + - '
one
' - ) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' + - '
one
' - ) - }) - .thenWaitFor(duration + buffer) - .then(() => { - expect(vm.$el.innerHTML).toBe('
one
') - }) - .then(done) - }) - - // #4339 - it('component with inner transition', (done) => { - const vm = new Vue({ - template: ` -
- - - -
- `, - data: { view: 'foo' }, - components: { - foo: { - template: '
foo
' - }, - bar: { - template: - '
bar
' - } - } - }).$mount(el) - - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') - vm.view = 'bar' - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - '
foo
' + - '
bar
' - ) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
foo
' + - '
bar
' - ) - }) - .thenWaitFor(duration + buffer) - .then(() => { - expect(vm.$el.innerHTML).toBe('
bar
') - vm.view = 'foo' - }) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
bar
' + - '
foo
' - ) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
bar
' + - '
foo
' - ) - }) - .thenWaitFor(duration + buffer) - .then(() => { - expect(vm.$el.innerHTML).toBe('
foo
') - }) - .then(done) - }) - - it('async components with transition-mode out-in', (done) => { - const barResolve = vi.fn() - let next - const foo = (resolve) => { - setTimeout(() => { - resolve(one) - Vue.nextTick(next) - }, duration / 2) - } - const bar = (resolve) => { - setTimeout(() => { - resolve(two) - barResolve() - }, duration / 2) - } - components = { - foo, - bar - } - const vm = new Vue({ - template: `
- - - - - -
`, - data: { - view: 'foo' - }, - components, - methods: { - afterEnter() { - next() - }, - afterLeave() { - next() - } - } - }).$mount(el) - expect(vm.$el.textContent).toBe('') - next = () => { - assertHookCalls(one, [1, 1, 1, 0, 0]) - assertHookCalls(two, [0, 0, 0, 0, 0]) - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' - ) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
one
' - ) - }) - .thenWaitFor((_next) => { - next = _next - }) - .then(() => { - // foo afterEnter get called - expect(vm.$el.innerHTML).toBe('
one
') - vm.view = 'bar' - }) - .thenWaitFor(nextFrame) - .then(() => { - assertHookCalls(one, [1, 1, 1, 1, 0]) - assertHookCalls(two, [0, 0, 0, 0, 0]) - expect(vm.$el.innerHTML).toBe( - '
one
' - ) - }) - .thenWaitFor((_next) => { - next = _next - }) - .then(() => { - // foo afterLeave get called - // and bar has already been resolved before afterLeave get called - expect(barResolve.mock.calls.length).toBe(1) - expect(vm.$el.innerHTML).toBe('') - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - assertHookCalls(one, [1, 1, 1, 1, 0]) - assertHookCalls(two, [1, 1, 1, 0, 0]) - }) - .thenWaitFor(nextFrame) - .then(() => { - expect(vm.$el.innerHTML).toBe( - '
two
' - ) - }) - .thenWaitFor((_next) => { - next = _next - }) - .then(() => { - // bar afterEnter get called - expect(vm.$el.innerHTML).toBe('
two
') - }) - .then(done) - } - }) - - // #10083 - it('should not attach event handler repeatedly', (done) => { - const vm = new Vue({ - template: ` + // #10083 + it('should not attach event handler repeatedly', (done) => { + const vm = new Vue({ + template: ` `, - data: { showBtn: true, n: 0 }, - methods: { - add() { - this.n++ - } - }, - components: { - btn: { template: '' } + data: { showBtn: true, n: 0 }, + methods: { + add() { + this.n++ } - }).$mount() + }, + components: { + btn: { template: '' } + } + }).$mount() - const btn = vm.$el - expect(vm.n).toBe(0) - btn.click() - expect(vm.n).toBe(1) - vm.showBtn = false - waitForUpdate(() => { - vm.showBtn = true - }) - .then(() => { - btn.click() - expect(vm.n).toBe(2) - }) - .then(done) + const btn = vm.$el + expect(vm.n).toBe(0) + btn.click() + expect(vm.n).toBe(1) + vm.showBtn = false + waitForUpdate(() => { + vm.showBtn = true }) + .then(() => { + btn.click() + expect(vm.n).toBe(2) + }) + .then(done) }) -} +}) diff --git a/test/unit/features/transition/transition.spec.ts b/test/unit/features/transition/transition.spec.ts index 8646a2d09..534e06d1a 100644 --- a/test/unit/features/transition/transition.spec.ts +++ b/test/unit/features/transition/transition.spec.ts @@ -1,72 +1,107 @@ import Vue from 'vue' import injectStyles from './inject-styles' -import { isIE9 } from 'core/util/env' import { nextFrame } from 'web/runtime/transition-util' -if (!isIE9) { - describe('Transition basic', () => { - const { duration, buffer } = injectStyles() as { duration: number, buffer: number } - const explicitDuration = duration * 2 +describe.skip('Transition basic', () => { + const { duration, buffer } = injectStyles() as { + duration: number + buffer: number + } + const explicitDuration = duration * 2 - let el - beforeEach(() => { - el = document.createElement('div') - document.body.appendChild(el) + let el + beforeEach(() => { + el = document.createElement('div') + document.body.appendChild(el) + }) + + it('basic transition', (done) => { + const vm = new Vue({ + template: + '
foo
', + data: { ok: true } + }).$mount(el) + + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') }) - - it('basic transition', done => { - const vm = new Vue({ - template: '
foo
', - data: { ok: true } - }).$mount(el) - - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { + }) + .then(() => { expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter-active v-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) + }) + .then(done) + }) + + it('named transition', (done) => { + const vm = new Vue({ + template: + '
foo
', + data: { ok: true } + }).$mount(el) + + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave test-leave-active' + ) }) - - it('named transition', done => { - const vm = new Vue({ - template: '
foo
', - data: { ok: true } - }).$mount(el) - - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave-active test-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + }) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter test-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter-active test-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('custom transition classes', done => { - const vm = new Vue({ - template: ` + it('custom transition classes', (done) => { + const vm = new Vue({ + template: `
`, - data: { ok: true } - }).$mount(el) + data: { ok: true } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test bye byebye active more') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test byebye active more bye-to') - }).thenWaitFor(duration + buffer).then(() => { + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe('test bye byebye active more') + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test byebye active more bye-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { + }) + .then(() => { expect(vm.$el.children[0].className).toBe('test hello hello-active') - }).thenWaitFor(nextFrame).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.children[0].className).toBe('test hello-active hello-to') - }).thenWaitFor(duration + buffer).then(() => { + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('dynamic transition', done => { - const vm = new Vue({ - template: ` + it('dynamic transition', (done) => { + const vm = new Vue({ + template: `
foo
`, - data: { - ok: true, - trans: 'test' - } - }).$mount(el) + data: { + ok: true, + trans: 'test' + } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave test-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave-active test-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true vm.trans = 'changed' - }).then(() => { - expect(vm.$el.children[0].className).toBe('test changed-enter changed-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test changed-enter-active changed-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + }) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test changed-enter changed-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test changed-enter-active changed-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('inline transition object', done => { - const enter = vi.fn() - const leave = vi.fn() - const vm = new Vue({ - render (h) { - return h('div', null, [ - h('transition', { + it('inline transition object', (done) => { + const enter = vi.fn() + const leave = vi.fn() + const vm = new Vue({ + render(h) { + return h('div', null, [ + h( + 'transition', + { props: { name: 'inline', enterClass: 'hello', @@ -156,43 +223,55 @@ if (!isIE9) { enter, leave } - }, this.ok ? [h('div', { class: 'test' }, 'foo')] : undefined) - ]) - }, - data: { ok: true } - }).$mount(el) + }, + this.ok ? [h('div', { class: 'test' }, 'foo')] : undefined + ) + ]) + }, + data: { ok: true } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test bye byebye active') - expect(leave).toHaveBeenCalled() - }).thenWaitFor(nextFrame).then(() => { + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe('test bye byebye active') + expect(leave).toHaveBeenCalled() + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.children[0].className).toBe('test byebye active bye-to') - }).thenWaitFor(duration + buffer).then(() => { + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { + }) + .then(() => { expect(vm.$el.children[0].className).toBe('test hello hello-active') expect(enter).toHaveBeenCalled() - }).thenWaitFor(nextFrame).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.children[0].className).toBe('test hello-active hello-to') - }).thenWaitFor(duration + buffer).then(() => { + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('transition events', done => { - const onLeaveSpy = vi.fn() - const onEnterSpy = vi.fn() - const beforeLeaveSpy = vi.fn() - const beforeEnterSpy = vi.fn() - const afterLeaveSpy = vi.fn() - const afterEnterSpy = vi.fn() + it('transition events', (done) => { + const onLeaveSpy = vi.fn() + const onEnterSpy = vi.fn() + const beforeLeaveSpy = vi.fn() + const beforeEnterSpy = vi.fn() + const afterLeaveSpy = vi.fn() + const afterEnterSpy = vi.fn() - const vm = new Vue({ - template: ` + const vm = new Vue({ + template: `
`, - data: { ok: true }, - methods: { - beforeLeave: (el) => { - expect(el).toBe(vm.$el.children[0]) - expect(el.className).toBe('test') - beforeLeaveSpy(el) - }, - leave: (el) => onLeaveSpy(el), - afterLeave: (el) => afterLeaveSpy(el), - beforeEnter: (el) => { - expect(vm.$el.contains(el)).toBe(false) - expect(el.className).toBe('test') - beforeEnterSpy(el) - }, - enter: (el) => { - expect(vm.$el.contains(el)).toBe(true) - onEnterSpy(el) - }, - afterEnter: (el) => afterEnterSpy(el) - } - }).$mount(el) + data: { ok: true }, + methods: { + beforeLeave: (el) => { + expect(el).toBe(vm.$el.children[0]) + expect(el.className).toBe('test') + beforeLeaveSpy(el) + }, + leave: (el) => onLeaveSpy(el), + afterLeave: (el) => afterLeaveSpy(el), + beforeEnter: (el) => { + expect(vm.$el.contains(el)).toBe(false) + expect(el.className).toBe('test') + beforeEnterSpy(el) + }, + enter: (el) => { + expect(vm.$el.contains(el)).toBe(true) + onEnterSpy(el) + }, + afterEnter: (el) => afterEnterSpy(el) + } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') - let _el = vm.$el.children[0] - vm.ok = false - waitForUpdate(() => { - expect(beforeLeaveSpy).toHaveBeenCalledWith(_el) - expect(onLeaveSpy).toHaveBeenCalledWith(_el) - expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active') - }).thenWaitFor(nextFrame).then(() => { + let _el = vm.$el.children[0] + vm.ok = false + waitForUpdate(() => { + expect(beforeLeaveSpy).toHaveBeenCalledWith(_el) + expect(onLeaveSpy).toHaveBeenCalledWith(_el) + expect(vm.$el.children[0].className).toBe( + 'test test-leave test-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(afterLeaveSpy).not.toHaveBeenCalled() - expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave-active test-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(afterLeaveSpy).toHaveBeenCalledWith(_el) expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { + }) + .then(() => { _el = vm.$el.children[0] expect(beforeEnterSpy).toHaveBeenCalledWith(_el) expect(onEnterSpy).toHaveBeenCalledWith(_el) - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') - }).thenWaitFor(nextFrame).then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter test-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(afterEnterSpy).not.toHaveBeenCalled() - expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter-active test-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(afterEnterSpy).toHaveBeenCalledWith(_el) expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('transition events (v-show)', done => { - const onLeaveSpy = vi.fn() - const onEnterSpy = vi.fn() - const beforeLeaveSpy = vi.fn() - const beforeEnterSpy = vi.fn() - const afterLeaveSpy = vi.fn() - const afterEnterSpy = vi.fn() + it('transition events (v-show)', (done) => { + const onLeaveSpy = vi.fn() + const onEnterSpy = vi.fn() + const beforeLeaveSpy = vi.fn() + const beforeEnterSpy = vi.fn() + const afterLeaveSpy = vi.fn() + const afterEnterSpy = vi.fn() - const vm = new Vue({ - template: ` + const vm = new Vue({ + template: `
`, - data: { ok: true }, - methods: { - beforeLeave: (el) => { - expect(el.style.display).toBe('') - expect(el).toBe(vm.$el.children[0]) - expect(el.className).toBe('test') - beforeLeaveSpy(el) - }, - leave: (el) => { - expect(el.style.display).toBe('') - onLeaveSpy(el) - }, - afterLeave: (el) => { - expect(el.style.display).toBe('none') - afterLeaveSpy(el) - }, - beforeEnter: (el) => { - expect(el.className).toBe('test') - expect(el.style.display).toBe('none') - beforeEnterSpy(el) - }, - enter: (el) => { - expect(el.style.display).toBe('') - onEnterSpy(el) - }, - afterEnter: (el) => { - expect(el.style.display).toBe('') - afterEnterSpy(el) - } + data: { ok: true }, + methods: { + beforeLeave: (el) => { + expect(el.style.display).toBe('') + expect(el).toBe(vm.$el.children[0]) + expect(el.className).toBe('test') + beforeLeaveSpy(el) + }, + leave: (el) => { + expect(el.style.display).toBe('') + onLeaveSpy(el) + }, + afterLeave: (el) => { + expect(el.style.display).toBe('none') + afterLeaveSpy(el) + }, + beforeEnter: (el) => { + expect(el.className).toBe('test') + expect(el.style.display).toBe('none') + beforeEnterSpy(el) + }, + enter: (el) => { + expect(el.style.display).toBe('') + onEnterSpy(el) + }, + afterEnter: (el) => { + expect(el.style.display).toBe('') + afterEnterSpy(el) } - }).$mount(el) + } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') - let _el = vm.$el.children[0] - vm.ok = false - waitForUpdate(() => { - expect(beforeLeaveSpy).toHaveBeenCalledWith(_el) - expect(onLeaveSpy).toHaveBeenCalledWith(_el) - expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active') - }).thenWaitFor(nextFrame).then(() => { + let _el = vm.$el.children[0] + vm.ok = false + waitForUpdate(() => { + expect(beforeLeaveSpy).toHaveBeenCalledWith(_el) + expect(onLeaveSpy).toHaveBeenCalledWith(_el) + expect(vm.$el.children[0].className).toBe( + 'test test-leave test-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(afterLeaveSpy).not.toHaveBeenCalled() - expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave-active test-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(afterLeaveSpy).toHaveBeenCalledWith(_el) expect(vm.$el.children[0].style.display).toBe('none') vm.ok = true - }).then(() => { + }) + .then(() => { _el = vm.$el.children[0] expect(beforeEnterSpy).toHaveBeenCalledWith(_el) expect(onEnterSpy).toHaveBeenCalledWith(_el) - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') - }).thenWaitFor(nextFrame).then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter test-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(afterEnterSpy).not.toHaveBeenCalled() - expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter-active test-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(afterEnterSpy).toHaveBeenCalledWith(_el) expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('explicit user callback in JavaScript hooks', done => { - let next - const vm = new Vue({ - template: `
+ it('explicit user callback in JavaScript hooks', (done) => { + let next + const vm = new Vue({ + template: `
foo
`, - data: { ok: true }, - methods: { - enter: (el, cb) => { - next = cb - }, - leave: (el, cb) => { - next = cb - } + data: { ok: true }, + methods: { + enter: (el, cb) => { + next = cb + }, + leave: (el, cb) => { + next = cb } - }).$mount(el) - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to') - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to') + } + }).$mount(el) + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave test-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave-active test-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave-active test-leave-to' + ) expect(next).toBeTruthy() next() expect(vm.$el.children.length).toBe(0) - }).then(() => { + }) + .then(() => { vm.ok = true - }).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to') - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to') + }) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter test-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter-active test-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter-active test-enter-to' + ) expect(next).toBeTruthy() next() expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('css: false', done => { - const enterSpy = vi.fn() - const leaveSpy = vi.fn() - const vm = new Vue({ - template: ` + it('css: false', (done) => { + const enterSpy = vi.fn() + const leaveSpy = vi.fn() + const vm = new Vue({ + template: `
foo
`, - data: { ok: true }, - methods: { - enter: enterSpy, - leave: leaveSpy - } - }).$mount(el) + data: { ok: true }, + methods: { + enter: enterSpy, + leave: leaveSpy + } + }).$mount(el) - vm.ok = false - waitForUpdate(() => { - expect(leaveSpy).toHaveBeenCalled() - expect(vm.$el.innerHTML).toBe('') - vm.ok = true - }).then(() => { + vm.ok = false + waitForUpdate(() => { + expect(leaveSpy).toHaveBeenCalled() + expect(vm.$el.innerHTML).toBe('') + vm.ok = true + }) + .then(() => { expect(enterSpy).toHaveBeenCalled() expect(vm.$el.innerHTML).toBe('
foo
') - }).then(done) + }) + .then(done) + }) + + it('no transition detected', (done) => { + const enterSpy = vi.fn() + const leaveSpy = vi.fn() + const vm = new Vue({ + template: + '
foo
', + data: { ok: true }, + methods: { + enter: enterSpy, + leave: leaveSpy + } + }).$mount(el) + + vm.ok = false + waitForUpdate(() => { + expect(leaveSpy).toHaveBeenCalled() + expect(vm.$el.innerHTML).toBe( + '
foo
' + ) }) - - it('no transition detected', done => { - const enterSpy = vi.fn() - const leaveSpy = vi.fn() - const vm = new Vue({ - template: '
foo
', - data: { ok: true }, - methods: { - enter: enterSpy, - leave: leaveSpy - } - }).$mount(el) - - vm.ok = false - waitForUpdate(() => { - expect(leaveSpy).toHaveBeenCalled() - expect(vm.$el.innerHTML).toBe('
foo
') - }).thenWaitFor(nextFrame).then(() => { + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe('') vm.ok = true - }).then(() => { + }) + .then(() => { expect(enterSpy).toHaveBeenCalled() - expect(vm.$el.innerHTML).toBe('
foo
') - }).thenWaitFor(nextFrame).then(() => { + expect(vm.$el.innerHTML).toBe( + '
foo
' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { expect(vm.$el.innerHTML).toBe('
foo
') - }).then(done) - }) + }) + .then(done) + }) - it('enterCancelled', done => { - const spy = vi.fn() - const vm = new Vue({ - template: ` + it('enterCancelled', (done) => { + const spy = vi.fn() + const vm = new Vue({ + template: `
foo
`, - data: { ok: false }, - methods: { - enterCancelled: spy - } - }).$mount(el) + data: { ok: false }, + methods: { + enterCancelled: spy + } + }).$mount(el) - expect(vm.$el.innerHTML).toBe('') - vm.ok = true - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to') - }).thenWaitFor(duration / 2).then(() => { - vm.ok = false - }).then(() => { - expect(spy).toHaveBeenCalled() - expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to') - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.children.length).toBe(0) - }).then(done) + expect(vm.$el.innerHTML).toBe('') + vm.ok = true + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter test-enter-active' + ) }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter-active test-enter-to' + ) + }) + .thenWaitFor(duration / 2) + .then(() => { + vm.ok = false + }) + .then(() => { + expect(spy).toHaveBeenCalled() + expect(vm.$el.children[0].className).toBe( + 'test test-leave test-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave-active test-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.children.length).toBe(0) + }) + .then(done) + }) - it('should remove stale leaving elements', done => { - const spy = vi.fn() - const vm = new Vue({ - template: ` + it('should remove stale leaving elements', (done) => { + const spy = vi.fn() + const vm = new Vue({ + template: `
foo
`, - data: { ok: true }, - methods: { - afterLeave: spy - } - }).$mount(el) + data: { ok: true }, + methods: { + afterLeave: spy + } + }).$mount(el) - expect(vm.$el.innerHTML).toBe('
foo
') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active') - }).thenWaitFor(duration / 2).then(() => { + expect(vm.$el.innerHTML).toBe('
foo
') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave test-leave-active' + ) + }) + .thenWaitFor(duration / 2) + .then(() => { vm.ok = true - }).then(() => { + }) + .then(() => { expect(spy).toHaveBeenCalled() expect(vm.$el.children.length).toBe(1) // should have removed leaving element - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter test-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter-active test-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.innerHTML).toBe('
foo
') - }).then(done) - }) + }) + .then(done) + }) - it('transition with v-show', done => { - const vm = new Vue({ - template: ` + it('transition with v-show', (done) => { + const vm = new Vue({ + template: `
foo
`, - data: { ok: true } - }).$mount(el) + data: { ok: true } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.textContent).toBe('foo') - expect(vm.$el.children[0].style.display).toBe('') - expect(vm.$el.children[0].className).toBe('test') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + // should not apply transition on initial render by default + expect(vm.$el.textContent).toBe('foo') + expect(vm.$el.children[0].style.display).toBe('') + expect(vm.$el.children[0].className).toBe('test') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave test-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave-active test-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].style.display).toBe('none') vm.ok = true - }).then(() => { + }) + .then(() => { expect(vm.$el.children[0].style.display).toBe('') - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter test-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter-active test-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('transition with v-show, inside child component', done => { - const vm = new Vue({ - template: ` + it('transition with v-show, inside child component', (done) => { + const vm = new Vue({ + template: `
`, - data: { ok: true }, - components: { - test: { - template: `
foo
` - } + data: { ok: true }, + components: { + test: { + template: `
foo
` } - }).$mount(el) + } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.textContent).toBe('foo') - expect(vm.$el.children[0].style.display).toBe('') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + // should not apply transition on initial render by default + expect(vm.$el.textContent).toBe('foo') + expect(vm.$el.children[0].style.display).toBe('') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave test-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave-active test-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].style.display).toBe('none') vm.ok = true - }).then(() => { + }) + .then(() => { expect(vm.$el.children[0].style.display).toBe('') - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter test-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter-active test-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('leaveCancelled (v-show only)', done => { - const spy = vi.fn() - const vm = new Vue({ - template: ` + it('leaveCancelled (v-show only)', (done) => { + const spy = vi.fn() + const vm = new Vue({ + template: `
foo
`, - data: { ok: true }, - methods: { - leaveCancelled: spy - } - }).$mount(el) + data: { ok: true }, + methods: { + leaveCancelled: spy + } + }).$mount(el) - expect(vm.$el.children[0].style.display).toBe('') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to') - }).thenWaitFor(10).then(() => { + expect(vm.$el.children[0].style.display).toBe('') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave test-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave-active test-leave-to' + ) + }) + .thenWaitFor(10) + .then(() => { vm.ok = true - }).then(() => { + }) + .then(() => { expect(spy).toHaveBeenCalled() - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter test-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter-active test-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].style.display).toBe('') - }).then(done) - }) + }) + .then(done) + }) - it('leave transition with v-show: cancelled on next frame', done => { - const vm = new Vue({ - template: ` + it('leave transition with v-show: cancelled on next frame', (done) => { + const vm = new Vue({ + template: `
foo
`, - data: { ok: true } - }).$mount(el) - - vm.ok = false - waitForUpdate(() => { - vm.ok = true - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to') - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) - - it('enter transition with v-show: cancelled on next frame', done => { - const vm = new Vue({ - template: ` -
- -
foo
- -
- `, - data: { ok: false } - }).$mount(el) + data: { ok: true } + }).$mount(el) + vm.ok = false + waitForUpdate(() => { vm.ok = true - waitForUpdate(() => { - vm.ok = false - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to') - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.children[0].className).toBe('test') - }).then(done) }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter-active test-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.children[0].className).toBe('test') + }) + .then(done) + }) - it('animations', done => { - const vm = new Vue({ - template: ` + it('enter transition with v-show: cancelled on next frame', (done) => { + const vm = new Vue({ + template: ` +
+ +
foo
+ +
+ `, + data: { ok: false } + }).$mount(el) + + vm.ok = true + waitForUpdate(() => { + vm.ok = false + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave-active test-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.children[0].className).toBe('test') + }) + .then(done) + }) + + it('animations', (done) => { + const vm = new Vue({ + template: `
foo
`, - data: { ok: true } - }).$mount(el) + data: { ok: true } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test-anim-leave test-anim-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test-anim-leave-active test-anim-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test-anim-leave test-anim-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test-anim-leave-active test-anim-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { - expect(vm.$el.children[0].className).toBe('test-anim-enter test-anim-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test-anim-enter-active test-anim-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + }) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test-anim-enter test-anim-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test-anim-enter-active test-anim-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('') - }).then(done) - }) + }) + .then(done) + }) - it('explicit transition type', done => { - const vm = new Vue({ - template: ` + it('explicit transition type', (done) => { + const vm = new Vue({ + template: `
foo
`, - data: { ok: true } - }).$mount(el) + data: { ok: true } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-anim-long-leave test-anim-long-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-anim-long-leave-active test-anim-long-leave-to') - }).thenWaitFor(duration + 5).then(() => { + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-anim-long-leave test-anim-long-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-anim-long-leave-active test-anim-long-leave-to' + ) + }) + .thenWaitFor(duration + 5) + .then(() => { // should not end early due to transition presence - expect(vm.$el.children[0].className).toBe('test test-anim-long-leave-active test-anim-long-leave-to') - }).thenWaitFor(duration + 5).then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-anim-long-leave-active test-anim-long-leave-to' + ) + }) + .thenWaitFor(duration + 5) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { - expect(vm.$el.children[0].className).toBe('test test-anim-long-enter test-anim-long-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-anim-long-enter-active test-anim-long-enter-to') - }).thenWaitFor(duration + 5).then(() => { - expect(vm.$el.children[0].className).toBe('test test-anim-long-enter-active test-anim-long-enter-to') - }).thenWaitFor(duration + 5).then(() => { + }) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-anim-long-enter test-anim-long-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-anim-long-enter-active test-anim-long-enter-to' + ) + }) + .thenWaitFor(duration + 5) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-anim-long-enter-active test-anim-long-enter-to' + ) + }) + .thenWaitFor(duration + 5) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('transition on appear', done => { - const vm = new Vue({ - template: ` + it('transition on appear', (done) => { + const vm = new Vue({ + template: `
`, - data: { ok: true } - }).$mount(el) + data: { ok: true } + }).$mount(el) - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-appear-active test-appear-to') - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.children[0].className).toBe('test') - }).then(done) + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-appear test-appear-active' + ) }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-appear-active test-appear-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.children[0].className).toBe('test') + }) + .then(done) + }) - it('transition on appear with v-show', done => { - const vm = new Vue({ - template: ` + it('transition on appear with v-show', (done) => { + const vm = new Vue({ + template: `
foo
`, - data: { ok: true } - }).$mount(el) + data: { ok: true } + }).$mount(el) - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to') - }).thenWaitFor(duration + buffer).then(() => { - expect(vm.$el.children[0].className).toBe('test') - }).then(done) + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter test-enter-active' + ) }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter-active test-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { + expect(vm.$el.children[0].className).toBe('test') + }) + .then(done) + }) - it('transition on SVG elements', done => { - const vm = new Vue({ - template: ` + it('transition on SVG elements', (done) => { + const vm = new Vue({ + template: ` `, - data: { ok: true } - }).$mount(el) + data: { ok: true } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-leave v-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + // should not apply transition on initial render by default + expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.childNodes[0].getAttribute('class')).toBe( + 'test v-leave v-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.childNodes[0].getAttribute('class')).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.childNodes.length).toBe(1) expect(vm.$el.childNodes[0].nodeType).toBe(8) // should be an empty comment node expect(vm.$el.childNodes[0].textContent).toBe('') vm.ok = true - }).then(() => { - expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter v-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter-active v-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + }) + .then(() => { + expect(vm.$el.childNodes[0].getAttribute('class')).toBe( + 'test v-enter v-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.childNodes[0].getAttribute('class')).toBe( + 'test v-enter-active v-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('transition on child components', done => { - const vm = new Vue({ - template: ` + it('transition on child components', (done) => { + const vm = new Vue({ + template: `
`, - data: { ok: true }, - components: { - test: { - template: ` + data: { ok: true }, + components: { + test: { + template: `
foo
 ` // test transition override from parent - } } - }).$mount(el) + } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { + }) + .then(() => { expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter-active v-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('transition inside child component with v-if', done => { - const vm = new Vue({ - template: ` + it('transition inside child component with v-if', (done) => { + const vm = new Vue({ + template: `
`, - data: { ok: true }, - components: { - test: { - template: ` + data: { ok: true }, + components: { + test: { + template: `
foo
 ` - } } - }).$mount(el) + } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { + }) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('transition with appear inside child component with v-if', done => { - const vm = new Vue({ - template: ` + it('transition with appear inside child component with v-if', (done) => { + const vm = new Vue({ + template: `
`, - data: { ok: true }, - components: { - test: { - template: ` + data: { ok: true }, + components: { + test: { + template: ` foo
` - } } - }).$mount(el) + } + }).$mount(el) - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-appear-active test-appear-to') - }).thenWaitFor(duration + buffer).then(() => { + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-appear test-appear-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-appear-active test-appear-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') vm.ok = false - }).then(() => { + }) + .then(() => { expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) - }).then(done) - }) + }) + .then(done) + }) - it('transition inside nested child component with v-if', done => { - const vm = new Vue({ - template: ` + it('transition inside nested child component with v-if', (done) => { + const vm = new Vue({ + template: `
`, - data: { ok: true }, - components: { - foo: { - template: '', - components: { - bar: { - template: '
foo
' - } + data: { ok: true }, + components: { + foo: { + template: '', + components: { + bar: { + template: '
foo
' } } } - }).$mount(el) + } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { + }) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('transition with appear inside nested child component with v-if', done => { - const vm = new Vue({ - template: ` + it('transition with appear inside nested child component with v-if', (done) => { + const vm = new Vue({ + template: `
`, - data: { ok: true }, - components: { - foo: { - template: '', - components: { - bar: { - template: ` + data: { ok: true }, + components: { + foo: { + template: '', + components: { + bar: { + template: ` foo
` - } } } } - }).$mount(el) + } + }).$mount(el) - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-appear test-appear-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-appear-active test-appear-to') - }).thenWaitFor(duration + buffer).then(() => { + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-appear test-appear-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-appear-active test-appear-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') vm.ok = false - }).then(() => { + }) + .then(() => { expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) - }).then(done) - }) + }) + .then(done) + }) - it('custom transition higher-order component', done => { - const vm = new Vue({ - template: '
foo
', - data: { ok: true }, - components: { - 'my-transition': { - functional: true, - render (h, { data, children }) { - (data.props || (data.props = {})).name = 'test' - return h('transition', data, children) - } + it('custom transition higher-order component', (done) => { + const vm = new Vue({ + template: + '
foo
', + data: { ok: true }, + components: { + 'my-transition': { + functional: true, + render(h, { data, children }) { + ;(data.props || (data.props = {})).name = 'test' + return h('transition', data, children) } } - }).$mount(el) + } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('
foo
') - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test test-leave test-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-leave-active test-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('
foo
') + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave test-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-leave-active test-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter test-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test test-enter-active test-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + }) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter test-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test test-enter-active test-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('warn when used on multiple elements', () => { - new Vue({ - template: `

1

2

` - }).$mount() - expect(` can only be used on a single element`).toHaveBeenWarned() - }) + it('warn when used on multiple elements', () => { + new Vue({ + template: `

1

2

` + }).$mount() + expect( + ` can only be used on a single element` + ).toHaveBeenWarned() + }) - describe('explicit durations -', () => { - it('single value', done => { - const vm = new Vue({ - template: ` + describe('explicit durations -', () => { + it('single value', (done) => { + const vm = new Vue({ + template: `
foo
`, - data: { ok: true } - }).$mount(el) + data: { ok: true } + }).$mount(el) - vm.ok = false + vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(explicitDuration + buffer).then(() => { + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(explicitDuration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to') - }).thenWaitFor(explicitDuration + buffer).then(() => { + }) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter v-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter-active v-enter-to' + ) + }) + .thenWaitFor(explicitDuration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('enter and auto leave', done => { - const vm = new Vue({ - template: ` + it('enter and auto leave', (done) => { + const vm = new Vue({ + template: `
foo
`, - data: { ok: true } - }).$mount(el) + data: { ok: true } + }).$mount(el) - vm.ok = false + vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to') - }).thenWaitFor(explicitDuration + buffer).then(() => { + }) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter v-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter-active v-enter-to' + ) + }) + .thenWaitFor(explicitDuration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('leave and auto enter', done => { - const vm = new Vue({ - template: ` + it('leave and auto enter', (done) => { + const vm = new Vue({ + template: `
foo
`, - data: { ok: true } - }).$mount(el) + data: { ok: true } + }).$mount(el) - vm.ok = false + vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(explicitDuration + buffer).then(() => { + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(explicitDuration + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + }) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter v-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter-active v-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('separate enter and leave', done => { - const enter = explicitDuration - const leave = explicitDuration * 2 + it('separate enter and leave', (done) => { + const enter = explicitDuration + const leave = explicitDuration * 2 - const vm = new Vue({ - template: ` + const vm = new Vue({ + template: `
foo
`, - data: { ok: true } - }).$mount(el) + data: { ok: true } + }).$mount(el) - vm.ok = false + vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(leave + buffer).then(() => { + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(leave + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to') - }).thenWaitFor(enter + buffer).then(() => { + }) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter v-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter-active v-enter-to' + ) + }) + .thenWaitFor(enter + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }) + }) + .then(done) + }) - it('enter and leave + duration change', done => { - const enter1 = explicitDuration * 2 - const enter2 = explicitDuration - const leave1 = explicitDuration * 0.5 - const leave2 = explicitDuration * 3 + it('enter and leave + duration change', (done) => { + const enter1 = explicitDuration * 2 + const enter2 = explicitDuration + const leave1 = explicitDuration * 0.5 + const leave2 = explicitDuration * 3 - const vm = new Vue({ - template: ` + const vm = new Vue({ + template: `
foo
`, - data: { - ok: true, - enter: enter1, - leave: leave1 - } - }).$mount(el) + data: { + ok: true, + enter: enter1, + leave: leave1 + } + }).$mount(el) - vm.ok = false + vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(leave1 + buffer).then(() => { + waitForUpdate(() => { + expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(leave1 + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to') - }).thenWaitFor(enter1 + buffer).then(() => { + }) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter v-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter-active v-enter-to' + ) + }) + .thenWaitFor(enter1 + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') vm.enter = enter2 vm.leave = leave2 - }).then(() => { + }) + .then(() => { vm.ok = false - }).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(leave2 + buffer).then(() => { + }) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave v-leave-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(leave2 + buffer) + .then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true - }).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to') - }).thenWaitFor(enter2 + buffer).then(() => { + }) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter v-enter-active' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter-active v-enter-to' + ) + }) + .thenWaitFor(enter2 + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') - }).then(done) - }, 10000) + }) + .then(done) + }, 10000) - it('warn invalid durations', done => { - const vm = new Vue({ - template: ` + it('warn invalid durations', (done) => { + const vm = new Vue({ + template: `
foo
`, - data: { - ok: true - } - }).$mount(el) + data: { + ok: true + } + }).$mount(el) - vm.ok = false - waitForUpdate(() => { - expect(` explicit leave duration is not a valid number - got "foo"`).toHaveBeenWarned() - }).thenWaitFor(duration + buffer).then(() => { - vm.ok = true - }).then(() => { - expect(` explicit enter duration is NaN`).toHaveBeenWarned() - }).then(done) + vm.ok = false + waitForUpdate(() => { + expect( + ` explicit leave duration is not a valid number - got "foo"` + ).toHaveBeenWarned() }) + .thenWaitFor(duration + buffer) + .then(() => { + vm.ok = true + }) + .then(() => { + expect( + ` explicit enter duration is NaN` + ).toHaveBeenWarned() + }) + .then(done) }) + }) - // #6687 - it('transition on child components with empty root node', done => { - const vm = new Vue({ - template: ` + // #6687 + it('transition on child components with empty root node', (done) => { + const vm = new Vue({ + template: `
`, - data: { view: 'one' }, - components: { - 'one': { - template: '
one
' - }, - 'two': { - template: '
two
' - } + data: { view: 'one' }, + components: { + one: { + template: '
one
' + }, + two: { + template: '
two
' } - }).$mount(el) + } + }).$mount(el) - // should not apply transition on initial render by default - expect(vm.$el.innerHTML).toBe('') - vm.view = 'two' - waitForUpdate(() => { - expect(vm.$el.innerHTML).toBe('
two
') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to') - }).thenWaitFor(duration + buffer).then(() => { + // should not apply transition on initial render by default + expect(vm.$el.innerHTML).toBe('') + vm.view = 'two' + waitForUpdate(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-enter-active v-enter-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.children[0].className).toBe('test') vm.view = 'one' - }).then(() => { + }) + .then(() => { // incoming comment node is appended instantly because it doesn't have // data and therefore doesn't go through the transition module. - expect(vm.$el.innerHTML).toBe('
two
') - }).thenWaitFor(nextFrame).then(() => { - expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to') - }).thenWaitFor(duration + buffer).then(() => { + expect(vm.$el.innerHTML).toBe( + '
two
' + ) + }) + .thenWaitFor(nextFrame) + .then(() => { + expect(vm.$el.children[0].className).toBe( + 'test v-leave-active v-leave-to' + ) + }) + .thenWaitFor(duration + buffer) + .then(() => { expect(vm.$el.innerHTML).toBe('') - }).then(done) - }) + }) + .then(done) + }) - // #8199 - it('should not throw error when replaced by v-html contents', (done) => { - const vm = new Vue({ - template: ` + // #8199 + it('should not throw error when replaced by v-html contents', (done) => { + const vm = new Vue({ + template: `
@@ -1293,13 +1832,12 @@ if (!isIE9) {
`, - data: { ok: true } - }).$mount(el) + data: { ok: true } + }).$mount(el) - vm.ok = false - waitForUpdate(() => { - expect(vm.$el.children[0].innerHTML).toBe('false') - }).then(done) - }) + vm.ok = false + waitForUpdate(() => { + expect(vm.$el.children[0].innerHTML).toBe('false') + }).then(done) }) -} +})