test(runtime-vapor): rendererElement test (#256)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

Author: xiaodong2008

packages/runtime-vapor/__tests__/rendererElement.spec.ts

@@ -0,0 +1,78 @@
+import { makeRender } from './_utils'
+import { template } from '../src/dom/template'
+
+const define = makeRender()
+
+describe('renderer: element', () => {
+  it('should create an element', () => {
+    const { html } = define({
+      render() {
+        return template(`<div>`)()
+      },
+    }).render()
+
+    expect(html()).toBe('<div></div>')
+  })
+
+  it('should create an element with props', () => {
+    const { html } = define({
+      render() {
+        return template(`<div id="foo" class="bar">`)()
+      },
+    }).render()
+
+    expect(html()).toBe('<div id="foo" class="bar"></div>')
+  })
+
+  it('should create an element with direct text children', () => {
+    const { html } = define({
+      render() {
+        return template(`<div>foo bar`)()
+      },
+    }).render()
+
+    expect(html()).toBe('<div>foo bar</div>')
+  })
+
+  it('should create an element with direct text children and props', () => {
+    const { html } = define({
+      render() {
+        return template(`<div id="foo">bar`)()
+      },
+    }).render()
+
+    expect(html()).toBe('<div id="foo">bar</div>')
+  })
+
+  it.fails('should update an element tag which is already mounted', () => {
+    const { html } = define({
+      render() {
+        return template(`<div>foo`)()
+      },
+    }).render()
+    expect(html()).toBe('<div>foo</div>')
+
+    define({
+      render() {
+        return template(`<span>foo`)()
+      },
+    }).render()
+    expect(html()).toBe('<span>foo</span>')
+  })
+
+  it.fails('should update element props which is already mounted', () => {
+    const { html } = define({
+      render() {
+        return template(`<div id="baz">foo`)()
+      },
+    }).render()
+    expect(html()).toBe('<div id="baz">foo</div>')
+
+    define({
+      render() {
+        return template(`<div id="baz" class="bar">foo`)()
+      },
+    }).render()
+    expect(html()).toBe('<div id="baz" class="bar">foo</div>')
+  })
+})