vue Architecture Docs
Home / File/ transition.spec.ts — vue Source File

transition.spec.ts — vue Source File

Architecture documentation for transition.spec.ts, a typescript file in the vue codebase. 3 imports, 0 dependents.

File typescript CompilerSFC 3 imports

Entity Profile

Dependency Diagram

graph LR
  46da134a_3029_8b1c_441a_52bd19190e3f["transition.spec.ts"]
  e36f34fa_ce0b_6e35_f3e0_e2cebbd0d05e["helpers.ts"]
  46da134a_3029_8b1c_441a_52bd19190e3f --> e36f34fa_ce0b_6e35_f3e0_e2cebbd0d05e
  84b5200e_9572_395c_49ed_98c6dc7ba9f2["injectStyles"]
  46da134a_3029_8b1c_441a_52bd19190e3f --> 84b5200e_9572_395c_49ed_98c6dc7ba9f2
  c5601857_7faf_30c6_efca_20de90db006c["vue"]
  46da134a_3029_8b1c_441a_52bd19190e3f --> c5601857_7faf_30c6_efca_20de90db006c
  style 46da134a_3029_8b1c_441a_52bd19190e3f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

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)

Domain

Dependencies

Source

Frequently Asked Questions

What does transition.spec.ts do?
transition.spec.ts is a source file in the vue codebase, written in typescript. It belongs to the CompilerSFC domain.
What does transition.spec.ts depend on?
transition.spec.ts imports 3 module(s): helpers.ts, injectStyles, vue.
Where is transition.spec.ts in the architecture?
transition.spec.ts is located at test/transition/transition.spec.ts (domain: CompilerSFC, directory: test/transition).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free