From e552ed2e9ffbda6877ac5f80cce724f455527600 Mon Sep 17 00:00:00 2001
From: XiaoDong <admin@xiaodong.moe>
Date: Mon, 15 Jul 2024 01:17:20 +0800
Subject: [PATCH] test(runtime-vapor): rendererElement test (#256)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
---
 .../__tests__/rendererElement.spec.ts         | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 packages/runtime-vapor/__tests__/rendererElement.spec.ts

diff --git a/packages/runtime-vapor/__tests__/rendererElement.spec.ts b/packages/runtime-vapor/__tests__/rendererElement.spec.ts
new file mode 100644
index 000000000..c33f2cba9
--- /dev/null
+++ b/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>')
+  })
+})