core/test-dts/h.test-d.ts

import { describe } from './util'
import { expectError } from 'tsd'
import { h, createComponent, ref, Fragment, Portal, Suspense } from './index'

describe('h inference w/ element', () => {
  // key
  h('div', { key: 1 })
  h('div', { key: 'foo' })
  expectError(h('div', { key: [] }))
  expectError(h('div', { key: {} }))
  // ref
  h('div', { ref: 'foo' })
  h('div', { ref: ref(null) })
  h('div', { ref: el => {} })
  expectError(h('div', { ref: [] }))
  expectError(h('div', { ref: {} }))
  expectError(h('div', { ref: 123 }))
})

describe('h inference w/ Fragment', () => {
  // only accepts array children
  h(Fragment, ['hello'])
  h(Fragment, { key: 123 }, ['hello'])
  expectError(h(Fragment, 'foo'))
  expectError(h(Fragment, { key: 123 }, 'bar'))
})

describe('h inference w/ Portal', () => {
  h(Portal, { target: '#foo' }, 'hello')
  expectError(h(Portal))
  expectError(h(Portal, {}))
  expectError(h(Portal, { target: '#foo' }))
})

describe('h inference w/ Suspense', () => {
  h(Suspense, { onRecede: () => {}, onResolve: () => {} }, 'hello')
  h(Suspense, 'foo')
  h(Suspense, () => 'foo')
  h(Suspense, null, {
    default: () => 'foo'
  })
  expectError(h(Suspense, { onResolve: 1 }))
})

describe('h inference w/ functional component', () => {
  const Func = (_props: { foo: string; bar?: number }) => ''
  h(Func, { foo: 'hello' })
  h(Func, { foo: 'hello', bar: 123 })
  expectError(h(Func, { foo: 123 }))
  expectError(h(Func, {}))
  expectError(h(Func, { bar: 123 }))
})

describe('h inference w/ plain object component', () => {
  const Foo = {
    props: {
      foo: String
    }
  }

  h(Foo, { foo: 'ok' })
  h(Foo, { foo: 'ok', class: 'extra' })
  // should fail on wrong type
  expectError(h(Foo, { foo: 1 }))
})

describe('h inference w/ createComponent', () => {
  const Foo = createComponent({
    props: {
      foo: String,
      bar: {
        type: Number,
        required: true
      }
    }
  })

  h(Foo, { bar: 1 })
  h(Foo, { bar: 1, foo: 'ok' })
  // should allow extraneous props (attrs fallthrough)
  h(Foo, { bar: 1, foo: 'ok', class: 'extra' })
  // should fail on missing required prop
  expectError(h(Foo, {}))
  expectError(h(Foo, { foo: 'ok' }))
  // should fail on wrong type
  expectError(h(Foo, { bar: 1, foo: 1 }))
})

describe('h inference w/ createComponent + optional props', () => {
  const Foo = createComponent({
    setup(_props: { foo?: string; bar: number }) {}
  })

  h(Foo, { bar: 1 })
  h(Foo, { bar: 1, foo: 'ok' })
  // should allow extraneous props (attrs fallthrough)
  h(Foo, { bar: 1, foo: 'ok', class: 'extra' })
  // should fail on missing required prop
  expectError(h(Foo, {}))
  expectError(h(Foo, { foo: 'ok' }))
  // should fail on wrong type
  expectError(h(Foo, { bar: 1, foo: 1 }))
})

describe('h inference w/ createComponent + direct function', () => {
  const Foo = createComponent((_props: { foo?: string; bar: number }) => {})

  h(Foo, { bar: 1 })
  h(Foo, { bar: 1, foo: 'ok' })
  // should allow extraneous props (attrs fallthrough)
  h(Foo, { bar: 1, foo: 'ok', class: 'extra' })
  // should fail on missing required prop
  expectError(h(Foo, {}))
  expectError(h(Foo, { foo: 'ok' }))
  // should fail on wrong type
  expectError(h(Foo, { bar: 1, foo: 1 }))
})