From 8ad1aab068e85f9015071bd2ce9c51b905d4e9a9 Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 30 Dec 2020 15:40:55 -0500 Subject: [PATCH] test(ssr): refactor ssr render tests Merge renderToString and renderToStream to run the same tests --- .../server-renderer/__tests__/render.spec.ts | 719 ++++++++++++++++++ .../__tests__/renderToStream.spec.ts | 622 --------------- .../__tests__/renderToString.spec.ts | 621 --------------- 3 files changed, 719 insertions(+), 1243 deletions(-) create mode 100644 packages/server-renderer/__tests__/render.spec.ts delete mode 100644 packages/server-renderer/__tests__/renderToStream.spec.ts delete mode 100644 packages/server-renderer/__tests__/renderToString.spec.ts diff --git a/packages/server-renderer/__tests__/render.spec.ts b/packages/server-renderer/__tests__/render.spec.ts new file mode 100644 index 00000000..a02bf365 --- /dev/null +++ b/packages/server-renderer/__tests__/render.spec.ts @@ -0,0 +1,719 @@ +import { + createApp, + h, + createCommentVNode, + withScopeId, + resolveComponent, + ComponentOptions, + ref, + defineComponent, + createTextVNode, + createStaticVNode +} from 'vue' +import { escapeHtml } from '@vue/shared' +import { renderToString } from '../src/renderToString' +import { renderToStream as _renderToStream } from '../src/renderToStream' +import { ssrRenderSlot, SSRSlot } from '../src/helpers/ssrRenderSlot' +import { ssrRenderComponent } from '../src/helpers/ssrRenderComponent' +import { Readable } from 'stream' + +const promisifyStream = (stream: Readable) => { + return new Promise((resolve, reject) => { + let result = '' + stream.on('data', data => { + result += data + }) + stream.on('error', () => { + reject(result) + }) + stream.on('end', () => { + resolve(result) + }) + }) +} + +const renderToStream = (app: any, context?: any) => + promisifyStream(_renderToStream(app, context)) + +// we run the same tests twice, once for renderToString, once for renderToStream +testRender(`renderToString`, renderToString) +testRender(`renderToStream`, renderToStream) + +function testRender(type: string, render: typeof renderToString) { + describe(`ssr: ${type}`, () => { + test('should apply app context', async () => { + const app = createApp({ + render() { + const Foo = resolveComponent('foo') as ComponentOptions + return h(Foo) + } + }) + app.component('foo', { + render: () => h('div', 'foo') + }) + const html = await render(app) + expect(html).toBe(`
foo
`) + }) + + describe('components', () => { + test('vnode components', async () => { + expect( + await render( + createApp({ + data() { + return { msg: 'hello' } + }, + render(this: any) { + return h('div', this.msg) + } + }) + ) + ).toBe(`
hello
`) + }) + + test('option components returning render from setup', async () => { + expect( + await render( + createApp({ + setup() { + const msg = ref('hello') + return () => h('div', msg.value) + } + }) + ) + ).toBe(`
hello
`) + }) + + test('setup components returning render from setup', async () => { + expect( + await render( + createApp( + defineComponent(() => { + const msg = ref('hello') + return () => h('div', msg.value) + }) + ) + ) + ).toBe(`
hello
`) + }) + + test('optimized components', async () => { + expect( + await render( + createApp({ + data() { + return { msg: 'hello' } + }, + ssrRender(ctx, push) { + push(`
${ctx.msg}
`) + } + }) + ) + ).toBe(`
hello
`) + }) + + test('nested vnode components', async () => { + const Child = { + props: ['msg'], + render(this: any) { + return h('div', this.msg) + } + } + + expect( + await render( + createApp({ + render() { + return h('div', ['parent', h(Child, { msg: 'hello' })]) + } + }) + ) + ).toBe(`
parent
hello
`) + }) + + test('nested optimized components', async () => { + const Child = { + props: ['msg'], + ssrRender(ctx: any, push: any) { + push(`
${ctx.msg}
`) + } + } + + expect( + await render( + createApp({ + ssrRender(_ctx, push, parent) { + push(`
parent`) + push(ssrRenderComponent(Child, { msg: 'hello' }, null, parent)) + push(`
`) + } + }) + ) + ).toBe(`
parent
hello
`) + }) + + test('nested template components', async () => { + const Child = { + props: ['msg'], + template: `
{{ msg }}
` + } + const app = createApp({ + template: `
parent
` + }) + app.component('Child', Child) + + expect(await render(app)).toBe(`
parent
hello
`) + }) + + test('template components with dynamic class attribute after static', async () => { + const app = createApp({ + template: `
` + }) + expect(await render(app)).toBe( + `
` + ) + }) + + test('template components with dynamic class attribute before static', async () => { + const app = createApp({ + template: `
` + }) + expect(await render(app)).toBe( + `
` + ) + }) + + test('mixing optimized / vnode / template components', async () => { + const OptimizedChild = { + props: ['msg'], + ssrRender(ctx: any, push: any) { + push(`
${ctx.msg}
`) + } + } + + const VNodeChild = { + props: ['msg'], + render(this: any) { + return h('div', this.msg) + } + } + + const TemplateChild = { + props: ['msg'], + template: `
{{ msg }}
` + } + + expect( + await render( + createApp({ + ssrRender(_ctx, push, parent) { + push(`
parent`) + push( + ssrRenderComponent( + OptimizedChild, + { msg: 'opt' }, + null, + parent + ) + ) + push( + ssrRenderComponent(VNodeChild, { msg: 'vnode' }, null, parent) + ) + push( + ssrRenderComponent( + TemplateChild, + { msg: 'template' }, + null, + parent + ) + ) + push(`
`) + } + }) + ) + ).toBe( + `
parent
opt
vnode
template
` + ) + }) + + test('async components', async () => { + const Child = { + // should wait for resolved render context from setup() + async setup() { + return { + msg: 'hello' + } + }, + ssrRender(ctx: any, push: any) { + push(`
${ctx.msg}
`) + } + } + + expect( + await render( + createApp({ + ssrRender(_ctx, push, parent) { + push(`
parent`) + push(ssrRenderComponent(Child, null, null, parent)) + push(`
`) + } + }) + ) + ).toBe(`
parent
hello
`) + }) + + test('parallel async components', async () => { + const OptimizedChild = { + props: ['msg'], + async setup(props: any) { + return { + localMsg: props.msg + '!' + } + }, + ssrRender(ctx: any, push: any) { + push(`
${ctx.localMsg}
`) + } + } + + const VNodeChild = { + props: ['msg'], + async setup(props: any) { + return { + localMsg: props.msg + '!' + } + }, + render(this: any) { + return h('div', this.localMsg) + } + } + + expect( + await render( + createApp({ + ssrRender(_ctx, push, parent) { + push(`
parent`) + push( + ssrRenderComponent( + OptimizedChild, + { msg: 'opt' }, + null, + parent + ) + ) + push( + ssrRenderComponent(VNodeChild, { msg: 'vnode' }, null, parent) + ) + push(`
`) + } + }) + ) + ).toBe(`
parent
opt!
vnode!
`) + }) + }) + + describe('slots', () => { + test('nested components with optimized slots', async () => { + const Child = { + props: ['msg'], + ssrRender(ctx: any, push: any, parent: any) { + push(`
`) + ssrRenderSlot( + ctx.$slots, + 'default', + { msg: 'from slot' }, + () => { + push(`fallback`) + }, + push, + parent + ) + push(`
`) + } + } + + expect( + await render( + createApp({ + ssrRender(_ctx, push, parent) { + push(`
parent`) + push( + ssrRenderComponent( + Child, + { msg: 'hello' }, + { + // optimized slot using string push + default: (({ msg }, push, _p) => { + push(`${msg}`) + }) as SSRSlot, + // important to avoid slots being normalized + _: 1 as any + }, + parent + ) + ) + push(`
`) + } + }) + ) + ).toBe( + `
parent
` + + `from slot` + + `
` + ) + + // test fallback + expect( + await render( + createApp({ + ssrRender(_ctx, push, parent) { + push(`
parent`) + push(ssrRenderComponent(Child, { msg: 'hello' }, null, parent)) + push(`
`) + } + }) + ) + ).toBe( + `
parent
fallback
` + ) + }) + + test('nested components with vnode slots', async () => { + const Child = { + props: ['msg'], + ssrRender(ctx: any, push: any, parent: any) { + push(`
`) + ssrRenderSlot( + ctx.$slots, + 'default', + { msg: 'from slot' }, + null, + push, + parent + ) + push(`
`) + } + } + + expect( + await render( + createApp({ + ssrRender(_ctx, push, parent) { + push(`
parent`) + push( + ssrRenderComponent( + Child, + { msg: 'hello' }, + { + // bailed slots returning raw vnodes + default: ({ msg }: any) => { + return h('span', msg) + } + }, + parent + ) + ) + push(`
`) + } + }) + ) + ).toBe( + `
parent
` + + `from slot` + + `
` + ) + }) + + test('nested components with template slots', async () => { + const Child = { + props: ['msg'], + template: `
` + } + + const app = createApp({ + components: { Child }, + template: `
parent{{ msg }}
` + }) + + expect(await render(app)).toBe( + `
parent
` + + `from slot` + + `
` + ) + }) + + test('nested render fn components with template slots', async () => { + const Child = { + props: ['msg'], + render(this: any) { + return h( + 'div', + { + class: 'child' + }, + this.$slots.default({ msg: 'from slot' }) + ) + } + } + + const app = createApp({ + template: `
parent{{ msg }}
` + }) + app.component('Child', Child) + + expect(await render(app)).toBe( + `
parent
` + + // no comment anchors because slot is used directly as element children + `from slot` + + `
` + ) + }) + + test('template slots forwarding', async () => { + const Child = { + template: `
` + } + + const Parent = { + components: { Child }, + template: `` + } + + const app = createApp({ + components: { Parent }, + template: `hello` + }) + + expect(await render(app)).toBe( + `
hello
` + ) + }) + + test('template slots forwarding, empty slot', async () => { + const Child = { + template: `
` + } + + const Parent = { + components: { Child }, + template: `` + } + + const app = createApp({ + components: { Parent }, + template: `` + }) + + expect(await render(app)).toBe( + // should only have a single fragment + `
` + ) + }) + + test('template slots forwarding, empty slot w/ fallback', async () => { + const Child = { + template: `
fallback
` + } + + const Parent = { + components: { Child }, + template: `` + } + + const app = createApp({ + components: { Parent }, + template: `` + }) + + expect(await render(app)).toBe( + // should only have a single fragment + `
fallback
` + ) + }) + }) + + describe('vnode element', () => { + test('props', async () => { + expect( + await render(h('div', { id: 'foo&', class: ['bar', 'baz'] }, 'hello')) + ).toBe(`
hello
`) + }) + + test('text children', async () => { + expect(await render(h('div', 'hello'))).toBe(`
hello
`) + }) + + test('array children', async () => { + expect( + await render( + h('div', [ + 'foo', + h('span', 'bar'), + [h('span', 'baz')], + createCommentVNode('qux') + ]) + ) + ).toBe( + `
foobarbaz
` + ) + }) + + test('void elements', async () => { + expect(await render(h('input'))).toBe(``) + }) + + test('innerHTML', async () => { + expect( + await render( + h( + 'div', + { + innerHTML: `hello` + }, + 'ignored' + ) + ) + ).toBe(`
hello
`) + }) + + test('textContent', async () => { + expect( + await render( + h( + 'div', + { + textContent: `hello` + }, + 'ignored' + ) + ) + ).toBe(`
${escapeHtml(`hello`)}
`) + }) + + test('textarea value', async () => { + expect( + await render( + h( + 'textarea', + { + value: `hello` + }, + 'ignored' + ) + ) + ).toBe(``) + }) + }) + + describe('raw vnode types', () => { + test('Text', async () => { + expect(await render(createTextVNode('hello
'))).toBe( + `hello <div>` + ) + }) + + test('Comment', async () => { + // https://www.w3.org/TR/html52/syntax.html#comments + expect( + await render( + h('div', [ + createCommentVNode('>foo'), + createCommentVNode('->foo'), + createCommentVNode(''), + createCommentVNode('--!>foo
`) + }) + + test('Static', async () => { + const content = `
helloworld
` + expect(await render(createStaticVNode(content, 1))).toBe(content) + }) + }) + + describe('scopeId', () => { + // note: here we are only testing scopeId handling for vdom serialization. + // compiled srr render functions will include scopeId directly in strings. + const withId = withScopeId('data-v-test') + const withChildId = withScopeId('data-v-child') + + test('basic', async () => { + expect( + await render( + withId(() => { + return h('div') + })() + ) + ).toBe(`
`) + }) + + test('with slots', async () => { + const Child = { + __scopeId: 'data-v-child', + render: withChildId(function(this: any) { + return h('div', this.$slots.default()) + }) + } + + const Parent = { + __scopeId: 'data-v-test', + render: withId(() => { + return h(Child, null, { + default: withId(() => h('span', 'slot')) + }) + }) + } + + expect(await render(h(Parent))).toBe( + `
slot
` + ) + }) + }) + + describe('integration w/ compiled template', () => { + test('render', async () => { + expect( + await render( + createApp({ + data() { + return { msg: 'hello' } + }, + template: `
{{ msg }}
` + }) + ) + ).toBe(`
hello
`) + }) + + test('handle compiler errors', async () => { + await render( + // render different content since compilation is cached + createApp({ template: `<${type === 'renderToString' ? 'div' : 'p'}` }) + ) + + expect( + `Template compilation error: Unexpected EOF in tag.` + ).toHaveBeenWarned() + expect(`Element is missing end tag`).toHaveBeenWarned() + }) + }) + + test('serverPrefetch', async () => { + const msg = Promise.resolve('hello') + const app = createApp({ + data() { + return { + msg: '' + } + }, + async serverPrefetch() { + this.msg = await msg + }, + render() { + return h('div', this.msg) + } + }) + const html = await render(app) + expect(html).toBe(`
hello
`) + }) + }) +} diff --git a/packages/server-renderer/__tests__/renderToStream.spec.ts b/packages/server-renderer/__tests__/renderToStream.spec.ts deleted file mode 100644 index 410be382..00000000 --- a/packages/server-renderer/__tests__/renderToStream.spec.ts +++ /dev/null @@ -1,622 +0,0 @@ -import { - createApp, - h, - createCommentVNode, - withScopeId, - resolveComponent, - ComponentOptions, - ref, - defineComponent, - createTextVNode, - createStaticVNode -} from 'vue' -import { escapeHtml } from '@vue/shared' -import { renderToStream as _renderToStream } from '../src/renderToStream' -import { Readable } from 'stream' -import { ssrRenderSlot } from '../src/helpers/ssrRenderSlot' -import { ssrRenderComponent } from '../src/helpers/ssrRenderComponent' - -const promisifyStream = (stream: Readable) => { - return new Promise((resolve, reject) => { - let result = '' - stream.on('data', data => { - result += data - }) - stream.on('error', () => { - reject(result) - }) - stream.on('end', () => { - resolve(result) - }) - }) -} - -const renderToStream = (app: any, context?: any) => - promisifyStream(_renderToStream(app, context)) - -describe('ssr: renderToStream', () => { - test('should apply app context', async () => { - const app = createApp({ - render() { - const Foo = resolveComponent('foo') as ComponentOptions - return h(Foo) - } - }) - app.component('foo', { - render: () => h('div', 'foo') - }) - const html = await renderToStream(app) - expect(html).toBe(`
foo
`) - }) - - describe('components', () => { - test('vnode components', async () => { - expect( - await renderToStream( - createApp({ - data() { - return { msg: 'hello' } - }, - render(this: any) { - return h('div', this.msg) - } - }) - ) - ).toBe(`
hello
`) - }) - - test('option components returning render from setup', async () => { - expect( - await renderToStream( - createApp({ - setup() { - const msg = ref('hello') - return () => h('div', msg.value) - } - }) - ) - ).toBe(`
hello
`) - }) - - test('setup components returning render from setup', async () => { - expect( - await renderToStream( - createApp( - defineComponent(() => { - const msg = ref('hello') - return () => h('div', msg.value) - }) - ) - ) - ).toBe(`
hello
`) - }) - - test('optimized components', async () => { - expect( - await renderToStream( - createApp({ - data() { - return { msg: 'hello' } - }, - ssrRender(ctx, push) { - push(`
${ctx.msg}
`) - } - }) - ) - ).toBe(`
hello
`) - }) - - describe('template components', () => { - test('render', async () => { - expect( - await renderToStream( - createApp({ - data() { - return { msg: 'hello' } - }, - template: `
{{ msg }}
` - }) - ) - ).toBe(`
hello
`) - }) - - test('handle compiler errors', async () => { - await renderToStream(createApp({ template: `<` })) - - expect( - 'Template compilation error: Unexpected EOF in tag.\n' + - '1 | <\n' + - ' | ^' - ).toHaveBeenWarned() - }) - }) - - test('nested vnode components', async () => { - const Child = { - props: ['msg'], - render(this: any) { - return h('div', this.msg) - } - } - - expect( - await renderToStream( - createApp({ - render() { - return h('div', ['parent', h(Child, { msg: 'hello' })]) - } - }) - ) - ).toBe(`
parent
hello
`) - }) - - test('nested optimized components', async () => { - const Child = { - props: ['msg'], - ssrRender(ctx: any, push: any) { - push(`
${ctx.msg}
`) - } - } - - expect( - await renderToStream( - createApp({ - ssrRender(_ctx, push, parent) { - push(`
parent`) - push(ssrRenderComponent(Child, { msg: 'hello' }, null, parent)) - push(`
`) - } - }) - ) - ).toBe(`
parent
hello
`) - }) - - test('nested template components', async () => { - const Child = { - props: ['msg'], - template: `
{{ msg }}
` - } - const app = createApp({ - template: `
parent
` - }) - app.component('Child', Child) - - expect(await renderToStream(app)).toBe( - `
parent
hello
` - ) - }) - - test('mixing optimized / vnode / template components', async () => { - const OptimizedChild = { - props: ['msg'], - ssrRender(ctx: any, push: any) { - push(`
${ctx.msg}
`) - } - } - - const VNodeChild = { - props: ['msg'], - render(this: any) { - return h('div', this.msg) - } - } - - const TemplateChild = { - props: ['msg'], - template: `
{{ msg }}
` - } - - expect( - await renderToStream( - createApp({ - ssrRender(_ctx, push, parent) { - push(`
parent`) - push( - ssrRenderComponent(OptimizedChild, { msg: 'opt' }, null, parent) - ) - push( - ssrRenderComponent(VNodeChild, { msg: 'vnode' }, null, parent) - ) - push( - ssrRenderComponent( - TemplateChild, - { msg: 'template' }, - null, - parent - ) - ) - push(`
`) - } - }) - ) - ).toBe( - `
parent
opt
vnode
template
` - ) - }) - - test('nested components with optimized slots', async () => { - const Child = { - props: ['msg'], - ssrRender(ctx: any, push: any, parent: any) { - push(`
`) - ssrRenderSlot( - ctx.$slots, - 'default', - { msg: 'from slot' }, - () => { - push(`fallback`) - }, - push, - parent - ) - push(`
`) - } - } - - expect( - await renderToStream( - createApp({ - ssrRender(_ctx, push, parent) { - push(`
parent`) - push( - ssrRenderComponent( - Child, - { msg: 'hello' }, - { - // optimized slot using string push - default: ({ msg }: any, push: any) => { - push(`${msg}`) - }, - // important to avoid slots being normalized - _: 1 as any - }, - parent - ) - ) - push(`
`) - } - }) - ) - ).toBe( - `
parent
` + - `from slot` + - `
` - ) - - // test fallback - expect( - await renderToStream( - createApp({ - ssrRender(_ctx, push, parent) { - push(`
parent`) - push(ssrRenderComponent(Child, { msg: 'hello' }, null, parent)) - push(`
`) - } - }) - ) - ).toBe( - `
parent
fallback
` - ) - }) - - test('nested components with vnode slots', async () => { - const Child = { - props: ['msg'], - ssrRender(ctx: any, push: any, parent: any) { - push(`
`) - ssrRenderSlot( - ctx.$slots, - 'default', - { msg: 'from slot' }, - null, - push, - parent - ) - push(`
`) - } - } - - expect( - await renderToStream( - createApp({ - ssrRender(_ctx, push, parent) { - push(`
parent`) - push( - ssrRenderComponent( - Child, - { msg: 'hello' }, - { - // bailed slots returning raw vnodes - default: ({ msg }: any) => { - return h('span', msg) - } - }, - parent - ) - ) - push(`
`) - } - }) - ) - ).toBe( - `
parent
` + - `from slot` + - `
` - ) - }) - - test('nested components with template slots', async () => { - const Child = { - props: ['msg'], - template: `
` - } - - const app = createApp({ - components: { Child }, - template: `
parent{{ msg }}
` - }) - - expect(await renderToStream(app)).toBe( - `
parent
` + - `from slot` + - `
` - ) - }) - - test('nested render fn components with template slots', async () => { - const Child = { - props: ['msg'], - render(this: any) { - return h( - 'div', - { - class: 'child' - }, - this.$slots.default({ msg: 'from slot' }) - ) - } - } - - const app = createApp({ - template: `
parent{{ msg }}
` - }) - app.component('Child', Child) - - expect(await renderToStream(app)).toBe( - `
parent
` + - // no comment anchors because slot is used directly as element children - `from slot` + - `
` - ) - }) - - test('async components', async () => { - const Child = { - // should wait for resolved render context from setup() - async setup() { - return { - msg: 'hello' - } - }, - ssrRender(ctx: any, push: any) { - push(`
${ctx.msg}
`) - } - } - - expect( - await renderToStream( - createApp({ - ssrRender(_ctx, push, parent) { - push(`
parent`) - push(ssrRenderComponent(Child, null, null, parent)) - push(`
`) - } - }) - ) - ).toBe(`
parent
hello
`) - }) - - test('parallel async components', async () => { - const OptimizedChild = { - props: ['msg'], - async setup(props: any) { - return { - localMsg: props.msg + '!' - } - }, - ssrRender(ctx: any, push: any) { - push(`
${ctx.localMsg}
`) - } - } - - const VNodeChild = { - props: ['msg'], - async setup(props: any) { - return { - localMsg: props.msg + '!' - } - }, - render(this: any) { - return h('div', this.localMsg) - } - } - - expect( - await renderToStream( - createApp({ - ssrRender(_ctx, push, parent) { - push(`
parent`) - push( - ssrRenderComponent(OptimizedChild, { msg: 'opt' }, null, parent) - ) - push( - ssrRenderComponent(VNodeChild, { msg: 'vnode' }, null, parent) - ) - push(`
`) - } - }) - ) - ).toBe(`
parent
opt!
vnode!
`) - }) - }) - - describe('vnode element', () => { - test('props', async () => { - expect( - await renderToStream( - h('div', { id: 'foo&', class: ['bar', 'baz'] }, 'hello') - ) - ).toBe(`
hello
`) - }) - - test('text children', async () => { - expect(await renderToStream(h('div', 'hello'))).toBe(`
hello
`) - }) - - test('array children', async () => { - expect( - await renderToStream( - h('div', [ - 'foo', - h('span', 'bar'), - [h('span', 'baz')], - createCommentVNode('qux') - ]) - ) - ).toBe( - `
foobarbaz
` - ) - }) - - test('void elements', async () => { - expect(await renderToStream(h('input'))).toBe(``) - }) - - test('innerHTML', async () => { - expect( - await renderToStream( - h( - 'div', - { - innerHTML: `hello` - }, - 'ignored' - ) - ) - ).toBe(`
hello
`) - }) - - test('textContent', async () => { - expect( - await renderToStream( - h( - 'div', - { - textContent: `hello` - }, - 'ignored' - ) - ) - ).toBe(`
${escapeHtml(`hello`)}
`) - }) - - test('textarea value', async () => { - expect( - await renderToStream( - h( - 'textarea', - { - value: `hello` - }, - 'ignored' - ) - ) - ).toBe(``) - }) - }) - - describe('raw vnode types', () => { - test('Text', async () => { - expect(await renderToStream(createTextVNode('hello
'))).toBe( - `hello <div>` - ) - }) - - test('Comment', async () => { - // https://www.w3.org/TR/html52/syntax.html#comments - expect( - await renderToStream( - h('div', [ - createCommentVNode('>foo'), - createCommentVNode('->foo'), - createCommentVNode(''), - createCommentVNode('--!>foo
`) - }) - - test('Static', async () => { - const content = `
helloworld
` - expect(await renderToStream(createStaticVNode(content, 1))).toBe(content) - }) - }) - - describe('scopeId', () => { - // note: here we are only testing scopeId handling for vdom serialization. - // compiled srr render functions will include scopeId directly in strings. - const withId = withScopeId('data-v-test') - const withChildId = withScopeId('data-v-child') - - test('basic', async () => { - expect( - await renderToStream( - withId(() => { - return h('div') - })() - ) - ).toBe(`
`) - }) - - test('with slots', async () => { - const Child = { - __scopeId: 'data-v-child', - render: withChildId(function(this: any) { - return h('div', this.$slots.default()) - }) - } - - const Parent = { - __scopeId: 'data-v-test', - render: withId(() => { - return h(Child, null, { - default: withId(() => h('span', 'slot')) - }) - }) - } - - expect(await renderToStream(h(Parent))).toBe( - `
slot
` - ) - }) - }) - - test('serverPrefetch', async () => { - const msg = Promise.resolve('hello') - const app = createApp({ - data() { - return { - msg: '' - } - }, - async serverPrefetch() { - this.msg = await msg - }, - render() { - return h('div', this.msg) - } - }) - const html = await renderToStream(app) - expect(html).toBe(`
hello
`) - }) -}) diff --git a/packages/server-renderer/__tests__/renderToString.spec.ts b/packages/server-renderer/__tests__/renderToString.spec.ts deleted file mode 100644 index a7756a89..00000000 --- a/packages/server-renderer/__tests__/renderToString.spec.ts +++ /dev/null @@ -1,621 +0,0 @@ -import { - createApp, - h, - createCommentVNode, - withScopeId, - resolveComponent, - ComponentOptions, - ref, - defineComponent, - createTextVNode, - createStaticVNode -} from 'vue' -import { escapeHtml } from '@vue/shared' -import { renderToString } from '../src/renderToString' -import { ssrRenderSlot, SSRSlot } from '../src/helpers/ssrRenderSlot' -import { ssrRenderComponent } from '../src/helpers/ssrRenderComponent' - -describe('ssr: renderToString', () => { - test('should apply app context', async () => { - const app = createApp({ - render() { - const Foo = resolveComponent('foo') as ComponentOptions - return h(Foo) - } - }) - app.component('foo', { - render: () => h('div', 'foo') - }) - const html = await renderToString(app) - expect(html).toBe(`
foo
`) - }) - - describe('components', () => { - test('vnode components', async () => { - expect( - await renderToString( - createApp({ - data() { - return { msg: 'hello' } - }, - render(this: any) { - return h('div', this.msg) - } - }) - ) - ).toBe(`
hello
`) - }) - - test('option components returning render from setup', async () => { - expect( - await renderToString( - createApp({ - setup() { - const msg = ref('hello') - return () => h('div', msg.value) - } - }) - ) - ).toBe(`
hello
`) - }) - - test('setup components returning render from setup', async () => { - expect( - await renderToString( - createApp( - defineComponent(() => { - const msg = ref('hello') - return () => h('div', msg.value) - }) - ) - ) - ).toBe(`
hello
`) - }) - - test('optimized components', async () => { - expect( - await renderToString( - createApp({ - data() { - return { msg: 'hello' } - }, - ssrRender(ctx, push) { - push(`
${ctx.msg}
`) - } - }) - ) - ).toBe(`
hello
`) - }) - - test('nested vnode components', async () => { - const Child = { - props: ['msg'], - render(this: any) { - return h('div', this.msg) - } - } - - expect( - await renderToString( - createApp({ - render() { - return h('div', ['parent', h(Child, { msg: 'hello' })]) - } - }) - ) - ).toBe(`
parent
hello
`) - }) - - test('nested optimized components', async () => { - const Child = { - props: ['msg'], - ssrRender(ctx: any, push: any) { - push(`
${ctx.msg}
`) - } - } - - expect( - await renderToString( - createApp({ - ssrRender(_ctx, push, parent) { - push(`
parent`) - push(ssrRenderComponent(Child, { msg: 'hello' }, null, parent)) - push(`
`) - } - }) - ) - ).toBe(`
parent
hello
`) - }) - - test('nested template components', async () => { - const Child = { - props: ['msg'], - template: `
{{ msg }}
` - } - const app = createApp({ - template: `
parent
` - }) - app.component('Child', Child) - - expect(await renderToString(app)).toBe( - `
parent
hello
` - ) - }) - - test('template components with dynamic class attribute after static', async () => { - const app = createApp({ - template: `
` - }) - expect(await renderToString(app)).toBe( - `
` - ) - }) - - test('template components with dynamic class attribute before static', async () => { - const app = createApp({ - template: `
` - }) - expect(await renderToString(app)).toBe( - `
` - ) - }) - - test('mixing optimized / vnode / template components', async () => { - const OptimizedChild = { - props: ['msg'], - ssrRender(ctx: any, push: any) { - push(`
${ctx.msg}
`) - } - } - - const VNodeChild = { - props: ['msg'], - render(this: any) { - return h('div', this.msg) - } - } - - const TemplateChild = { - props: ['msg'], - template: `
{{ msg }}
` - } - - expect( - await renderToString( - createApp({ - ssrRender(_ctx, push, parent) { - push(`
parent`) - push( - ssrRenderComponent(OptimizedChild, { msg: 'opt' }, null, parent) - ) - push( - ssrRenderComponent(VNodeChild, { msg: 'vnode' }, null, parent) - ) - push( - ssrRenderComponent( - TemplateChild, - { msg: 'template' }, - null, - parent - ) - ) - push(`
`) - } - }) - ) - ).toBe( - `
parent
opt
vnode
template
` - ) - }) - - test('nested components with optimized slots', async () => { - const Child = { - props: ['msg'], - ssrRender(ctx: any, push: any, parent: any) { - push(`
`) - ssrRenderSlot( - ctx.$slots, - 'default', - { msg: 'from slot' }, - () => { - push(`fallback`) - }, - push, - parent - ) - push(`
`) - } - } - - expect( - await renderToString( - createApp({ - ssrRender(_ctx, push, parent) { - push(`
parent`) - push( - ssrRenderComponent( - Child, - { msg: 'hello' }, - { - // optimized slot using string push - default: (({ msg }, push, _p) => { - push(`${msg}`) - }) as SSRSlot, - // important to avoid slots being normalized - _: 1 as any - }, - parent - ) - ) - push(`
`) - } - }) - ) - ).toBe( - `
parent
` + - `from slot` + - `
` - ) - - // test fallback - expect( - await renderToString( - createApp({ - ssrRender(_ctx, push, parent) { - push(`
parent`) - push(ssrRenderComponent(Child, { msg: 'hello' }, null, parent)) - push(`
`) - } - }) - ) - ).toBe( - `
parent
fallback
` - ) - }) - - test('nested components with vnode slots', async () => { - const Child = { - props: ['msg'], - ssrRender(ctx: any, push: any, parent: any) { - push(`
`) - ssrRenderSlot( - ctx.$slots, - 'default', - { msg: 'from slot' }, - null, - push, - parent - ) - push(`
`) - } - } - - expect( - await renderToString( - createApp({ - ssrRender(_ctx, push, parent) { - push(`
parent`) - push( - ssrRenderComponent( - Child, - { msg: 'hello' }, - { - // bailed slots returning raw vnodes - default: ({ msg }: any) => { - return h('span', msg) - } - }, - parent - ) - ) - push(`
`) - } - }) - ) - ).toBe( - `
parent
` + - `from slot` + - `
` - ) - }) - - test('nested components with template slots', async () => { - const Child = { - props: ['msg'], - template: `
` - } - - const app = createApp({ - components: { Child }, - template: `
parent{{ msg }}
` - }) - - expect(await renderToString(app)).toBe( - `
parent
` + - `from slot` + - `
` - ) - }) - - test('nested render fn components with template slots', async () => { - const Child = { - props: ['msg'], - render(this: any) { - return h( - 'div', - { - class: 'child' - }, - this.$slots.default({ msg: 'from slot' }) - ) - } - } - - const app = createApp({ - template: `
parent{{ msg }}
` - }) - app.component('Child', Child) - - expect(await renderToString(app)).toBe( - `
parent
` + - // no comment anchors because slot is used directly as element children - `from slot` + - `
` - ) - }) - - test('async components', async () => { - const Child = { - // should wait for resolved render context from setup() - async setup() { - return { - msg: 'hello' - } - }, - ssrRender(ctx: any, push: any) { - push(`
${ctx.msg}
`) - } - } - - expect( - await renderToString( - createApp({ - ssrRender(_ctx, push, parent) { - push(`
parent`) - push(ssrRenderComponent(Child, null, null, parent)) - push(`
`) - } - }) - ) - ).toBe(`
parent
hello
`) - }) - - test('parallel async components', async () => { - const OptimizedChild = { - props: ['msg'], - async setup(props: any) { - return { - localMsg: props.msg + '!' - } - }, - ssrRender(ctx: any, push: any) { - push(`
${ctx.localMsg}
`) - } - } - - 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(`
parent`) - push( - ssrRenderComponent(OptimizedChild, { msg: 'opt' }, null, parent) - ) - push( - ssrRenderComponent(VNodeChild, { msg: 'vnode' }, null, parent) - ) - push(`
`) - } - }) - ) - ).toBe(`
parent
opt!
vnode!
`) - }) - }) - - describe('vnode element', () => { - test('props', async () => { - expect( - await renderToString( - h('div', { id: 'foo&', class: ['bar', 'baz'] }, 'hello') - ) - ).toBe(`
hello
`) - }) - - test('text children', async () => { - expect(await renderToString(h('div', 'hello'))).toBe(`
hello
`) - }) - - test('array children', async () => { - expect( - await renderToString( - h('div', [ - 'foo', - h('span', 'bar'), - [h('span', 'baz')], - createCommentVNode('qux') - ]) - ) - ).toBe( - `
foobarbaz
` - ) - }) - - test('void elements', async () => { - expect(await renderToString(h('input'))).toBe(``) - }) - - test('innerHTML', async () => { - expect( - await renderToString( - h( - 'div', - { - innerHTML: `hello` - }, - 'ignored' - ) - ) - ).toBe(`
hello
`) - }) - - test('textContent', async () => { - expect( - await renderToString( - h( - 'div', - { - textContent: `hello` - }, - 'ignored' - ) - ) - ).toBe(`
${escapeHtml(`hello`)}
`) - }) - - test('textarea value', async () => { - expect( - await renderToString( - h( - 'textarea', - { - value: `hello` - }, - 'ignored' - ) - ) - ).toBe(``) - }) - }) - - describe('raw vnode types', () => { - test('Text', async () => { - expect(await renderToString(createTextVNode('hello
'))).toBe( - `hello <div>` - ) - }) - - test('Comment', async () => { - // https://www.w3.org/TR/html52/syntax.html#comments - expect( - await renderToString( - h('div', [ - createCommentVNode('>foo'), - createCommentVNode('->foo'), - createCommentVNode(''), - createCommentVNode('--!>foo
`) - }) - - test('Static', async () => { - const content = `
helloworld
` - expect(await renderToString(createStaticVNode(content, 1))).toBe(content) - }) - }) - - describe('scopeId', () => { - // note: here we are only testing scopeId handling for vdom serialization. - // compiled srr render functions will include scopeId directly in strings. - const withId = withScopeId('data-v-test') - const withChildId = withScopeId('data-v-child') - - test('basic', async () => { - expect( - await renderToString( - withId(() => { - return h('div') - })() - ) - ).toBe(`
`) - }) - - test('with slots', async () => { - const Child = { - __scopeId: 'data-v-child', - render: withChildId(function(this: any) { - return h('div', this.$slots.default()) - }) - } - - const Parent = { - __scopeId: 'data-v-test', - render: withId(() => { - return h(Child, null, { - default: withId(() => h('span', 'slot')) - }) - }) - } - - expect(await renderToString(h(Parent))).toBe( - `
slot
` - ) - }) - }) - - describe('integration w/ compiled template', () => { - test('render', async () => { - expect( - await renderToString( - createApp({ - data() { - return { msg: 'hello' } - }, - template: `
{{ msg }}
` - }) - ) - ).toBe(`
hello
`) - }) - - test('handle compiler errors', async () => { - await renderToString(createApp({ template: `<` })) - - expect( - 'Template compilation error: Unexpected EOF in tag.\n' + - '1 | <\n' + - ' | ^' - ).toHaveBeenWarned() - }) - }) - - test('serverPrefetch', async () => { - const msg = Promise.resolve('hello') - const app = createApp({ - data() { - return { - msg: '' - } - }, - async serverPrefetch() { - this.msg = await msg - }, - render() { - return h('div', this.msg) - } - }) - const html = await renderToString(app) - expect(html).toBe(`
hello
`) - }) -})