transition-group.spec.ts — vue Source File

Source Code

import Vue from 'vue'
import { injectStyles, waitForUpdate, nextFrame } from './helpers'

describe('Transition group', () => {
  const { duration, buffer } = injectStyles()

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

  function createBasicVM(useIs?, appear = false) {
    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>`
        )
// ... (333 more lines)