apiAsyncComponent.spec.ts — vue Source File

Source Code

import Vue from 'vue'
import { defineAsyncComponent, h, ref, nextTick, defineComponent } from 'v3'
import { Component } from 'types/component'

const timeout = (n: number = 0) => new Promise(r => setTimeout(r, n))

const loadingComponent = defineComponent({
  template: `<div>loading</div>`
})

const resolvedComponent = defineComponent({
  template: `<div>resolved</div>`
})

describe('api: defineAsyncComponent', () => {
  afterEach(() => {
    Vue.config.errorHandler = undefined
  })

  test('simple usage', async () => {
    let resolve: (comp: Component) => void
    const Foo = defineAsyncComponent(
      () =>
        new Promise(r => {
          resolve = r as any
        })
    )

    const toggle = ref(true)

    const vm = new Vue({
      render: () => (toggle.value ? h(Foo) : null)
    }).$mount()

    expect(vm.$el.nodeType).toBe(8)

    resolve!(resolvedComponent)
    // first time resolve, wait for macro task since there are multiple
    // microtasks / .then() calls
    await timeout()
    expect(vm.$el.innerHTML).toBe('resolved')

    toggle.value = false
    await nextTick()
    expect(vm.$el.nodeType).toBe(8)

    // already resolved component should update on nextTick
    toggle.value = true
    await nextTick()
    expect(vm.$el.innerHTML).toBe('resolved')
  })

  test('with loading component', async () => {
    let resolve: (comp: Component) => void
    const Foo = defineAsyncComponent({
      loader: () =>
        new Promise(r => {
          resolve = r as any
        }),
      loadingComponent,
// ... (182 more lines)