apiExpose.spec.ts 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. import { ref, shallowRef } from '@vue/reactivity'
  2. import { type VaporComponentInstance, createComponent } from '../src/component'
  3. import { setRef } from '../src/apiTemplateRef'
  4. import { makeRender } from './_utils'
  5. import { currentInstance } from '@vue/runtime-dom'
  6. import { defineVaporComponent } from '../src/apiDefineComponent'
  7. const define = makeRender()
  8. describe('api: expose', () => {
  9. test('via setup context + template ref', () => {
  10. let i: any
  11. const Child = defineVaporComponent({
  12. setup(_, { expose }) {
  13. expose({
  14. foo: 1,
  15. bar: ref(2),
  16. })
  17. return []
  18. },
  19. })
  20. const childRef = ref()
  21. define({
  22. setup: () => {
  23. const n0 = (i = createComponent(Child))
  24. setRef(currentInstance as VaporComponentInstance, n0, childRef)
  25. return n0
  26. },
  27. }).render()
  28. expect(childRef.value).toBe(i.exposeProxy)
  29. expect(childRef.value.foo).toBe(1)
  30. expect(childRef.value.bar).toBe(2)
  31. expect(childRef.value.baz).toBeUndefined()
  32. })
  33. test('via setup context + template ref (expose empty)', () => {
  34. let childInstance: VaporComponentInstance | null = null
  35. const Child = defineVaporComponent({
  36. setup(_) {
  37. childInstance = currentInstance as VaporComponentInstance
  38. return []
  39. },
  40. })
  41. const childRef = shallowRef()
  42. define({
  43. setup: () => {
  44. const n0 = createComponent(Child)
  45. setRef(currentInstance as VaporComponentInstance, n0, childRef)
  46. return n0
  47. },
  48. }).render()
  49. expect(childInstance!.exposed).toBeNull()
  50. expect(childRef.value).toBe(childInstance!)
  51. })
  52. test('with mount', () => {
  53. const { app, host } = define({
  54. setup(_, { expose }) {
  55. expose({
  56. foo: 1,
  57. })
  58. return []
  59. },
  60. }).create()
  61. const exposed = app.mount(host) as any
  62. expect(exposed.foo).toBe(1)
  63. expect(exposed.bar).toBe(undefined)
  64. })
  65. test('warning for ref', () => {
  66. define({
  67. setup(_, { expose }) {
  68. expose(ref(1))
  69. return []
  70. },
  71. }).render()
  72. expect(
  73. 'expose() should be passed a plain object, received ref',
  74. ).toHaveBeenWarned()
  75. })
  76. test('warning for array', () => {
  77. define({
  78. setup(_, { expose }) {
  79. expose(['focus'])
  80. return []
  81. },
  82. }).render()
  83. expect(
  84. 'expose() should be passed a plain object, received array',
  85. ).toHaveBeenWarned()
  86. })
  87. test('warning for function', () => {
  88. define({
  89. setup(_, { expose }) {
  90. expose(() => null)
  91. return []
  92. },
  93. }).render()
  94. expect(
  95. 'expose() should be passed a plain object, received function',
  96. ).toHaveBeenWarned()
  97. })
  98. })