ssrFallthroughAttrs.spec.ts 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import { compile } from '../src'
  2. describe('ssr: attrs fallthrough', () => {
  3. test('basic', () => {
  4. expect(compile(`<div/>`).code).toMatchInlineSnapshot(`
  5. "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
  6. return function ssrRender(_ctx, _push, _parent, _attrs) {
  7. _push(\`<div\${_ssrRenderAttrs(_attrs)}></div>\`)
  8. }"
  9. `)
  10. })
  11. test('with comments', () => {
  12. expect(compile(`<!--!--><div/>`).code).toMatchInlineSnapshot(`
  13. "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
  14. return function ssrRender(_ctx, _push, _parent, _attrs) {
  15. _push(\`<!--[--><!--!--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
  16. }"
  17. `)
  18. })
  19. // #5140
  20. test('should not inject to non-single-root if branches', () => {
  21. expect(compile(`<div v-if="true"/><div/>`).code).toMatchInlineSnapshot(`
  22. "
  23. return function ssrRender(_ctx, _push, _parent, _attrs) {
  24. _push(\`<!--[-->\`)
  25. if (true) {
  26. _push(\`<div></div>\`)
  27. } else {
  28. _push(\`<!---->\`)
  29. }
  30. _push(\`<div></div><!--]-->\`)
  31. }"
  32. `)
  33. })
  34. test('fallthrough component content (root with comments)', () => {
  35. expect(compile(`<!--root--><transition><div/></transition>`).code)
  36. .toMatchInlineSnapshot(`
  37. "const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
  38. return function ssrRender(_ctx, _push, _parent, _attrs) {
  39. _push(\`<!--[--><!--root--><div\${_ssrRenderAttrs(_attrs)}></div><!--]-->\`)
  40. }"
  41. `)
  42. })
  43. test('should not inject to fallthrough component content if not root', () => {
  44. expect(compile(`<div/><transition><div/></transition>`).code)
  45. .toMatchInlineSnapshot(`
  46. "
  47. return function ssrRender(_ctx, _push, _parent, _attrs) {
  48. _push(\`<!--[--><div></div><div></div><!--]-->\`)
  49. }"
  50. `)
  51. })
  52. })