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

transition-mode.spec.ts — vue Source File

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

File typescript CompilerSFC 3 imports

Entity Profile

Dependency Diagram

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

Relationship Graph

Source Code

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

describe('Transition mode', () => {
  const { duration, buffer } = injectStyles()
  const components = {
    one: { template: '<div>one</div>' },
    two: { template: '<div>two</div>' }
  }

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

  it('dynamic components, simultaneous', done => {
    const vm = new Vue({
      template: `<div>
          <transition>
            <component :is="view" class="test">
            </component>
          </transition>
        </div>`,
      data: { view: 'one' },
      components
    }).$mount(el)
    expect(vm.$el.textContent).toBe('one')
    vm.view = 'two'
    waitForUpdate(() => {
      expect(vm.$el.innerHTML).toBe(
        '<div class="test v-leave v-leave-active">one</div>' +
          '<div class="test v-enter v-enter-active">two</div>'
      )
    })
      .thenWaitFor(nextFrame)
      .then(() => {
        expect(vm.$el.innerHTML).toBe(
          '<div class="test v-leave-active v-leave-to">one</div>' +
            '<div class="test v-enter-active v-enter-to">two</div>'
        )
      })
      .thenWaitFor(duration + buffer)
      .then(() => {
        expect(vm.$el.innerHTML).toBe('<div class="test">two</div>')
      })
      .then(done)
  })

  it('dynamic components, out-in', done => {
    let next
    const vm = new Vue({
      template: `<div>
          <transition name="test" mode="out-in" @after-leave="afterLeave">
            <component :is="view" class="test">
            </component>
          </transition>
        </div>`,
      data: { view: 'one' },
      components,
// ... (626 more lines)

Domain

Dependencies

Source

Frequently Asked Questions

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