test: #66 ✏️ chapter's e2e tests (~ 10_minimum_example/050_component_system3)

book/impls/00_introduction/010_project_setup/tests/index.spec.ts

@@ -0,0 +1,13 @@
+import { helloChibivue } from '../packages'
+import { describe, expect, it, vi } from 'vitest'
+
+describe('010_project_setup', () => {
+  it('should called console.log', () => {
+    const consoleLog = window.console.log
+    const mockFn = vi.fn(() => {})
+    window.console.log = mockFn
+    helloChibivue()
+    expect(mockFn).toBeCalled()
+    window.console.log = consoleLog
+  })
+})

book/impls/10_minimum_example/010_create_app/tests/e2e.spec.ts

@@ -0,0 +1,24 @@
+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/010_create_app', () => {
+  it('should render text', () => {
+    const app = createApp({
+      render() {
+        return 'Hello world.'
+      },
+    })
+    app.mount('#host')
+    expect(host.innerHTML).toBe('Hello world.')
+  })
+})

book/impls/10_minimum_example/010_create_app2/tests/e2e.spec.ts

@@ -0,0 +1,24 @@
+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/010_create_app2', () => {
+  it('should render text', () => {
+    const app = createApp({
+      render() {
+        return 'Hello world.'
+      },
+    })
+    app.mount('#host')
+    expect(host.innerHTML).toBe('Hello world.')
+  })
+})

book/impls/10_minimum_example/020_simple_h_function/tests/e2e.spec.ts

@@ -0,0 +1,35 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { createApp, h } 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/020_simple_h_function', () => {
+  it('should render vdom and trigger click handler', () => {
+    const onClick = vi.fn(() => {})
+    const app = createApp({
+      render() {
+        return h('div', { id: 'my-app' }, [
+          h('p', { style: 'color: red; font-weight: bold;' }, ['Hello world.']),
+          h('button', { id: 'btn', onClick }, ['click me!']),
+        ])
+      },
+    })
+    app.mount('#host')
+
+    expect(host.innerHTML).toBe(
+      '<div id="my-app"><p style="color: red; font-weight: bold;">Hello world.</p><button id="btn">click me!</button></div>',
+    )
+
+    const btn = host.querySelector('#btn') as HTMLButtonElement
+    btn.click()
+    expect(onClick).toHaveBeenCalled()
+  })
+})

book/impls/10_minimum_example/030_reactive_system/tests/e2e.spec.ts

@@ -0,0 +1,43 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { createApp, h, reactive } 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/030_reactive_system', () => {
+  it('should render reactive state', () => {
+    const state = reactive({ count: 0 })
+    const onClick = vi.fn(() => {
+      state.count++
+    })
+    const app = createApp({
+      setup() {
+        return function render() {
+          return h('div', { id: 'my-app' }, [
+            h('p', {}, [`count: ${state.count}`]),
+            h('button', { id: 'btn', onClick }, ['increment']),
+          ])
+        }
+      },
+    })
+    app.mount('#host')
+
+    expect(host.innerHTML).toBe(
+      '<div id="my-app"><p>count: 0</p><button id="btn">increment</button></div>',
+    )
+
+    const btn = host.querySelector('#btn') as HTMLButtonElement
+    btn.click()
+    expect(onClick).toHaveBeenCalled()
+    expect(host.innerHTML).toBe(
+      '<div id="my-app"><p>count: 1</p><button id="btn">increment</button></div>',
+    )
+  })
+})

book/impls/10_minimum_example/040_vdom_system/tests/e2e.spec.ts

@@ -0,0 +1,43 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { createApp, h, reactive } 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/040_vdom_system', () => {
+  it('should render reactive state (vdom patch)', () => {
+    const state = reactive({ count: 0 })
+    const onClick = vi.fn(() => {
+      state.count++
+    })
+    const app = createApp({
+      setup() {
+        return function render() {
+          return h('div', { id: 'my-app' }, [
+            h('p', {}, [`count: ${state.count}`]),
+            h('button', { id: 'btn', onClick }, ['increment']),
+          ])
+        }
+      },
+    })
+    app.mount('#host')
+
+    expect(host.innerHTML).toBe(
+      '<div id="my-app"><p>count: 0</p><button id="btn">increment</button></div>',
+    )
+
+    const btn = host.querySelector('#btn') as HTMLButtonElement
+    btn.click()
+    expect(onClick).toHaveBeenCalled()
+    expect(host.innerHTML).toBe(
+      '<div id="my-app"><p>count: 1</p><button id="btn">increment</button></div>',
+    )
+  })
+})

book/impls/10_minimum_example/050_component_system/tests/e2e.spec.ts

