From bb16dd7ecf4f97ba8c38597d69af588bac64882e Mon Sep 17 00:00:00 2001
From: 2nofa11 <47783146+2nofa11@users.noreply.github.com>
Date: Fri, 9 Feb 2024 21:50:26 +0900
Subject: [PATCH] test: #255 10_minimum_example/060_template_compiler2 (#261)

* update:Change screen state to  "Generate render function based on AST"

* test:chapter's e2e tests ( 10_minimum_example/060_template_compiler2)
---
 .../060_template_compiler2/tests/e2e.spec.ts  | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 book/impls/10_minimum_example/060_template_compiler2/tests/e2e.spec.ts

diff --git a/book/impls/10_minimum_example/060_template_compiler2/tests/e2e.spec.ts b/book/impls/10_minimum_example/060_template_compiler2/tests/e2e.spec.ts
new file mode 100644
index 00000000..381699b5
--- /dev/null
+++ b/book/impls/10_minimum_example/060_template_compiler2/tests/e2e.spec.ts
@@ -0,0 +1,57 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+import { createApp } from '../packages'
+
+let host: HTMLElement
+const initHost = () => {
+  host = document.createElement('div')
+  host.setAttribute('id', 'host')
+  document.body.appendChild(host)
+}
+beforeEach(() => initHost())
+afterEach(() => host.remove())
+
+describe('10_minimum_example/060_template_compiler', () => {
+  it('should render template option', () => {
+    const app = createApp({
+      template: `
+      <div class="container" style="text-align: center">
+        <h2>Hello, chibivue!</h2>
+        <img
+          width="150px"
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png"
+          alt="Vue.js Logo"
+        />
+        <p><b>chibivue</b> is the minimal Vue.js</p>
+  
+        <style>
+          .container {
+            height: 100vh;
+            padding: 16px;
+            background-color: #becdbe;
+            color: #2c3e50;
+          }
+        </style>
+      </div>
+    `,
+    })
+    app.mount('#host')
+
+    expect(host.innerHTML).toBe(
+      `<div class="container" style="text-align: center">
+        <h2>Hello, chibivue!</h2>
+        <img width="150px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png" alt="Vue.js Logo">
+        <p><b>chibivue</b> is the minimal Vue.js</p>
+  
+        <style>
+          .container {
+            height: 100vh;
+            padding: 16px;
+            background-color: #becdbe;
+            color: #2c3e50;
+          }
+        </style>
+      </div>`,
+    )
+  })
+})