test: skip transition tests for now

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: `
           <div>
-            ${useIs ? `<span is="transition-group">` : `<transition-group${appear ? ` appear` : ``}>`}
+            ${
+              useIs
+                ? `<span is="transition-group">`
+                : `<transition-group${appear ? ` appear` : ``}>`
+            }
               <div v-for="item in items" :key="item" class="test">{{ item }}</div>
             ${useIs ? `</span>` : `</transition-group>`}
           </div>
         `,
-        data: {
-          items: ['a', 'b', 'c']
-        }
-      }).$mount(el)
-      if (!appear) {
-        expect(vm.$el.innerHTML).toBe(
-          `<span>` +
-            vm.items.map(i => `<div class="test">${i}</div>`).join('') +
-          `</span>`
-        )
+      data: {
+        items: ['a', 'b', 'c']
       }
-      return vm
-    }
-
-    it('enter', done => {
-      const vm = createBasicVM()
-      vm.items.push('d', 'e')
-      waitForUpdate(() => {
-        expect(vm.$el.innerHTML).toBe(
-          `<span>` +
-            ['a', 'b', 'c'].map(i => `<div class="test">${i}</div>`).join('') +
-            `<div class="test v-enter v-enter-active">d</div>` +
-            `<div class="test v-enter v-enter-active">e</div>` +
+    }).$mount(el)
+    if (!appear) {
+      expect(vm.$el.innerHTML).toBe(
+        `<span>` +
+          vm.items.map((i) => `<div class="test">${i}</div>`).join('') +
           `</span>`
-        )
-      }).thenWaitFor(nextFrame).then(() => {
+      )
+    }
+    return vm
+  }
+
+  it('enter', (done) => {
+    const vm = createBasicVM()
+    vm.items.push('d', 'e')
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML).toBe(
+        `<span>` +
+          ['a', 'b', 'c'].map((i) => `<div class="test">${i}</div>`).join('') +
+          `<div class="test v-enter v-enter-active">d</div>` +
+          `<div class="test v-enter v-enter-active">e</div>` +
+          `</span>`
+      )
+    })
+      .thenWaitFor(nextFrame)
+      .then(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
-            ['a', 'b', 'c'].map(i => `<div class="test">${i}</div>`).join('') +
+            ['a', 'b', 'c']
+              .map((i) => `<div class="test">${i}</div>`)
+              .join('') +
             `<div class="test v-enter-active v-enter-to">d</div>` +
             `<div class="test v-enter-active v-enter-to">e</div>` +
-          `</span>`
+            `</span>`
         )
-      }).thenWaitFor(duration + buffer).then(() => {
+      })
+      .thenWaitFor(duration + buffer)
+      .then(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
-            vm.items.map(i => `<div class="test">${i}</div>`).join('') +
-          `</span>`
+            vm.items.map((i) => `<div class="test">${i}</div>`).join('') +
+            `</span>`
         )
-      }).then(done)
-    })
+      })
+      .then(done)
+  })
 
-    it('leave', done => {
-      const vm = createBasicVM()
-      vm.items = ['b']
-      waitForUpdate(() => {
-        expect(vm.$el.innerHTML).toBe(
-          `<span>` +
-            `<div class="test v-leave v-leave-active">a</div>` +
-            `<div class="test">b</div>` +
-            `<div class="test v-leave v-leave-active">c</div>` +
+  it('leave', (done) => {
+    const vm = createBasicVM()
+    vm.items = ['b']
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML).toBe(
+        `<span>` +
+          `<div class="test v-leave v-leave-active">a</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test v-leave v-leave-active">c</div>` +
           `</span>`
-        )
-      }).thenWaitFor(nextFrame).then(() => {
+      )
+    })
+      .thenWaitFor(nextFrame)
+      .then(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
             `<div class="test v-leave-active v-leave-to">a</div>` +
             `<div class="test">b</div>` +
             `<div class="test v-leave-active v-leave-to">c</div>` +
-          `</span>`
+            `</span>`
         )
-      }).thenWaitFor(duration + buffer).then(() => {
+      })
+      .thenWaitFor(duration + buffer)
+      .then(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
-            vm.items.map(i => `<div class="test">${i}</div>`).join('') +
-          `</span>`
+            vm.items.map((i) => `<div class="test">${i}</div>`).join('') +
+            `</span>`
         )
-      }).then(done)
-    })
+      })
+      .then(done)
+  })
 
