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

123 lines
3.8 KiB
TypeScript
Raw Normal View History

2020-02-07 06:45:34 +08:00
import { compile } from '../src'
const scopeId = 'data-v-xxxxxxx'
describe('ssr: scopeId', () => {
test('basic', () => {
expect(
compile(`<div><span>hello</span></div>`, {
scopeId
}).code
).toMatchInlineSnapshot(`
"
return function ssrRender(_ctx, _push, _parent) {
_push(\`<div data-v-xxxxxxx><span data-v-xxxxxxx>hello</span></div>\`)
}"
`)
})
test('inside slots (only text)', () => {
// should have no branching inside slot
expect(
compile(`<foo>foo</foo>`, {
scopeId
}).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createTextVNode: _createTextVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
2020-02-07 06:45:34 +08:00
return function ssrRender(_ctx, _push, _parent) {
const _component_foo = _resolveComponent(\\"foo\\")
2020-02-07 06:45:34 +08:00
_push(_ssrRenderComponent(_component_foo, null, {
default: _withCtx((_, _push, _parent, _scopeId) => {
2020-02-07 14:06:51 +08:00
if (_push) {
_push(\`foo\`)
} else {
return [
_createTextVNode(\\"foo\\")
2020-02-07 14:06:51 +08:00
]
}
}, _ctx),
_: 1
}, _parent))
2020-02-07 06:45:34 +08:00
}"
`)
})
test('inside slots (with elements)', () => {
expect(
compile(`<foo><span>hello</span></foo>`, {
scopeId
}).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
2020-02-07 06:45:34 +08:00
return function ssrRender(_ctx, _push, _parent) {
const _component_foo = _resolveComponent(\\"foo\\")
2020-02-07 06:45:34 +08:00
_push(_ssrRenderComponent(_component_foo, null, {
default: _withCtx((_, _push, _parent, _scopeId) => {
2020-02-07 14:06:51 +08:00
if (_push) {
_push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
2020-02-07 06:45:34 +08:00
} else {
2020-02-07 14:06:51 +08:00
return [
_createVNode(\\"span\\", null, \\"hello\\")
2020-02-07 14:06:51 +08:00
]
2020-02-07 06:45:34 +08:00
}
}, _ctx),
_: 1
}, _parent))
2020-02-07 06:45:34 +08:00
}"
`)
})
test('nested slots', () => {
expect(
compile(`<foo><span>hello</span><bar><span/></bar></foo>`, {
scopeId
}).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode } = require(\\"vue\\")
const { ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
2020-02-07 06:45:34 +08:00
return function ssrRender(_ctx, _push, _parent) {
const _component_foo = _resolveComponent(\\"foo\\")
const _component_bar = _resolveComponent(\\"bar\\")
2020-02-07 06:45:34 +08:00
_push(_ssrRenderComponent(_component_foo, null, {
default: _withCtx((_, _push, _parent, _scopeId) => {
2020-02-07 14:06:51 +08:00
if (_push) {
_push(\`<span data-v-xxxxxxx\${_scopeId}>hello</span>\`)
_push(_ssrRenderComponent(_component_bar, null, {
default: _withCtx((_, _push, _parent, _scopeId) => {
2020-02-07 14:06:51 +08:00
if (_push) {
_push(\`<span data-v-xxxxxxx\${_scopeId}></span>\`)
2020-02-07 06:45:34 +08:00
} else {
2020-02-07 14:06:51 +08:00
return [
_createVNode(\\"span\\")
2020-02-07 14:06:51 +08:00
]
2020-02-07 06:45:34 +08:00
}
}, _ctx),
_: 1
}, _parent))
2020-02-07 06:45:34 +08:00
} else {
2020-02-07 14:06:51 +08:00
return [
_createVNode(\\"span\\", null, \\"hello\\"),
_createVNode(_component_bar, null, {
default: _withCtx(() => [
_createVNode(\\"span\\")
], _ctx),
_: 1
2020-02-07 14:06:51 +08:00
})
]
2020-02-07 06:45:34 +08:00
}
}, _ctx),
_: 1
}, _parent))
2020-02-07 06:45:34 +08:00
}"
`)
})
})