transition-group.spec.js

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()

    let el
    beforeEach(() => {
      el = document.createElement('div')
      document.body.appendChild(el)
    })

    function createBasicVM (useIs, appear) {
      const vm = new Vue({
        template: `
          <div>
            ${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>`
        )
      }
      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('') +
            `<div class="test v-enter-active v-enter-to">d</div>` +
            `<div class="test v-enter-active v-enter-to">e</div>` +
          `</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('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(() => {
        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>`
        )
      }).thenWaitFor(duration + buffer).then(() => {
        expect(vm.$el.innerHTML).toBe(
          `<span>` +
            vm.items.map(i => `<div class="test">${i}</div>`).join('') +
          `</span>`
        )
      }).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>` +
          `</span>`
        )
      }).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>`
        )
      }).thenWaitFor(duration + buffer).then(() => {
        expect(vm.$el.innerHTML).toBe(
          `<span>` +
            vm.items.map(i => `<div class="test">${i}</div>`).join('') +
          `</span>`
        )
      }).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>` +
          `</span>`
        )
      }).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>`
        )
      }).thenWaitFor(duration + buffer).then(() => {
        expect(vm.$el.innerHTML).toBe(
          `<span>` +
            vm.items.map(i => `<div class="test">${i}</div>`).join('') +
          `</span>`
        )
      }).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('') +
          `</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)
    })

    it('events', done => {
      let next
      const beforeEnterSpy = jasmine.createSpy()
      const afterEnterSpy = jasmine.createSpy()
      const afterLeaveSpy = jasmine.createSpy()
      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']
        },
        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()
          }
        }
      }).$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>` +
          `</span>`
        )
        expect(beforeEnterSpy.calls.count()).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>`
        )
        expect(afterEnterSpy.calls.count()).toBe(1)
        vm.items.shift()
      }).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>`
        )
        expect(afterLeaveSpy.calls.count()).toBe(1)
      }).then(done)
    })

    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)

      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(() => {
        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>`
        )
      }).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>`
        )
      }).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()
    })

    // 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)

      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>`
        )
      }).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>`
        )
      }).then(done)
    })

    // GitHub issue #7879
    it('should work with v-show like v-if', done => {
      const vm = new Vue({
        template: `
          <div>
            <transition-group name="group">
              <div v-show="ok" key="foo" class="test">foo</div>
            </transition-group>
          </div>
        `,
        data: { ok: false }
      }).$mount(el)

      vm.ok = true
      waitForUpdate(() => {
        expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
          `<span>` +
            `<div class="test group-enter group-enter-active">foo</div>` +
          `</span>`
        )
      }).thenWaitFor(nextFrame).then(() => {
        expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
          `<span>` +
            `<div class="test group-enter-active group-enter-to">foo</div>` +
          `</span>`
        )
      }).thenWaitFor(duration + buffer).then(() => {
        expect(vm.$el.innerHTML.replace(/\s?style=""(\s?)/g, '$1')).toBe(
          `<span>` +
            `<div class="test">foo</div>` +
          `</span>`
        )
      }).then(done)
    })
  })
}