vue3-yuanma/packages/server-renderer/__tests__/renderToString.spec.ts

272 lines
6.7 KiB
TypeScript
Raw Normal View History

import { createApp, h } from 'vue'
import { renderToString, renderComponent, renderSlot } from '../src'
2020-01-28 06:23:42 +08:00
describe('ssr: renderToString', () => {
describe('components', () => {
test('vnode components', async () => {
expect(
await renderToString(
createApp({
data() {
return { msg: 'hello' }
},
render(this: any) {
return h('div', this.msg)
}
})
)
).toBe(`<div>hello</div>`)
})
2020-01-28 06:23:42 +08:00
test('optimized components', async () => {
expect(
await renderToString(
createApp({
data() {
return { msg: 'hello' }
},
ssrRender(ctx, push) {
push(`<div>${ctx.msg}</div>`)
}
})
)
).toBe(`<div>hello</div>`)
})
2020-01-28 06:23:42 +08:00
test('nested vnode components', async () => {
const Child = {
props: ['msg'],
render(this: any) {
return h('div', this.msg)
}
}
2020-01-28 06:23:42 +08:00
expect(
await renderToString(
createApp({
render() {
return h('div', ['parent', h(Child, { msg: 'hello' })])
}
})
)
).toBe(`<div>parent<div>hello</div></div>`)
})
2020-01-28 06:23:42 +08:00
test('nested optimized components', async () => {
const Child = {
props: ['msg'],
ssrRender(ctx: any, push: any) {
push(`<div>${ctx.msg}</div>`)
}
}
2020-01-28 06:23:42 +08:00
expect(
await renderToString(
createApp({
ssrRender(_ctx, push, parent) {
push(`<div>parent`)
push(renderComponent(Child, { msg: 'hello' }, null, parent))
push(`</div>`)
}
})
)
).toBe(`<div>parent<div>hello</div></div>`)
})
test('mixing optimized / vnode components', async () => {
const OptimizedChild = {
props: ['msg'],
ssrRender(ctx: any, push: any) {
push(`<div>${ctx.msg}</div>`)
}
}
const VNodeChild = {
props: ['msg'],
render(this: any) {
return h('div', this.msg)
}
}
expect(
await renderToString(
createApp({
ssrRender(_ctx, push, parent) {
push(`<div>parent`)
push(
renderComponent(OptimizedChild, { msg: 'opt' }, null, parent)
)
push(renderComponent(VNodeChild, { msg: 'vnode' }, null, parent))
push(`</div>`)
}
})
)
).toBe(`<div>parent<div>opt</div><div>vnode</div></div>`)
})
test('nested components with optimized slots', async () => {
const Child = {
props: ['msg'],
ssrRender(ctx: any, push: any, parent: any) {
push(`<div class="child">`)
renderSlot(ctx.$slots.default, { msg: 'from slot' }, push, parent)
push(`</div>`)
}
}
expect(
await renderToString(
createApp({
ssrRender(_ctx, push, parent) {
push(`<div>parent`)
push(
renderComponent(
Child,
{ msg: 'hello' },
{
// optimized slot using string push
default: ({ msg }: any, push: any) => {
push(`<span>${msg}</span>`)
},
_compiled: true // important to avoid slots being normalized
},
parent
)
)
push(`</div>`)
}
})
)
).toBe(
`<div>parent<div class="child">` +
`<!----><span>from slot</span><!---->` +
`</div></div>`
)
})
test('nested components with vnode slots', async () => {
const Child = {
props: ['msg'],
ssrRender(ctx: any, push: any, parent: any) {
push(`<div class="child">`)
renderSlot(ctx.$slots.default, { msg: 'from slot' }, push, parent)
push(`</div>`)
}
}
expect(
await renderToString(
createApp({
ssrRender(_ctx, push, parent) {
push(`<div>parent`)
push(
renderComponent(
Child,
{ msg: 'hello' },
{
// bailed slots returning raw vnodes
default: ({ msg }: any) => {
return h('span', msg)
}
},
parent
)
)
push(`</div>`)
}
})
)
).toBe(
`<div>parent<div class="child">` +
`<!----><span>from slot</span><!---->` +
`</div></div>`
)
})
test('async components', async () => {
const Child = {
// should wait for resovled render context from setup()
async setup() {
return {
msg: 'hello'
}
},
ssrRender(ctx: any, push: any) {
push(`<div>${ctx.msg}</div>`)
}
}
expect(
await renderToString(
createApp({
ssrRender(_ctx, push, parent) {
push(`<div>parent`)
push(renderComponent(Child, null, null, parent))
push(`</div>`)
}
})
)
).toBe(`<div>parent<div>hello</div></div>`)
})
test('parallel async components', async () => {
const OptimizedChild = {
props: ['msg'],
async setup(props: any) {
return {
localMsg: props.msg + '!'
}
},
ssrRender(ctx: any, push: any) {
push(`<div>${ctx.localMsg}</div>`)
}
}
const VNodeChild = {
props: ['msg'],
async setup(props: any) {
return {
localMsg: props.msg + '!'
}
},
render(this: any) {
return h('div', this.localMsg)
}
}
expect(
await renderToString(
createApp({
ssrRender(_ctx, push, parent) {
push(`<div>parent`)
push(
renderComponent(OptimizedChild, { msg: 'opt' }, null, parent)
)
push(renderComponent(VNodeChild, { msg: 'vnode' }, null, parent))
push(`</div>`)
}
})
)
).toBe(`<div>parent<div>opt!</div><div>vnode!</div></div>`)
})
2020-01-29 07:48:27 +08:00
})
2020-01-28 06:23:42 +08:00
describe('scopeId', () => {
// TODO
})
2020-01-29 07:48:27 +08:00
describe('vnode', () => {
test('text children', () => {})
2020-01-29 07:48:27 +08:00
test('array children', () => {})
2020-01-29 07:48:27 +08:00
test('void elements', () => {})
2020-01-29 07:48:27 +08:00
test('innerHTML', () => {})
2020-01-29 07:48:27 +08:00
test('textContent', () => {})
test('textarea value', () => {})
2020-01-29 07:48:27 +08:00
})
2020-01-28 06:23:42 +08:00
})