test: adjust transition tests for firefox

Author: yyx990803

test/unit/features/transition/transition-mode.spec.js

@@ -378,6 +378,187 @@ if (!isIE9) {
       }).then(done)
     })
 
+    it('transition out-in on async component (resolve before leave complete)', done => {
+      const vm = new Vue({
+        template: `
+          <div>
+            <transition name="test-anim" mode="out-in">
+              <component-a v-if="ok"></component-a>
+              <component-b v-else></component-b>
+            </transition>
+          </div>
+        `,
+        components: {
+          componentA: resolve => {
+            setTimeout(() => {
+              resolve({ template: '<div><h1>component A</h1></div>' })
+              next1()
+            }, duration / 2)
+          },
+          componentB: resolve => {
+            setTimeout(() => {
+              resolve({ template: '<div><h1>component B</h1></div>' })
+            }, duration / 2)
+          }
+        },
+        data: {
+          ok: true
+        }
+      }).$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
+              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: `
+          <div>
+            <transition name="test-anim" mode="out-in">
+              <component-a v-if="ok"></component-a>
+              <component-b v-else></component-b>
+            </transition>
+          </div>
+        `,
+        components: {
+          componentA: { template: '<div><h1>component A</h1></div>' },
+          componentB: resolve => {
+            setTimeout(() => {
+              resolve({ template: '<div><h1>component B</h1></div>' })
+              Vue.nextTick(next)
+            }, (duration + buffer) * 1.5)
+          }
+        },
+        data: {
+          ok: true
+        }
+      }).$mount(el)
+
+      expect(vm.$el.innerHTML).toBe('<div><h1>component A</h1></div>')
+
+      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(() => {
+        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.length).toBe(1)
+        expect(vm.$el.textContent).toBe('component B')
+        expect(vm.$el.children[0].className).toBe('')
+      }).then(done)
+    })
+
+    it('transition in-out on async component', done => {
+      const vm = new Vue({
+        template: `
+          <div>
+            <transition name="test-anim" mode="in-out">
+              <component-a v-if="ok"></component-a>
+              <component-b v-else></component-b>
+            </transition>
+          </div>
+        `,
+        components: {
+          componentA: resolve => {
+            setTimeout(() => {
+              resolve({ template: '<div><h1>component A</h1></div>' })
+              next1()
+            }, duration / 2)
+          },
+          componentB: resolve => {
+            setTimeout(() => {
+              resolve({ template: '<div><h1>component B</h1></div>' })
+              next2()
+            }, duration / 2)
+          }
+        },
+        data: {
+          ok: true
+        }
+      }).$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)
+          })
+        })
+      }
+
+      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(() => {
+          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: '<transition mode="foo"><div>123</div></transition>'

test/unit/features/transition/transition.spec.js

@@ -877,187 +877,6 @@ if (!isIE9) {
       expect(`<transition> can only be used on a single element`).toHaveBeenWarned()
     })
 
-    it('transition out-in on async component (resolve before leave complete)', done => {
-      const vm = new Vue({
-        template: `
-          <div>
-            <transition name="test-anim" mode="out-in">
-              <component-a v-if="ok"></component-a>
-              <component-b v-else></component-b>
-            </transition>
-          </div>
-        `,
-        components: {
-          componentA: resolve => {
-            setTimeout(() => {
-              resolve({ template: '<div><h1>component A</h1></div>' })
-              next1()
-            }, duration / 2)
-          },
-          componentB: resolve => {
-            setTimeout(() => {
-              resolve({ template: '<div><h1>component B</h1></div>' })
-            }, duration / 2)
-          }
-        },
-        data: {
-          ok: true
-        }
-      }).$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
-              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).toBe('test-anim-enter-active test-anim-enter-to')
-        }).thenWaitFor(duration + buffer).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: `
-          <div>
-            <transition name="test-anim" mode="out-in">
-              <component-a v-if="ok"></component-a>
-              <component-b v-else></component-b>
-            </transition>
-          </div>
-        `,
-        components: {
-          componentA: { template: '<div><h1>component A</h1></div>' },
-          componentB: resolve => {
-            setTimeout(() => {
-              resolve({ template: '<div><h1>component B</h1></div>' })
-              Vue.nextTick(next)
-            }, (duration + buffer) * 1.5)
-          }
-        },
-        data: {
-          ok: true
-        }
-      }).$mount(el)
-
-      expect(vm.$el.innerHTML).toBe('<div><h1>component A</h1></div>')
-
-      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(() => {
-        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.length).toBe(1)
-        expect(vm.$el.textContent).toBe('component B')
-        expect(vm.$el.children[0].className).toBe('')
-      }).then(done)
-    })
-
-    it('transition in-out on async component', done => {
-      const vm = new Vue({
-        template: `
-          <div>
-            <transition name="test-anim" mode="in-out">
-              <component-a v-if="ok"></component-a>
-              <component-b v-else></component-b>
-            </transition>
-          </div>
-        `,
-        components: {
-          componentA: resolve => {
-            setTimeout(() => {
-              resolve({ template: '<div><h1>component A</h1></div>' })
-              next1()
-            }, duration / 2)
-          },
-          componentB: resolve => {
-            setTimeout(() => {
-              resolve({ template: '<div><h1>component B</h1></div>' })
-              next2()
-            }, duration / 2)
-          }
-        },
-        data: {
-          ok: true
-        }
-      }).$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)
-          })
-        })
-      }
-
-      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).toBe('test-anim-leave-active test-anim-leave-to')
-          expect(vm.$el.children[1].className).toBe('')
-        }).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)
-      }
-    })
-
     describe('explicit durations -', () => {
       it('single value', done => {
         const vm = new Vue({