vue3-yuanma/packages/compiler-ssr/__tests__/ssrVFor.spec.ts

135 lines
3.9 KiB
TypeScript
Raw Normal View History

2020-02-04 09:47:41 +08:00
import { compile } from '../src'
describe('ssr: v-for', () => {
test('basic', () => {
expect(compile(`<div v-for="i in list" />`).code).toMatchInlineSnapshot(`
2020-02-07 01:09:09 +08:00
"const { _ssrRenderList } = require(\\"@vue/server-renderer\\")
2020-02-04 09:47:41 +08:00
return function ssrRender(_ctx, _push, _parent) {
_push(\`<!---->\`)
2020-02-07 01:09:09 +08:00
_ssrRenderList(_ctx.list, (i) => {
2020-02-04 09:47:41 +08:00
_push(\`<div></div>\`)
})
_push(\`<!---->\`)
}"
`)
})
test('nested content', () => {
expect(compile(`<div v-for="i in list">foo<span>bar</span></div>`).code)
.toMatchInlineSnapshot(`
2020-02-07 01:09:09 +08:00
"const { _ssrRenderList } = require(\\"@vue/server-renderer\\")
2020-02-04 09:47:41 +08:00
return function ssrRender(_ctx, _push, _parent) {
_push(\`<!---->\`)
2020-02-07 01:09:09 +08:00
_ssrRenderList(_ctx.list, (i) => {
2020-02-04 09:47:41 +08:00
_push(\`<div>foo<span>bar</span></div>\`)
})
_push(\`<!---->\`)
}"
`)
})
test('nested v-for', () => {
expect(
compile(
`<div v-for="row, i in list">` +
`<div v-for="j in row">{{ i }},{{ j }}</div>` +
`</div>`
).code
).toMatchInlineSnapshot(`
2020-02-07 01:09:09 +08:00
"const { _ssrInterpolate, _ssrRenderList } = require(\\"@vue/server-renderer\\")
2020-02-04 09:47:41 +08:00
return function ssrRender(_ctx, _push, _parent) {
_push(\`<!---->\`)
2020-02-07 01:09:09 +08:00
_ssrRenderList(_ctx.list, (row, i) => {
2020-02-04 09:47:41 +08:00
_push(\`<div><!---->\`)
2020-02-07 01:09:09 +08:00
_ssrRenderList(row, (j) => {
_push(\`<div>\${
2020-02-07 01:09:09 +08:00
_ssrInterpolate(i)
},\${
2020-02-07 01:09:09 +08:00
_ssrInterpolate(j)
}</div>\`)
2020-02-04 09:47:41 +08:00
})
_push(\`<!----></div>\`)
})
_push(\`<!---->\`)
}"
`)
})
test('template v-for (text)', () => {
expect(compile(`<template v-for="i in list">{{ i }}</template>`).code)
.toMatchInlineSnapshot(`
2020-02-07 01:09:09 +08:00
"const { _ssrInterpolate, _ssrRenderList } = require(\\"@vue/server-renderer\\")
2020-02-04 09:47:41 +08:00
return function ssrRender(_ctx, _push, _parent) {
_push(\`<!---->\`)
2020-02-07 01:09:09 +08:00
_ssrRenderList(_ctx.list, (i) => {
_push(\`<!---->\${_ssrInterpolate(i)}<!---->\`)
2020-02-04 09:47:41 +08:00
})
_push(\`<!---->\`)
}"
`)
})
test('template v-for (single element)', () => {
expect(
compile(`<template v-for="i in list"><span>{{ i }}</span></template>`)
.code
).toMatchInlineSnapshot(`
2020-02-07 01:09:09 +08:00
"const { _ssrInterpolate, _ssrRenderList } = require(\\"@vue/server-renderer\\")
2020-02-04 09:47:41 +08:00
return function ssrRender(_ctx, _push, _parent) {
_push(\`<!---->\`)
2020-02-07 01:09:09 +08:00
_ssrRenderList(_ctx.list, (i) => {
_push(\`<span>\${_ssrInterpolate(i)}</span>\`)
2020-02-04 09:47:41 +08:00
})
_push(\`<!---->\`)
}"
`)
})
test('template v-for (multi element)', () => {
expect(
compile(
`<template v-for="i in list"><span>{{ i }}</span><span>{{ i + 1 }}</span></template>`
).code
).toMatchInlineSnapshot(`
2020-02-07 01:09:09 +08:00
"const { _ssrInterpolate, _ssrRenderList } = require(\\"@vue/server-renderer\\")
2020-02-04 09:47:41 +08:00
return function ssrRender(_ctx, _push, _parent) {
_push(\`<!---->\`)
2020-02-07 01:09:09 +08:00
_ssrRenderList(_ctx.list, (i) => {
_push(\`<!----><span>\${
2020-02-07 01:09:09 +08:00
_ssrInterpolate(i)
}</span><span>\${
2020-02-07 01:09:09 +08:00
_ssrInterpolate(i + 1)
}</span><!---->\`)
2020-02-04 09:47:41 +08:00
})
_push(\`<!---->\`)
}"
`)
})
test('render loop args should not be prefixed', () => {
const { code } = compile(
`<div v-for="{ foo }, index in list">{{ foo + bar + index }}</div>`
)
expect(code).toMatch(`_ctx.bar`)
expect(code).not.toMatch(`_ctx.foo`)
expect(code).not.toMatch(`_ctx.index`)
expect(code).toMatchInlineSnapshot(`
2020-02-07 01:09:09 +08:00
"const { _ssrInterpolate, _ssrRenderList } = require(\\"@vue/server-renderer\\")
2020-02-04 09:47:41 +08:00
return function ssrRender(_ctx, _push, _parent) {
_push(\`<!---->\`)
2020-02-07 01:09:09 +08:00
_ssrRenderList(_ctx.list, ({ foo }, index) => {
_push(\`<div>\${_ssrInterpolate(foo + _ctx.bar + index)}</div>\`)
2020-02-04 09:47:41 +08:00
})
_push(\`<!---->\`)
}"
`)
})
})