test(vapor): apiSetupContext

This commit is contained in:
Evan You 2024-12-10 15:50:57 +08:00
parent 217e1e6f86
commit baf68a0fe4
No known key found for this signature in database
GPG Key ID: 00E9AB7A6704CE0A
2 changed files with 28 additions and 32 deletions

View File

@ -2,24 +2,20 @@ import {
createComponent, createComponent,
createSlot, createSlot,
createTextNode, createTextNode,
defineComponent, defineVaporComponent,
delegate, delegate,
delegateEvents, delegateEvents,
insert, insert,
nextTick,
reactive,
ref,
renderEffect, renderEffect,
setDynamicProps, setDynamicProps,
setInheritAttrs,
template, template,
watchEffect,
} from '../src' } from '../src'
import { nextTick, reactive, ref, watchEffect } from '@vue/runtime-dom'
import { makeRender } from './_utils' import { makeRender } from './_utils'
const define = makeRender() const define = makeRender()
describe.todo('api: setup context', () => { describe('api: setup context', () => {
it('should expose return values to template render context', () => { it('should expose return values to template render context', () => {
const { html } = define({ const { html } = define({
setup() { setup() {
@ -49,7 +45,7 @@ describe.todo('api: setup context', () => {
const count = ref(0) const count = ref(0)
let dummy let dummy
const Child = defineComponent({ const Child = defineVaporComponent({
props: { count: Number }, props: { count: Number },
setup(props) { setup(props) {
watchEffect(() => { watchEffect(() => {
@ -74,7 +70,7 @@ describe.todo('api: setup context', () => {
it('context.attrs', async () => { it('context.attrs', async () => {
const toggle = ref(true) const toggle = ref(true)
const Child = defineComponent({ const Child = defineVaporComponent({
inheritAttrs: false, inheritAttrs: false,
setup(props, { attrs }) { setup(props, { attrs }) {
const el = document.createElement('div') const el = document.createElement('div')
@ -85,9 +81,9 @@ describe.todo('api: setup context', () => {
const { html } = define({ const { html } = define({
render: () => render: () =>
createComponent(Child, () => createComponent(Child, {
toggle.value ? { id: 'foo' } : { class: 'baz' }, $: [() => (toggle.value ? { id: 'foo' } : { class: 'baz' })],
), }),
}).render() }).render()
expect(html()).toMatch(`<div id="foo"></div>`) expect(html()).toMatch(`<div id="foo"></div>`)
@ -101,15 +97,14 @@ describe.todo('api: setup context', () => {
it('context.attrs in child component slots', async () => { it('context.attrs in child component slots', async () => {
const toggle = ref(true) const toggle = ref(true)
const Wrapper = defineComponent({ const Wrapper = defineVaporComponent({
setup(_) { setup(_) {
const n0 = createSlot('default') const n0 = createSlot('default')
setInheritAttrs(true)
return n0 return n0
}, },
}) })
const Child = defineComponent({ const Child = defineVaporComponent({
inheritAttrs: false, inheritAttrs: false,
setup(_: any, { attrs }: any) { setup(_: any, { attrs }: any) {
const n0 = createComponent(Wrapper, null, { const n0 = createComponent(Wrapper, null, {
@ -125,9 +120,9 @@ describe.todo('api: setup context', () => {
const { html } = define({ const { html } = define({
render: () => render: () =>
createComponent(Child, () => createComponent(Child, {
toggle.value ? { id: 'foo' } : { class: 'baz' }, $: [() => (toggle.value ? { id: 'foo' } : { class: 'baz' })],
), }),
}).render() }).render()
expect(html()).toMatch(`<div id="foo"></div>`) expect(html()).toMatch(`<div id="foo"></div>`)
@ -141,7 +136,7 @@ describe.todo('api: setup context', () => {
it('context.slots', async () => { it('context.slots', async () => {
const id = ref('foo') const id = ref('foo')
const Child = defineComponent({ const Child = defineVaporComponent({
render() { render() {
return [createSlot('foo'), createSlot('bar')] return [createSlot('foo'), createSlot('bar')]
}, },
@ -149,16 +144,18 @@ describe.todo('api: setup context', () => {
const { html } = define({ const { html } = define({
render() { render() {
return createComponent(Child, null, [ return createComponent(Child, null, {
() => ({ $: [
name: 'foo', () => ({
fn: () => createTextNode(() => [id.value]), name: 'foo',
}), fn: () => createTextNode(() => [id.value]),
() => ({ }),
name: 'bar', () => ({
fn: () => createTextNode(['bar']), name: 'bar',
}), fn: () => createTextNode(['bar']),
]) }),
],
})
}, },
}).render() }).render()
@ -175,7 +172,7 @@ describe.todo('api: setup context', () => {
delegateEvents('click') delegateEvents('click')
const Child = defineComponent({ const Child = defineVaporComponent({
props: { props: {
count: { type: Number, default: 1 }, count: { type: Number, default: 1 },
}, },

View File

@ -17,7 +17,6 @@ import {
template, template,
} from '../src' } from '../src'
import { makeRender } from './_utils' import { makeRender } from './_utils'
import type { RawProps } from '../src/componentProps'
const define = makeRender<any>() const define = makeRender<any>()
@ -468,7 +467,7 @@ describe('component: props', () => {
define(() => define(() =>
createComponent(Comp, { createComponent(Comp, {
$: [() => (passFoo.value ? { foo: 'ok' } : {})], $: [() => (passFoo.value ? { foo: 'ok' } : {})],
} as RawProps), }),
).render() ).render()
expect(initialKeys).toMatchObject(['foo']) expect(initialKeys).toMatchObject(['foo'])