-    it('enter + leave', done => {
-      const vm = createBasicVM()
-      vm.items = ['b', 'c', 'd']
-      waitForUpdate(() => {
-        expect(vm.$el.innerHTML).toBe(
-          `<span>` +
-            `<div class="test v-leave v-leave-active">a</div>` +
-            `<div class="test">b</div>` +
-            `<div class="test">c</div>` +
-            `<div class="test v-enter v-enter-active">d</div>` +
+  it('enter + leave', (done) => {
+    const vm = createBasicVM()
+    vm.items = ['b', 'c', 'd']
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML).toBe(
+        `<span>` +
+          `<div class="test v-leave v-leave-active">a</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test">c</div>` +
+          `<div class="test v-enter v-enter-active">d</div>` +
           `</span>`
-        )
-      }).thenWaitFor(nextFrame).then(() => {
+      )
+    })
+      .thenWaitFor(nextFrame)
+      .then(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
             `<div class="test v-leave-active v-leave-to">a</div>` +
             `<div class="test">b</div>` +
             `<div class="test">c</div>` +
             `<div class="test v-enter-active v-enter-to">d</div>` +
-          `</span>`
+            `</span>`
         )
-      }).thenWaitFor(duration + buffer).then(() => {
+      })
+      .thenWaitFor(duration + buffer)
+      .then(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
-            vm.items.map(i => `<div class="test">${i}</div>`).join('') +
-          `</span>`
+            vm.items.map((i) => `<div class="test">${i}</div>`).join('') +
+            `</span>`
         )
-      }).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(
-          `<span>` +
-            `<div class="test v-leave v-leave-active">a</div>` +
-            `<div class="test">b</div>` +
-            `<div class="test">c</div>` +
-            `<div class="test v-enter v-enter-active">d</div>` +
+  it('use with "is" attribute', (done) => {
+    const vm = createBasicVM(true)
+    vm.items = ['b', 'c', 'd']
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML).toBe(
+        `<span>` +
+          `<div class="test v-leave v-leave-active">a</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test">c</div>` +
+          `<div class="test v-enter v-enter-active">d</div>` +
           `</span>`
-        )
-      }).thenWaitFor(nextFrame).then(() => {
+      )
+    })
+      .thenWaitFor(nextFrame)
+      .then(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
             `<div class="test v-leave-active v-leave-to">a</div>` +
             `<div class="test">b</div>` +
             `<div class="test">c</div>` +
             `<div class="test v-enter-active v-enter-to">d</div>` +
-          `</span>`
+            `</span>`
         )
-      }).thenWaitFor(duration + buffer).then(() => {
+      })
+      .thenWaitFor(duration + buffer)
+      .then(() => {
         expect(vm.$el.innerHTML).toBe(
           `<span>` +
-            vm.items.map(i => `<div class="test">${i}</div>`).join('') +
-          `</span>`
+            vm.items.map((i) => `<div class="test">${i}</div>`).join('') +
+            `</span>`
         )
-      }).then(done)
-    })
+      })
+      .then(done)
+  })
 
-    it('appear', done => {
-      const vm = createBasicVM(false, true /* appear */)
-      waitForUpdate(() => {
-        expect(vm.$el.innerHTML).toBe(
-          `<span>` +
-            vm.items.map(i => `<div class="test v-enter v-enter-active">${i}</div>`).join('') +
+  it('appear', (done) => {
+    const vm = createBasicVM(false, true /* appear */)
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML).toBe(
+        `<span>` +
+          vm.items
+            .map((i) => `<div class="test v-enter v-enter-active">${i}</div>`)
+            .join('') +
           `</span>`
-        )
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.innerHTML).toBe(
-          `<span>` +
-            vm.items.map(i => `<div class="test v-enter-active v-enter-to">${i}</div>`).join('') +
-          `</span>`
-        )
-      }).thenWaitFor(duration + buffer).then(() => {
-        expect(vm.$el.innerHTML).toBe(
-          `<span>` +
-            vm.items.map(i => `<div class="test">${i}</div>`).join('') +
-          `</span>`
-        )
-      }).then(done)
+      )
     })
+      .thenWaitFor(nextFrame)
+      .then(() => {
+        expect(vm.$el.innerHTML).toBe(
+          `<span>` +
+            vm.items
+              .map(
+                (i) => `<div class="test v-enter-active v-enter-to">${i}</div>`
+              )
+              .join('') +
+            `</span>`
+        )
+      })
+      .thenWaitFor(duration + buffer)
+      .then(() => {
+        expect(vm.$el.innerHTML).toBe(
+          `<span>` +
+            vm.items.map((i) => `<div class="test">${i}</div>`).join('') +
+            `</span>`
+        )
+      })
+      .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: `
           <div>
             <transition-group @before-enter="beforeEnter" @after-enter="afterEnter" @after-leave="afterLeave">
               <div v-for="item in items" :key="item" class="test">{{ item }}</div>
             </transition-group>
           </div>
         `,
