vue3-yuanma/packages/compiler-ssr/__tests__/ssrTransitionGroup.spec.ts
2022-05-18 09:31:31 +08:00

89 lines
2.4 KiB
TypeScript

import { compile } from '../src'
// transition-group should flatten and concat its children fragments into
// a single one
describe('transition-group', () => {
test('basic', () => {
expect(
compile(`<transition-group><div v-for="i in list"/></transition-group>`)
.code
).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`)
_ssrRenderList(_ctx.list, (i) => {
_push(\`<div></div>\`)
})
_push(\`<!--]-->\`)
}"
`)
})
test('with static tag', () => {
expect(
compile(
`<transition-group tag="ul"><div v-for="i in list"/></transition-group>`
).code
).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<ul>\`)
_ssrRenderList(_ctx.list, (i) => {
_push(\`<div></div>\`)
})
_push(\`</ul>\`)
}"
`)
})
test('with dynamic tag', () => {
expect(
compile(
`<transition-group :tag="someTag"><div v-for="i in list"/></transition-group>`
).code
).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<\${_ctx.someTag}>\`)
_ssrRenderList(_ctx.list, (i) => {
_push(\`<div></div>\`)
})
_push(\`</\${_ctx.someTag}>\`)
}"
`)
})
test('with multi fragments children', () => {
expect(
compile(
`<transition-group>
<div v-for="i in 10"/>
<div v-for="i in 10"/>
<template v-if="ok"><div>ok</div></template>
</transition-group>`
).code
).toMatchInlineSnapshot(`
"const { ssrRenderList: _ssrRenderList } = require(\\"vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
_push(\`<!--[-->\`)
_ssrRenderList(10, (i) => {
_push(\`<div></div>\`)
})
_ssrRenderList(10, (i) => {
_push(\`<div></div>\`)
})
if (_ctx.ok) {
_push(\`<div>ok</div>\`)
} else {
_push(\`<!---->\`)
}
_push(\`<!--]-->\`)
}"
`)
})
})