transition.spec.ts — vue Source File

Source Code

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

describe('Transition basic', () => {
  const { duration, buffer } = injectStyles() as {
    duration: number
    buffer: number
  }
  const explicitDuration = duration * 2

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

  it('basic transition', done => {
    const vm = new Vue({
      template:
        '<div><transition><div v-if="ok" class="test">foo</div></transition></div>',
      data: { ok: true }
    }).$mount(el)

    // should not apply transition on initial render by default
    expect(vm.$el.innerHTML).toBe('<div class="test">foo</div>')
    vm.ok = false
    waitForUpdate(() => {
      expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
    })
      .thenWaitFor(nextFrame)
      .then(() => {
        expect(vm.$el.children[0].className).toBe(
          'test v-leave-active v-leave-to'
        )
      })
      .thenWaitFor(duration + buffer)
      .then(() => {
        expect(vm.$el.children.length).toBe(0)
        vm.ok = true
      })
      .then(() => {
        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
      })
      .thenWaitFor(nextFrame)
      .then(() => {
        expect(vm.$el.children[0].className).toBe(
          'test v-enter-active v-enter-to'
        )
      })
      .thenWaitFor(duration + buffer)
      .then(() => {
        expect(vm.$el.children[0].className).toBe('test')
      })
      .then(done)
  })

  it('named transition', done => {
    const vm = new Vue({
      template:
        '<div><transition name="test"><div v-if="ok" class="test">foo</div></transition></div>',
// ... (1783 more lines)