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

import { compile } from '../src'

describe('ssr: v-for', () => {
  test('basic', () => {
    expect(compile(`<div v-for="i in list" />`).code).toMatchInlineSnapshot(`
      "const { _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, (i) => {
          _push(\`<div></div>\`)
        })
        _push(\`<!---->\`)
      }"
    `)
  })

  test('nested content', () => {
    expect(compile(`<div v-for="i in list">foo<span>bar</span></div>`).code)
      .toMatchInlineSnapshot(`
      "const { _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, (i) => {
          _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(`
      "const { _ssrInterpolate, _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, (row, i) => {
          _push(\`<div><!---->\`)
          _ssrRenderList(row, (j) => {
            _push(\`<div>\${
              _ssrInterpolate(i)
            },\${
              _ssrInterpolate(j)
            }</div>\`)
          })
          _push(\`<!----></div>\`)
        })
        _push(\`<!---->\`)
      }"
    `)
  })

  test('template v-for (text)', () => {
    expect(compile(`<template v-for="i in list">{{ i }}</template>`).code)
      .toMatchInlineSnapshot(`
      "const { _ssrInterpolate, _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, (i) => {
          _push(\`<!---->\${_ssrInterpolate(i)}<!---->\`)
        })
        _push(\`<!---->\`)
      }"
    `)
  })

  test('template v-for (single element)', () => {
    expect(
      compile(`<template v-for="i in list"><span>{{ i }}</span></template>`)
        .code
    ).toMatchInlineSnapshot(`
      "const { _ssrInterpolate, _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, (i) => {
          _push(\`<span>\${_ssrInterpolate(i)}</span>\`)
        })
        _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(`
      "const { _ssrInterpolate, _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, (i) => {
          _push(\`<!----><span>\${
            _ssrInterpolate(i)
          }</span><span>\${
            _ssrInterpolate(i + 1)
          }</span><!---->\`)
        })
        _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(`
      "const { _ssrInterpolate, _ssrRenderList } = require(\\"@vue/server-renderer\\")

      return function ssrRender(_ctx, _push, _parent) {
        _push(\`<!---->\`)
        _ssrRenderList(_ctx.list, ({ foo }, index) => {
          _push(\`<div>\${_ssrInterpolate(foo + _ctx.bar + index)}</div>\`)
        })
        _push(\`<!---->\`)
      }"
    `)
  })
})