-        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(
-          `<span>` +
-            `<div class="test">a</div>` +
-            `<div class="test">b</div>` +
-            `<div class="test">c</div>` +
-            `<div class="test v-enter v-enter-active">d</div>` +
+    vm.items.push('d')
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML).toBe(
+        `<span>` +
+          `<div class="test">a</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test">c</div>` +
+          `<div class="test v-enter v-enter-active">d</div>` +
           `</span>`
-        )
-        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(
           `<span>` +
             `<div class="test">a</div>` +
             `<div class="test">b</div>` +
             `<div class="test">c</div>` +
             `<div class="test">d</div>` +
-          `</span>`
+            `</span>`
         )
         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(
           `<span>` +
             `<div class="test">b</div>` +
             `<div class="test">c</div>` +
             `<div class="test">d</div>` +
-          `</span>`
+            `</span>`
         )
         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: `
           <div>
             <transition-group name="group">
               <div v-for="item in items" :key="item" class="test">{{ item }}</div>
             </transition-group>
           </div>
         `,
-        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(
-          `<span>` +
-            `<div class="test group-enter group-enter-active">d</div>` +
-            `<div class="test">b</div>` +
-            `<div class="test group-move">a</div>` +
-            `<div class="test group-leave group-leave-active group-move">c</div>` +
+    vm.items = ['d', 'b', 'a']
+    waitForUpdate(() => {
+      expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
+        `<span>` +
+          `<div class="test group-enter group-enter-active">d</div>` +
+          `<div class="test">b</div>` +
+          `<div class="test group-move">a</div>` +
+          `<div class="test group-leave group-leave-active group-move">c</div>` +
           `</span>`
-        )
-      }).thenWaitFor(nextFrame).then(() => {
+      )
+    })
+      .thenWaitFor(nextFrame)
+      .then(() => {
         expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
           `<span>` +
             `<div class="test group-enter-active group-enter-to">d</div>` +
             `<div class="test">b</div>` +
             `<div class="test group-move">a</div>` +
             `<div class="test group-leave-active group-move group-leave-to">c</div>` +
-          `</span>`
+            `</span>`
         )
-      }).thenWaitFor(duration * 2).then(() => {
+      })
+      .thenWaitFor(duration * 2)
+      .then(() => {
         expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
           `<span>` +
             `<div class="test">d</div>` +
             `<div class="test">b</div>` +
             `<div class="test">a</div>` +
-          `</span>`
+            `</span>`
         )
-      }).then(done)
-    })
+      })
+      .then(done)
+  })
 
-    it('warn unkeyed children', () => {
-      new Vue({
-        template: `<div><transition-group><div v-for="i in 3"></div></transition-group></div>`
-      }).$mount()
-      expect('<transition-group> children must be keyed: <div>').toHaveBeenWarned()
-    })
+  it('warn unkeyed children', () => {
+    new Vue({
+      template: `<div><transition-group><div v-for="i in 3"></div></transition-group></div>`
+    }).$mount()
+    expect(
+      '<transition-group> children must be keyed: <div>'
+    ).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: `
           <div>
             <transition-group :name="name">
               <div v-for="item in items" :key="item">{{ item }}</div>
             </transition-group>
           </div>
         `,
-        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(
-          `<span>` +
-            `<div>b</div>` +
-            `<div>c</div>` +
-            `<div>a</div>` +
-          `</span>`
-        )
-        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(
+        `<span>` + `<div>b</div>` + `<div>c</div>` + `<div>a</div>` + `</span>`
+      )
+      vm.name = 'group'
+      vm.items = ['a', 'b', 'c']
+    })
+      .thenWaitFor(nextFrame)
+      .then(() => {
         expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
           `<span>` +
             `<div class="group-move">a</div>` +
             `<div class="group-move">b</div>` +
             `<div class="group-move">c</div>` +
-          `</span>`
+            `</span>`
         )
-      }).thenWaitFor(duration * 2 + buffer).then(() => {
+      })
+      .thenWaitFor(duration * 2 + buffer)
+      .then(() => {
         expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
           `<span>` +
             `<div>a</div>` +
             `<div>b</div>` +
             `<div>c</div>` +
-          `</span>`
+            `</span>`
         )
-      }).then(done)
-    })
+      })
+      .then(done)
   })
-}
+})