118 lines
2.8 KiB
TypeScript
118 lines
2.8 KiB
TypeScript
|
import { CssRender } from 'css-render'
|
||
|
|
import { h, createSSRApp, defineComponent } from 'vue'
|
||
|
|
import { renderToString } from '@vue/server-renderer'
|
||
|
|
import { useSsrAdapter, setup } from '../src/index'
|
||
|
|
|
||
|
|
const { c } = CssRender()
|
||
|
|
|
||
|
|
describe('ssr', () => {
|
||
|
|
describe('render to string', () => {
|
||
|
|
const Child = defineComponent({
|
||
|
|
setup () {
|
||
|
|
c('div', {
|
||
|
|
color: 'red'
|
||
|
|
}).mount({
|
||
|
|
id: 'mount-id',
|
||
|
|
ssr: useSsrAdapter()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
render () {
|
||
|
|
return h('div', null, 'Child')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const App = defineComponent({
|
||
|
|
render () {
|
||
|
|
return h(Child)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const app = createSSRApp(App)
|
||
|
|
const { collect } = setup(app)
|
||
|
|
it('should work', (done) => {
|
||
|
|
renderToString(app).then((v) => {
|
||
|
|
expect(collect() + v).toMatchSnapshot()
|
||
|
|
done()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
})
|
||
|
|
describe('useSsrAdapter', () => {
|
||
|
|
const Child = defineComponent({
|
||
|
|
setup () {
|
||
|
|
c('div', {
|
||
|
|
color: 'red'
|
||
|
|
}).mount({
|
||
|
|
id: 'mount-id',
|
||
|
|
ssr: useSsrAdapter()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
render () {
|
||
|
|
return h('div', null, 'Child')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const App = defineComponent({
|
||
|
|
render () {
|
||
|
|
return h(Child)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const app = createSSRApp(App)
|
||
|
|
const { collect } = setup(app)
|
||
|
|
it('should work', (done) => {
|
||
|
|
renderToString(app).then((v) => {
|
||
|
|
expect(collect() + v).toMatchSnapshot()
|
||
|
|
done()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
})
|
||
|
|
// uncomment after vue fixes the stream ssr bug
|
||
|
|
// describe('render to stream', () => {
|
||
|
|
// it('should work', (done) => {
|
||
|
|
// const app = createSSRApp({
|
||
|
|
// render () {
|
||
|
|
// return [
|
||
|
|
// h(Foo),
|
||
|
|
// h(Suspense, null, {
|
||
|
|
// default: () => h(Bar),
|
||
|
|
// ssFallback: () => 'suspense'
|
||
|
|
// }),
|
||
|
|
// h(Foo)
|
||
|
|
// ]
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// const Foo = {
|
||
|
|
// setup () {
|
||
|
|
// c('div', {
|
||
|
|
// color: 'foo'
|
||
|
|
// }).mount({
|
||
|
|
// id: 'foo',
|
||
|
|
// ssr: ssrAdapter
|
||
|
|
// })
|
||
|
|
// },
|
||
|
|
// render: () => h('div', 'foo')
|
||
|
|
// }
|
||
|
|
// const Bar = {
|
||
|
|
// async setup () {
|
||
|
|
// c('div', {
|
||
|
|
// color: 'bar'
|
||
|
|
// }).mount({
|
||
|
|
// id: 'bar',
|
||
|
|
// ssr: ssrAdapter
|
||
|
|
// })
|
||
|
|
// await new Promise((resolve) => setTimeout(resolve, 1000))
|
||
|
|
// },
|
||
|
|
// render: () => {
|
||
|
|
// return [h('div', 'bar'), h(Foo)]
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// const { collect } = setup(app)
|
||
|
|
// const rs = renderToStream(app)
|
||
|
|
// let html = ''
|
||
|
|
// rs.on('data', (chunk) => {
|
||
|
|
// html += `${collect()}\n${chunk.toString() as string}`
|
||
|
|
// })
|
||
|
|
// rs.on('end', () => {
|
||
|
|
// expect(html).toMatchSnapshot()
|
||
|
|
// done()
|
||
|
|
// })
|
||
|
|
// })
|
||
|
|
// })
|
||
|
|
})
|