Repository: vuejs/vue-next
File: packages/compiler-ssr/__tests__/ssrElement.spec.ts (TypeScript)

Code before:
    test('custom dir with normal attrs', () => {
      expect(getCompiledString(`<div class="foo" v-xxx />`))
        .toMatchInlineSnapshot(`
          "\`<div\${
              _ssrRenderAttrs(_temp0 = _mergeProps({ class: "foo" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
            }>\${
              ("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
            }</div>\`"
        `)
    })

    test('custom dir with v-bind', () => {
      expect(getCompiledString(`<div :title="foo" :class="bar" v-xxx />`))
        .toMatchInlineSnapshot(`
          "\`<div\${
              _ssrRenderAttrs(_temp0 = _mergeProps({
                title: _ctx.foo,
                class: _ctx.bar
              }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
            }>\${
              ("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
            }</div>\`"
        `)
    })

    test('custom dir with object v-bind', () => {
      expect(getCompiledString(`<div v-bind="x" v-xxx />`))
        .toMatchInlineSnapshot(`
          "\`<div\${
              _ssrRenderAttrs(_temp0 = _mergeProps(_ctx.x, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
            }>\${
              ("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
            }</div>\`"
        `)
    })

    test('custom dir with object v-bind + normal bindings', () => {
      expect(
        getCompiledString(`<div v-bind="x" class="foo" v-xxx title="bar" />`),
      ).toMatchInlineSnapshot(`
        "\`<div\${
            _ssrRenderAttrs(_temp0 = _mergeProps(_ctx.x, {
              class: "foo",
              title: "bar"
            }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
          }>\${
            ("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
          }</div>\`"
      `)
    })
  })

Review comment (suggestion):
These test cases can pass without the following changes. The test cases should be written in `packages/server-renderer/__tests__/ssrDirectives.spec.ts` to verify the rendering result.


Code after:
    test('custom dir with normal attrs', () => {
      expect(getCompiledString(`<div class="foo" v-xxx />`))
        .toMatchInlineSnapshot(`
          "\`<div\${
              _ssrRenderAttrs(_temp0 = _mergeProps({ class: "foo" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
            }>\${
              ("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
            }</div>\`"
        `)
    })

    test('custom dir with v-bind', () => {
      expect(getCompiledString(`<div :title="foo" :class="bar" v-xxx />`))
        .toMatchInlineSnapshot(`
          "\`<div\${
              _ssrRenderAttrs(_temp0 = _mergeProps({
                title: _ctx.foo,
                class: _ctx.bar
              }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
            }>\${
              ("textContent" in _temp0) ? _ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ''
            }</div>\`"
        `)
    })

    test('custom dir with v-text', () => {
      expect(getCompiledString(`<div v-xxx v-text="foo" />`))
        .toMatchInlineSnapshot(`
          "\`<div\${
              _ssrRenderAttrs(_ssrGetDirectiveProps(_ctx, _directive_xxx))
            }>\${
              _ssrInterpolate(_ctx.foo)
            }</div>\`"
        `)
    })

    test('custom dir with v-text and normal attrs', () => {
      expect(getCompiledString(`<div class="test" v-xxx v-text="foo" />`))
        .toMatchInlineSnapshot(`
          "\`<div\${
              _ssrRenderAttrs(_mergeProps({ class: "test" }, _ssrGetDirectiveProps(_ctx, _directive_xxx)))
            }>\${
              _ssrInterpolate(_ctx.foo)
            }</div>\`"
        `)
    })

    test('mulptiple custom dirs with v-text', () => {
      expect(getCompiledString(`<div v-xxx v-yyy v-text="foo" />`))
        .toMatchInlineSnapshot(`
          "\`<div\${