test: add tests

Author: edison1105

packages/runtime-vapor/__tests__/dom/prop.spec.ts

@@ -1,7 +1,9 @@
-import { NOOP } from '@vue/shared'
+import { NOOP, toDisplayString } from '@vue/shared'
 import {
   setDynamicProp as _setDynamicProp,
   setAttr,
+  setBlockHtml,
+  setBlockText,
   setClass,
   setDynamicProps,
   setElementText,
@@ -11,8 +13,15 @@ import {
   setValue,
 } from '../../src/dom/prop'
 import { setStyle } from '../../src/dom/prop'
-import { VaporComponentInstance } from '../../src/component'
+import { VaporComponentInstance, createComponent } from '../../src/component'
 import { ref, setCurrentInstance } from '@vue/runtime-dom'
+import { makeRender } from '../_utils'
+import {
+  createDynamicComponent,
+  defineVaporComponent,
+  renderEffect,
+  template,
+} from '../../src'
 
 let removeComponentInstance = NOOP
 beforeEach(() => {
@@ -24,6 +33,8 @@ afterEach(() => {
   removeComponentInstance()
 })
 
+const define = makeRender()
+
 describe('patchProp', () => {
   describe('setClass', () => {
     test('should set class', () => {
@@ -444,4 +455,150 @@ describe('patchProp', () => {
       expect(el.innerHTML).toBe('<p>bar</p>')
     })
   })
+
+  describe('setBlockText', () => {
+    test('with dynamic component', async () => {
+      const Comp = defineVaporComponent({
+        setup() {
+          return template('<div>child</div>', true)()
+        },
+      })
+      const value = ref('foo')
+      const { html } = define({
+        setup() {
+          const n1 = createDynamicComponent(() => Comp, null, null, true)
+          renderEffect(() => setBlockText(n1, toDisplayString(value)))
+          return n1
+        },
+      }).render()
+
+      expect(html()).toBe('<div>foo</div><!--dynamic-component-->')
+    })
+
+    test('with dynamic component with fallback', async () => {
+      const value = ref('foo')
+      const { html } = define({
+        setup() {
+          const n1 = createDynamicComponent(() => 'button', null, null, true)
+          renderEffect(() => setBlockText(n1, toDisplayString(value)))
+          return n1
+        },
+      }).render()
+
+      expect(html()).toBe('<button>foo</button><!--dynamic-component-->')
+    })
+
+    test('with component', async () => {
+      const Comp = defineVaporComponent({
+        setup() {
+          return template('<div>child</div>', true)()
+        },
+      })
+      const value = ref('foo')
+      const { html } = define({
+        setup() {
+          const n1 = createComponent(Comp, null, null, true)
+          renderEffect(() => setBlockText(n1, toDisplayString(value)))
+          return n1
+        },
+      }).render()
+
+      expect(html()).toBe('<div>foo</div>')
+    })
+
+    test('with multiple roots component', async () => {
+      const Comp = defineVaporComponent({
+        setup() {
+          return [
+            template('<div>child</div>')(),
+            template('<div>child</div>')(),
+          ]
+        },
+      })
+      const value = ref('foo')
+      const { html } = define({
+        setup() {
+          const n1 = createComponent(Comp, null, null, true)
+          renderEffect(() => setBlockText(n1, toDisplayString(value)))
+          return n1
+        },
+      }).render()
+
+      expect(html()).toBe('<div>child</div><div>child</div>')
+      expect('Extraneous non-props attributes (textContent)').toHaveBeenWarned()
+    })
+  })
+
+  describe('setBlockHtml', () => {
+    test('with dynamic component', async () => {
+      const Comp = defineVaporComponent({
+        setup() {
+          return template('<div>child</div>', true)()
+        },
+      })
+      const value = ref('<p>foo</p>')
+      const { html } = define({
+        setup() {
+          const n1 = createDynamicComponent(() => Comp, null, null, true)
+          renderEffect(() => setBlockHtml(n1, value.value))
+          return n1
+        },
+      }).render()
+
+      expect(html()).toBe('<div><p>foo</p></div><!--dynamic-component-->')
+    })
+
+    test('with dynamic component with fallback', async () => {
+      const value = ref('<p>foo</p>')
+      const { html } = define({
+        setup() {
+          const n1 = createDynamicComponent(() => 'button', null, null, true)
+          renderEffect(() => setBlockHtml(n1, value.value))
+          return n1
+        },
+      }).render()
+
+      expect(html()).toBe('<button><p>foo</p></button><!--dynamic-component-->')
+    })
+
+    test('with component', async () => {
+      const Comp = defineVaporComponent({
+        setup() {
+          return template('<div>child</div>', true)()
+        },
+      })
+      const value = ref('<p>foo</p>')
+      const { html } = define({
+        setup() {
+          const n1 = createComponent(Comp, null, null, true)
+          renderEffect(() => setBlockHtml(n1, value.value))
+          return n1
+        },
+      }).render()
+
+      expect(html()).toBe('<div><p>foo</p></div>')
+    })
+
+    test('with multiple roots component', async () => {
+      const Comp = defineVaporComponent({
+        setup() {
+          return [
+            template('<div>child</div>')(),
+            template('<div>child</div>')(),
+          ]
+        },
+      })
+      const value = ref('<p>foo</p>')
+      const { html } = define({
+        setup() {
+          const n1 = createComponent(Comp, null, null, true)
+          renderEffect(() => setBlockHtml(n1, value.value))
+          return n1
+        },
+      }).render()
+
+      expect(html()).toBe('<div>child</div><div>child</div>')
+      expect('Extraneous non-props attributes (innerHTML)').toHaveBeenWarned()
+    })
+  })
 })