core/packages/runtime-core/__tests__/apiApp.spec.ts

import {
  createApp,
  h,
  nodeOps,
  serializeInner,
  mockWarn,
  provide,
  inject,
  resolveComponent,
  resolveDirective,
  applyDirectives,
  Plugin,
  ref
} from '@vue/runtime-test'

describe('api: createApp', () => {
  mockWarn()

  test('mount', () => {
    const Comp = {
      props: {
        count: {
          default: 0
        }
      },
      render() {
        return this.count
      }
    }

    const root1 = nodeOps.createElement('div')
    createApp().mount(Comp, root1)
    expect(serializeInner(root1)).toBe(`0`)

    // mount with props
    const root2 = nodeOps.createElement('div')
    const app2 = createApp()
    app2.mount(Comp, root2, { count: 1 })
    expect(serializeInner(root2)).toBe(`1`)

    // remount warning
    const root3 = nodeOps.createElement('div')
    app2.mount(Comp, root3)
    expect(serializeInner(root3)).toBe(``)
    expect(`already been mounted`).toHaveBeenWarned()
  })

  test('provide', () => {
    const app = createApp()
    app.provide('foo', 1)
    app.provide('bar', 2)

    const Root = {
      setup() {
        // test override
        provide('foo', 3)
        return () => h(Child)
      }
    }

    const Child = {
      setup() {
        const foo = inject('foo')
        const bar = inject('bar')
        return () => `${foo},${bar}`
      }
    }

    const root = nodeOps.createElement('div')
    app.mount(Root, root)
    expect(serializeInner(root)).toBe(`3,2`)
  })

  test('component', () => {
    const app = createApp()

    const FooBar = () => 'foobar!'
    app.component('FooBar', FooBar)
    expect(app.component('FooBar')).toBe(FooBar)

    app.component('BarBaz', () => 'barbaz!')

    const Root = {
      // local override
      components: {
        BarBaz: () => 'barbaz-local!'
      },
      setup() {
        // resolve in setup
        const FooBar = resolveComponent('foo-bar') as any
        return () => {
          // resolve in render
          const BarBaz = resolveComponent('bar-baz') as any
          return h('div', [h(FooBar), h(BarBaz)])
        }
      }
    }

    const root = nodeOps.createElement('div')
    app.mount(Root, root)
    expect(serializeInner(root)).toBe(`<div>foobar!barbaz-local!</div>`)
  })

  test('directive', () => {
    const app = createApp()

    const spy1 = jest.fn()
    const spy2 = jest.fn()
    const spy3 = jest.fn()

    const FooBar = { mounted: spy1 }
    app.directive('FooBar', FooBar)
    expect(app.directive('FooBar')).toBe(FooBar)

    app.directive('BarBaz', {
      mounted: spy2
    })

    const Root = {
      // local override
      directives: {
        BarBaz: { mounted: spy3 }
      },
      setup() {
        // resolve in setup
        const FooBar = resolveDirective('foo-bar') as any
        return () => {
          // resolve in render
          const BarBaz = resolveDirective('bar-baz') as any
          return applyDirectives(h('div'), [[FooBar], [BarBaz]])
        }
      }
    }

    const root = nodeOps.createElement('div')
    app.mount(Root, root)
    expect(spy1).toHaveBeenCalled()
    expect(spy2).not.toHaveBeenCalled()
    expect(spy3).toHaveBeenCalled()
  })

  test('use', () => {
    const PluginA: Plugin = app => app.provide('foo', 1)
    const PluginB: Plugin = {
      install: app => app.provide('bar', 2)
    }

    const app = createApp()
    app.use(PluginA)
    app.use(PluginB)

    const Root = {
      setup() {
        const foo = inject('foo')
        const bar = inject('bar')
        return () => `${foo},${bar}`
      }
    }
    const root = nodeOps.createElement('div')
    app.mount(Root, root)
    expect(serializeInner(root)).toBe(`1,2`)
  })

  test('config.errorHandler', () => {
    const app = createApp()

    const error = new Error()
    const count = ref(0)

    const handler = (app.config.errorHandler = jest.fn(
      (err, instance, info) => {
        expect(err).toBe(error)
        expect((instance as any).count).toBe(count.value)
        expect(info).toBe(`render function`)
      }
    ))

    const Root = {
      setup() {
        const count = ref(0)
        return {
          count
        }
      },
      render() {
        throw error
      }
    }

    app.mount(Root, nodeOps.createElement('div'))
    expect(handler).toHaveBeenCalled()
  })

  test('config.warnHandler', () => {
    const app = createApp()

    const handler = (app.config.warnHandler = jest.fn(
      (msg, instance, trace) => {}
    ))

    const Root = {
      setup() {}
    }

    app.mount(Root, nodeOps.createElement('div'))
    expect(handler).toHaveBeenCalled()
  })

  test.todo('mixin')
})