@@ -0,0 +1,59 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { createApp, h, reactive } 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/050_component_system', () => {
+  it('should render component', () => {
+    const state = reactive({ count: 0 })
+    const onClick = vi.fn(() => {
+      state.count++
+    })
+    const Comp = {
+      setup() {
+        return () =>
+          h('div', {}, [
+            h('p', {}, [`count: ${state.count}`]),
+            h('button', { id: 'btn', onClick }, ['increment']),
+          ])
+      },
+    }
+    const App = createApp({
+      setup: () => {
+        return () => h('div', { id: 'my-app' }, [h(Comp, {}, [])])
+      },
+    })
+    App.mount('#host')
+
+    expect(host.innerHTML).toBe(
+      // prettier-ignore
+      '<div id="my-app">' + 
+        '<div>' + 
+          '<p>count: 0</p>' + 
+          '<button id="btn">increment</button>' + 
+        '</div>' + 
+      '</div>',
+    )
+
+    const btn = host.querySelector('#btn') as HTMLButtonElement
+    btn.click()
+    expect(onClick).toHaveBeenCalled()
+    expect(host.innerHTML).toBe(
+      // prettier-ignore
+      '<div id="my-app">' + 
+        '<div>' + 
+          '<p>count: 1</p>' + 
+          '<button id="btn">increment</button>' + 
+        '</div>' + 
+      '</div>',
+    )
+  })
+})

book/impls/10_minimum_example/050_component_system2/tests/e2e.spec.ts

@@ -0,0 +1,57 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { createApp, h, reactive } 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/050_component_system2', () => {
+  it('should component props', () => {
+    const state = reactive({ count: 0 })
+    const onClick = vi.fn(() => {
+      state.count++
+    })
+    const Comp = {
+      props: { count: { type: Number } },
+      setup(props: { count: number }) {
+        return () => h('div', {}, [`count: ${props.count}`])
+      },
+    }
+
+    const App = createApp({
+      setup() {
+        return () =>
+          h('div', { id: 'my-app' }, [
+            h(Comp, { count: state.count }, []),
+            h('button', { id: 'btn', onClick }, ['increment']),
+          ])
+      },
+    })
+    App.mount('#host')
+
+    expect(host.innerHTML).toBe(
+      // prettier-ignore
+      '<div id="my-app">' + 
+        '<div>count: 0</div>' + 
+        '<button id="btn">increment</button>' + 
+      '</div>',
+    )
+
+    const btn = host.querySelector('#btn') as HTMLButtonElement
+    btn.click()
+    expect(onClick).toHaveBeenCalled()
+    expect(host.innerHTML).toBe(
+      // prettier-ignore
+      '<div id="my-app">' + 
+        '<div>count: 1</div>' + 
+        '<button id="btn">increment</button>' + 
+      '</div>',
+    )
+  })
+})

book/impls/10_minimum_example/050_component_system3/tests/e2e.spec.ts

@@ -0,0 +1,70 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { createApp, h, reactive } 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/050_component_system3', () => {
+  it('should component props and handle emitted event', () => {
+    const state = reactive({ count: 0 })
+    const onClickIncrement = vi.fn(() => {
+      state.count++
+    })
+    const Comp = {
+      props: { count: { type: Number } },
+      setup(props: { count: number }, { emit }: any) {
+        return () =>
+          h('div', {}, [
+            h('div', {}, [`count: ${props.count}`]),
+            h('button', { id: 'btn', onClick: () => emit('click:increment') }, [
+              'increment',
+            ]),
+          ])
+      },
+    }
+
+    const App = createApp({
+      setup() {
+        return () =>
+          h('div', { id: 'my-app' }, [
+            h(
+              Comp,
+              { count: state.count, 'onClick:increment': onClickIncrement },
+              [],
+            ),
+          ])
+      },
+    })
+    App.mount('#host')
+
+    expect(host.innerHTML).toBe(
+      // prettier-ignore
+      '<div id="my-app">' + 
+        '<div>' +
+          '<div>count: 0</div>' + 
+          '<button id="btn">increment</button>' + 
+        '</div>' +
+      '</div>',
+    )
+
+    const btn = host.querySelector('#btn') as HTMLButtonElement
+    btn.click()
+    expect(onClickIncrement).toHaveBeenCalled()
+    expect(host.innerHTML).toBe(
+      // prettier-ignore
+      '<div id="my-app">' + 
+        '<div>' +
+          '<div>count: 1</div>' + 
+          '<button id="btn">increment</button>' + 
+        '</div>' +
+      '</div>',
+    )
+  })
+})

package.json

@@ -60,6 +60,7 @@
     "eslint-plugin-import": "^2.29.1",
     "fs-extra": "^11.1.1",
     "husky": "^8.0.3",
+    "jsdom": "^24.0.0",
     "lint-staged": "^15.2.0",
     "prettier": "^3.1.1",
     "rimraf": "^5.0.5",