diff --git a/test/helpers/wait-for-update.js b/test/helpers/wait-for-update.js index d5888175..d691f467 100644 --- a/test/helpers/wait-for-update.js +++ b/test/helpers/wait-for-update.js @@ -51,6 +51,9 @@ window.waitForUpdate = initialCb => { return chainer }, thenWaitFor: (wait) => { + if (typeof wait === 'number') { + wait = timeout(wait) + } wait.wait = true queue.push(wait) return chainer @@ -59,3 +62,7 @@ window.waitForUpdate = initialCb => { return chainer } + +function timeout (n) { + return next => setTimeout(next, n) +} diff --git a/test/unit/features/transition/inject-styles.js b/test/unit/features/transition/inject-styles.js new file mode 100644 index 00000000..0206833e --- /dev/null +++ b/test/unit/features/transition/inject-styles.js @@ -0,0 +1,51 @@ +function insertCSS (text) { + var cssEl = document.createElement('style') + cssEl.textContent = text.trim() + document.head.appendChild(cssEl) +} + +const duration = 50 +let injected = false + +export default function injectStyles () { + if (injected) return duration + injected = true + insertCSS(` + .test { + -webkit-transition: opacity ${duration}ms ease; + transition: opacity ${duration}ms ease; + } + .v-appear, .v-enter, .v-leave-active, + .test-appear, .test-enter, .test-leave-active, + .hello, .bye.active, + .changed-enter { + opacity: 0; + } + .test-anim-enter-active { + animation: test-enter ${duration}ms; + -webkit-animation: test-enter ${duration}ms; + } + .test-anim-leave-active { + animation: test-leave ${duration}ms; + -webkit-animation: test-leave ${duration}ms; + } + @keyframes test-enter { + from { opacity: 0 } + to { opacity: 1 } + } + @-webkit-keyframes test-enter { + from { opacity: 0 } + to { opacity: 1 } + } + @keyframes test-leave { + from { opacity: 1 } + to { opacity: 0 } + } + @-webkit-keyframes test-leave { + from { opacity: 1 } + to { opacity: 0 } + } + `) + return duration +} + diff --git a/test/unit/features/transition/transition-group.spec.js b/test/unit/features/transition/transition-group.spec.js deleted file mode 100644 index e69de29b..00000000 diff --git a/test/unit/features/transition/transition-mode.spec.js b/test/unit/features/transition/transition-mode.spec.js new file mode 100644 index 00000000..7fabeffe --- /dev/null +++ b/test/unit/features/transition/transition-mode.spec.js @@ -0,0 +1,32 @@ +import Vue from 'vue' +import injectStyles from './inject-styles' +import { isIE9 } from 'web/util/index' +import { nextFrame } from 'web/runtime/modules/transition' + +if (!isIE9) { + describe('Transition mode', () => { + it('dynamic components, simultaneous', done => { + + }) + + it('dynamic components, out-in', done => { + + }) + + it('dynamic components, in-out', done => { + + }) + + it('normal elements with different key, simultaneous', done => { + + }) + + it('normal elements with different key, out-in', done => { + + }) + + it('normal elements with different key, in-out', done => { + + }) + }) +} diff --git a/test/unit/features/transition/transition.spec.js b/test/unit/features/transition/transition.spec.js index e90eddca..a26d8595 100644 --- a/test/unit/features/transition/transition.spec.js +++ b/test/unit/features/transition/transition.spec.js @@ -1,46 +1,11 @@ import Vue from 'vue' +import injectStyles from './inject-styles' import { isIE9 } from 'web/util/index' import { nextFrame } from 'web/runtime/modules/transition' if (!isIE9) { describe('Transition system', () => { - const duration = 50 - insertCSS(` - .test { - -webkit-transition: opacity ${duration}ms ease; - transition: opacity ${duration}ms ease; - } - .v-appear, .v-enter, .v-leave-active, - .test-appear, .test-enter, .test-leave-active, - .hello, .bye.active, - .changed-enter { - opacity: 0; - } - .test-anim-enter-active { - animation: test-enter ${duration}ms; - -webkit-animation: test-enter ${duration}ms; - } - .test-anim-leave-active { - animation: test-leave ${duration}ms; - -webkit-animation: test-leave ${duration}ms; - } - @keyframes test-enter { - from { opacity: 0 } - to { opacity: 1 } - } - @-webkit-keyframes test-enter { - from { opacity: 0 } - to { opacity: 1 } - } - @keyframes test-leave { - from { opacity: 1 } - to { opacity: 0 } - } - @-webkit-keyframes test-leave { - from { opacity: 1 } - to { opacity: 0 } - } - `) + const duration = injectStyles() let el beforeEach(() => { @@ -61,14 +26,14 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test v-leave') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test v-leave-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { expect(vm.$el.children[0].className).toBe('test v-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test v-enter-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].className).toBe('test') }).then(done) }) @@ -86,14 +51,14 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test test-leave') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-leave-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].className).toBe('test') }).then(done) }) @@ -119,14 +84,14 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test bye') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test bye active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { expect(vm.$el.children[0].className).toBe('test hello') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test hello-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].className).toBe('test') }).then(done) }) @@ -147,7 +112,7 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test test-leave') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-leave-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true vm.trans = 'changed' @@ -155,7 +120,7 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test changed-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test changed-enter-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].className).toBe('test') }).then(done) }) @@ -188,7 +153,7 @@ if (!isIE9) { expect(onLeave).toHaveBeenCalled() }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test bye active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { @@ -196,7 +161,7 @@ if (!isIE9) { expect(onEnter).toHaveBeenCalled() }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test hello-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].className).toBe('test') }).then(done) }) @@ -239,7 +204,7 @@ if (!isIE9) { }).thenWaitFor(nextFrame).then(() => { expect(hooks.afterLeave).not.toHaveBeenCalled() expect(vm.$el.children[0].className).toBe('test test-leave-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(hooks.afterLeave).toHaveBeenCalled() expect(vm.$el.children.length).toBe(0) vm.ok = true @@ -250,7 +215,7 @@ if (!isIE9) { }).thenWaitFor(nextFrame).then(() => { expect(hooks.afterEnter).not.toHaveBeenCalled() expect(vm.$el.children[0].className).toBe('test test-enter-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(hooks.afterEnter).toHaveBeenCalled() expect(vm.$el.children[0].className).toBe('test') }).then(done) @@ -277,7 +242,7 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test test-leave') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-leave-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].className).toBe('test test-leave-active') expect(next).toBeTruthy() next() @@ -288,7 +253,7 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') expect(next).toBeTruthy() next() @@ -367,14 +332,14 @@ if (!isIE9) { vm.ok = true waitForUpdate(() => { expect(vm.$el.children[0].className).toBe('test test-enter') - }).thenWaitFor(timeout(duration / 2)).then(() => { + }).thenWaitFor(duration / 2).then(() => { vm.ok = false }).then(() => { expect(spy).toHaveBeenCalled() expect(vm.$el.children[0].className).toBe('test test-leave') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-leave-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children.length).toBe(0) }).then(done) }) @@ -393,7 +358,7 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test test-leave') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-leave-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].style.display).toBe('none') vm.ok = true }).then(() => { @@ -401,7 +366,7 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].className).toBe('test') }).then(done) }) @@ -424,14 +389,14 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test test-leave') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-leave-active') - }).thenWaitFor(timeout(duration / 2)).then(() => { + }).thenWaitFor(duration / 2).then(() => { vm.ok = true }).then(() => { expect(spy).toHaveBeenCalled() expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].style.display).toBe('') }).then(done) }) @@ -449,14 +414,14 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test test-anim-leave') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-anim-leave-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { expect(vm.$el.children[0].className).toBe('test test-anim-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-anim-enter-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].className).toBe('test') }).then(done) }) @@ -482,7 +447,7 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test test-appear') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-appear-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].className).toBe('test') }).then(done) }) @@ -503,7 +468,7 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test test-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test test-enter-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].className).toBe('test') }).then(done) }) @@ -521,14 +486,14 @@ if (!isIE9) { expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-leave') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-leave-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.childNodes.length).toBe(0) vm.ok = true }).then(() => { expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test v-enter-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.childNodes[0].getAttribute('class')).toBe('test') }).then(done) }) @@ -551,26 +516,16 @@ if (!isIE9) { expect(vm.$el.children[0].className).toBe('test v-leave') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test v-leave-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children.length).toBe(0) vm.ok = true }).then(() => { expect(vm.$el.children[0].className).toBe('test v-enter') }).thenWaitFor(nextFrame).then(() => { expect(vm.$el.children[0].className).toBe('test v-enter-active') - }).thenWaitFor(timeout(duration + 10)).then(() => { + }).thenWaitFor(duration + 10).then(() => { expect(vm.$el.children[0].className).toBe('test') }).then(done) }) }) } - -function insertCSS (text) { - var cssEl = document.createElement('style') - cssEl.textContent = text.trim() - document.head.appendChild(cssEl) -} - -function timeout (n) { - return next => setTimeout(next, n) -}