glass-easel 0.2.0 → 0.3.0

package/tests/tmpl/structure.test.ts

@@ -1,4 +1,11 @@
-import { tmpl, multiTmpl, domBackend, execWithWarn } from '../base/env'
+import {
+  tmpl,
+  multiTmpl,
+  domBackend,
+  execWithWarn,
+  composedBackend,
+  shadowBackend,
+} from '../base/env'
 import { virtual as matchElementWithDom } from '../base/match'
 import * as glassEasel from '../../src'
 
@@ -7,7 +14,7 @@ const domHtml = (elem: glassEasel.Element): string => {
   return domElem.innerHTML
 }
 
-describe('node tree structure', () => {
+const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
   test('basic tree building', () => {
     const def = glassEasel
       .registerElement({
@@ -18,8 +25,9 @@ describe('node tree structure', () => {
       `),
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     expect(domHtml(elem)).toBe('<div style="font-weight: bold"><span>Hello world!</span></div>')
+    matchElementWithDom(elem)
   })
 
   test('basic data binding', () => {
@@ -36,13 +44,15 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend).general()
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend).general()
     expect(domHtml(elem)).toBe('<div class="123"><span>abc</span></div>')
+    matchElementWithDom(elem)
     elem.setData({
       a: true,
       c: false,
     })
     expect(domHtml(elem)).toBe('<div class="true"><span>false</span></div>')
+    matchElementWithDom(elem)
   })
 
   test('if blocks', () => {
@@ -62,20 +72,24 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     expect(domHtml(elem)).toBe('<div>c</div><div>f</div>')
+    matchElementWithDom(elem)
     elem.setData({
       cond1: true,
     })
     expect(domHtml(elem)).toBe('<div>a</div><div>c</div><div>d</div>')
+    matchElementWithDom(elem)
     elem.setData({
       cond2: 1,
     })
     expect(domHtml(elem)).toBe('<div>a</div><div>b</div><div>d</div>')
+    matchElementWithDom(elem)
     elem.setData({
       cond1: null,
     })
     expect(domHtml(elem)).toBe('<div>b</div><div>e</div>')
+    matchElementWithDom(elem)
   })
 
   test('if blocks in template-is', () => {
@@ -98,17 +112,49 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     expect(domHtml(elem)).toBe('<div>456</div>')
+    matchElementWithDom(elem)
     elem.setData({
       cond: true,
     })
     expect(domHtml(elem)).toBe('<div>123</div>')
+    matchElementWithDom(elem)
     elem.setData({
       cond: false,
       c: 789,
     })
     expect(domHtml(elem)).toBe('<div>789</div>')
+    matchElementWithDom(elem)
+  })
+
+  test('if blocks in include', () => {
+    const def = glassEasel
+      .registerElement({
+        template: multiTmpl({
+          '': '<include wx:if="{{!cond}}" src="./a.wxml" />',
+          a: '<div>{{a}}</div>',
+        }),
+        data: {
+          cond: false,
+          a: 123,
+        },
+      })
+      .general()
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
+    expect(domHtml(elem)).toBe('<div>123</div>')
+    matchElementWithDom(elem)
+    elem.setData({
+      cond: true,
+    })
+    expect(domHtml(elem)).toBe('')
+    matchElementWithDom(elem)
+    elem.setData({
+      cond: false,
+      a: 456,
+    })
+    expect(domHtml(elem)).toBe('<div>456</div>')
+    matchElementWithDom(elem)
   })
 
   test('if blocks in slot', () => {
@@ -147,7 +193,7 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     const child = elem.getShadowRoot()!.getElementById('c')!.asInstanceOf(childComp)!
     expect(domHtml(elem)).toBe('<child><div>A</div></child>')
     matchElementWithDom(elem)
@@ -195,9 +241,10 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<div><x-c>0</x-c></div><div><x-c>1</x-c></div>')
+    matchElementWithDom(elem)
     expect(ops).toEqual([
       [-1, '10'],
       [-1, '20'],
@@ -207,6 +254,7 @@ describe('node tree structure', () => {
       list: [20, 10],
     })
     expect(domHtml(elem)).toBe('<div><x-c>0</x-c></div><div><x-c>1</x-c></div>')
+    matchElementWithDom(elem)
     expect(ops).toEqual([])
     ops.length = 0
     elem.setData({
@@ -215,6 +263,7 @@ describe('node tree structure', () => {
     expect(domHtml(elem)).toBe(
       '<div><x-c>0</x-c></div><div><x-c>1</x-c></div><div><x-c>2</x-c></div><div><x-c>3</x-c></div>',
     )
+    matchElementWithDom(elem)
     expect(ops).toEqual([
       [-1, '50'],
       [-1, '60'],
@@ -224,6 +273,7 @@ describe('node tree structure', () => {
       list: [50],
     })
     expect(domHtml(elem)).toBe('<div><x-c>0</x-c></div>')
+    matchElementWithDom(elem)
     expect(ops).toEqual([
       [-2, '40'],
       [-2, '50'],
@@ -267,7 +317,7 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     const listBlock = elem.getShadowRoot()!.childNodes[0] as glassEasel.VirtualNode
     const checkIndex = () => {
       for (let i = 0; i < listBlock.childNodes.length; i += 1) {
@@ -277,6 +327,7 @@ describe('node tree structure', () => {
     }
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<x-c>10</x-c><x-c>20</x-c>')
+    matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
       [-1, 'a:10'],
@@ -293,6 +344,7 @@ describe('node tree structure', () => {
       ],
     })
     expect(domHtml(elem)).toBe('<x-c>30</x-c><x-c>40</x-c><x-c>50</x-c><x-c>60</x-c><x-c>70</x-c>')
+    matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
       [-1, 'c:30'],
@@ -310,6 +362,7 @@ describe('node tree structure', () => {
       ],
     })
     expect(domHtml(elem)).toBe('<x-c>30</x-c><x-c>60</x-c><x-c>40</x-c><x-c>50</x-c><x-c>70</x-c>')
+    matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([[-3, 'b:60']])
     ops.length = 0
@@ -323,6 +376,7 @@ describe('node tree structure', () => {
       ],
     })
     expect(domHtml(elem)).toBe('<x-c>30</x-c><x-c>40</x-c><x-c>50</x-c><x-c>60</x-c><x-c>70</x-c>')
+    matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([[-3, 'a:40']])
     ops.length = 0
@@ -336,6 +390,7 @@ describe('node tree structure', () => {
       ],
     })
     expect(domHtml(elem)).toBe('<x-c>30</x-c><x-c>40</x-c><x-c>50</x-c><x-c>60</x-c><x-c>70</x-c>')
+    matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([])
     ops.length = 0
@@ -346,6 +401,7 @@ describe('node tree structure', () => {
       ],
     })
     expect(domHtml(elem)).toBe('<x-c>80</x-c><x-c>90</x-c>')
+    matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
       [-2, 'c:30'],
@@ -370,7 +426,7 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     expect(
       (elem.getShadowRoot()!.getElementById('a0')!.childNodes[0] as glassEasel.TextNode)
         .textContent,
@@ -441,9 +497,10 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<div><x-c>a</x-c></div><div><x-c>b</x-c></div>')
+    matchElementWithDom(elem)
     expect(ops).toEqual([
       [-1, 'a:10'],
       [-1, 'b:20'],
@@ -453,6 +510,7 @@ describe('node tree structure', () => {
       list: { a: 20, b: 10 },
     })
     expect(domHtml(elem)).toBe('<div><x-c>a</x-c></div><div><x-c>b</x-c></div>')
+    matchElementWithDom(elem)
     expect(ops).toEqual([])
     ops.length = 0
     elem.setData({
@@ -466,6 +524,7 @@ describe('node tree structure', () => {
     expect(domHtml(elem)).toBe(
       '<div><x-c>a</x-c></div><div><x-c>b</x-c></div><div><x-c>c</x-c></div><div><x-c>d</x-c></div>',
     )
+    matchElementWithDom(elem)
     expect(ops).toEqual([
       [-1, 'c:50'],
       [-1, 'd:60'],
@@ -475,6 +534,7 @@ describe('node tree structure', () => {
       list: { c: 50 },
     })
     expect(domHtml(elem)).toBe('<div><x-c>c</x-c></div>')
+    matchElementWithDom(elem)
     expect(ops).toEqual([
       [-2, 'b:40'],
       [-2, 'c:50'],
@@ -514,7 +574,7 @@ describe('node tree structure', () => {
         >,
       },
     })
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     const listBlock = elem.getShadowRoot()!.childNodes[0] as glassEasel.VirtualNode
     const checkIndex = () => {
       const keys = Object.keys(elem.data.list)
@@ -525,6 +585,7 @@ describe('node tree structure', () => {
     }
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<x-c>10</x-c><x-c>20</x-c>')
+    matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
       [-1, 'a:10'],
@@ -544,6 +605,7 @@ describe('node tree structure', () => {
     expect(domHtml(elem)).toBe(
       '<x-c>30</x-c><x-c>40</x-c><x-c>50</x-c><x-c>60</x-c><x-c>70</x-c><x-c>80</x-c>',
     )
+    matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
       [-1, 'c:30'],
@@ -565,6 +627,7 @@ describe('node tree structure', () => {
     expect(domHtml(elem)).toBe(
       '<x-c>50</x-c><x-c>60</x-c><x-c>70</x-c><x-c>80</x-c><x-c>30</x-c><x-c>40</x-c>',
     )
+    matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
       [-2, 'c:30'],
@@ -583,6 +646,7 @@ describe('node tree structure', () => {
       },
     })
     expect(domHtml(elem)).toBe('<x-c>10</x-c><x-c>20</x-c><x-c>30</x-c><x-c>40</x-c><x-c>50</x-c>')
+    matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
       [-3, 'g:30'],
@@ -604,6 +668,7 @@ describe('node tree structure', () => {
     expect(domHtml(elem)).toBe(
       '<x-c>10</x-c><x-c>20</x-c><x-c>30</x-c><x-c>40</x-c><x-c>50</x-c><x-c>60</x-c><x-c>70</x-c>',
     )
+    matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
       [-3, 'a:40'],
@@ -625,6 +690,7 @@ describe('node tree structure', () => {
     expect(domHtml(elem)).toBe(
       '<x-c>60</x-c><x-c>50</x-c><x-c>40</x-c><x-c>30</x-c><x-c>20</x-c><x-c>10</x-c>',
     )
+    matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
       [-3, 'h:70'],
@@ -648,6 +714,7 @@ describe('node tree structure', () => {
     expect(domHtml(elem)).toBe(
       '<x-c>80</x-c><x-c>70</x-c><x-c>60</x-c><x-c>50</x-c><x-c>40</x-c><x-c>30</x-c><x-c>20</x-c><x-c>10</x-c>',
     )
+    matchElementWithDom(elem)
     checkIndex()
     expect(ops).toEqual([
       [-3, 'f:40'],
@@ -692,10 +759,11 @@ describe('node tree structure', () => {
       })
       .general()
     const elem = execWithWarn(1, () =>
-      glassEasel.Component.createWithContext('root', def, domBackend),
+      glassEasel.Component.createWithContext('root', def, testBackend),
     )
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<x-c>x</x-c>')
+    matchElementWithDom(elem)
     expect(ops).toEqual([[-1, 'x']])
     ops.length = 0
     execWithWarn(1, () => {
@@ -704,6 +772,7 @@ describe('node tree structure', () => {
       })
     })
     expect(domHtml(elem)).toBe('<x-c>a</x-c><x-c>b</x-c><x-c>c</x-c>')
+    matchElementWithDom(elem)
     expect(ops).toEqual([
       [-2, 'x'],
       [-1, 'a'],
@@ -717,6 +786,7 @@ describe('node tree structure', () => {
       })
     })
     expect(domHtml(elem)).toBe('<x-c>c</x-c><x-c>a</x-c><x-c>b</x-c>')
+    matchElementWithDom(elem)
     ops.length = 0
     execWithWarn(1, () => {
       elem.setData({
@@ -724,6 +794,7 @@ describe('node tree structure', () => {
       })
     })
     expect(domHtml(elem)).toBe('')
+    matchElementWithDom(elem)
     expect(ops).toEqual([
       [-2, 'c'],
       [-2, 'a'],
@@ -743,12 +814,53 @@ describe('node tree structure', () => {
       })
       .general()
     const elem = execWithWarn(1, () =>
-      glassEasel.Component.createWithContext('root', def, domBackend),
+      glassEasel.Component.createWithContext('root', def, testBackend),
     )
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<span>0</span><span>1</span><span>2</span>')
+    matchElementWithDom(elem)
     execWithWarn(1, () => elem.setData({ n: 2 }))
     expect(domHtml(elem)).toBe('<span>0</span><span>1</span>')
+    matchElementWithDom(elem)
+  })
+
+  test('slot inside for blocks', () => {
+    const x = glassEasel.registerElement({})
+    const def = glassEasel.registerElement({
+      using: { x },
+      template: tmpl(`
+        <x>
+          <block wx:for="{{n}}">
+            <s>{{item}}</s>
+          </block>
+        </x>
+      `),
+      data: { n: [0, 1, 2] },
+    })
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
+    glassEasel.Element.pretendAttached(elem)
+    expect(domHtml(elem)).toBe('<x><s>0</s><s>1</s><s>2</s></x>')
+    matchElementWithDom(elem)
+    elem.spliceArrayDataOnPath(['n'], 3, 0, [3, 4])
+    elem.applyDataUpdates()
+    expect(domHtml(elem)).toBe('<x><s>0</s><s>1</s><s>2</s><s>3</s><s>4</s></x>')
+    matchElementWithDom(elem)
+    elem.spliceArrayDataOnPath(['n'], 0, 0, [5, 6])
+    elem.applyDataUpdates()
+    expect(domHtml(elem)).toBe('<x><s>5</s><s>6</s><s>0</s><s>1</s><s>2</s><s>3</s><s>4</s></x>')
+    matchElementWithDom(elem)
+    elem.spliceArrayDataOnPath(['n'], 2, 3, [7, 8])
+    elem.applyDataUpdates()
+    expect(domHtml(elem)).toBe('<x><s>5</s><s>6</s><s>7</s><s>8</s><s>3</s><s>4</s></x>')
+    matchElementWithDom(elem)
+    elem.spliceArrayDataOnPath(['n'], 0, 3, [])
+    elem.applyDataUpdates()
+    expect(domHtml(elem)).toBe('<x><s>8</s><s>3</s><s>4</s></x>')
+    matchElementWithDom(elem)
+    elem.spliceArrayDataOnPath(['n'], 1, 2, [])
+    elem.applyDataUpdates()
+    expect(domHtml(elem)).toBe('<x><s>8</s></x>')
+    matchElementWithDom(elem)
   })
 
   test('template include', () => {
@@ -763,10 +875,12 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     expect(domHtml(elem)).toBe('<div>123</div>')
+    matchElementWithDom(elem)
     elem.setData({ a: 456 })
     expect(domHtml(elem)).toBe('<div>456</div>')
+    matchElementWithDom(elem)
   })
 
   test('template undefined include', () => {
@@ -780,8 +894,9 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     expect(domHtml(elem)).toBe('<div></div>')
+    matchElementWithDom(elem)
   })
 
   test('template-name data', () => {
@@ -809,10 +924,12 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     expect(domHtml(elem)).toBe('<div><span>0:123</span><span>2:789</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ 'arr[0].shown': false })
     expect(domHtml(elem)).toBe('<div><span>2:789</span></div>')
+    matchElementWithDom(elem)
     elem.setData({
       arr: [
         { shown: false, data: 789 },
@@ -820,6 +937,7 @@ describe('node tree structure', () => {
       ],
     })
     expect(domHtml(elem)).toBe('<div><span>1:456</span></div>')
+    matchElementWithDom(elem)
   })
 
   test('template-name data shortcut', () => {
@@ -849,12 +967,15 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     expect(domHtml(elem)).toBe('<div><span>123</span></div><div><span>123</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ obj: { a: 456 } })
     expect(domHtml(elem)).toBe('<div><span>456</span></div><div><span>456</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ 'obj.a': 789 })
     expect(domHtml(elem)).toBe('<div><span>789</span></div><div><span>789</span></div>')
+    matchElementWithDom(elem)
   })
 
   test('template-name data cascaded passing', () => {
@@ -876,12 +997,15 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     expect(domHtml(elem)).toBe('<div><span>123</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ obj: { a: 456 } })
     expect(domHtml(elem)).toBe('<div><span>456</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ 'obj.a': 789 })
     expect(domHtml(elem)).toBe('<div><span>789</span></div>')
+    matchElementWithDom(elem)
   })
 
   test('static template-is', () => {
@@ -902,14 +1026,18 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     expect(domHtml(elem)).toBe('<div><span>345</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ b: { a: 200, d: 7 } })
     expect(domHtml(elem)).toBe('<div><span>247</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ 'b.a': 100 })
     expect(domHtml(elem)).toBe('<div><span>147</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ 'b.hidden': true })
     expect(domHtml(elem)).toBe('<div></div>')
+    matchElementWithDom(elem)
   })
 
   test('dynamic template-is', () => {
@@ -935,16 +1063,21 @@ describe('node tree structure', () => {
         methods: {},
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     expect(domHtml(elem)).toBe('<div></div>')
+    matchElementWithDom(elem)
     elem.setData({ childType: 'A' })
     expect(domHtml(elem)).toBe('<div><span>123</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ childType: 'B' })
     expect(domHtml(elem)).toBe('<div><span>456</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ a: 0 })
     expect(domHtml(elem)).toBe('<div><span>456</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ b: 789 })
     expect(domHtml(elem)).toBe('<div><span>789</span></div>')
+    matchElementWithDom(elem)
   })
 
   test('template-is inside for block', () => {
@@ -972,16 +1105,21 @@ describe('node tree structure', () => {
         methods: {},
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     expect(domHtml(elem)).toBe('<div></div>')
+    matchElementWithDom(elem)
     elem.setData({ list: [1, 2] })
     expect(domHtml(elem)).toBe('<div><span>0:123</span><span>1:456</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ list: [2, 1, 1] })
     expect(domHtml(elem)).toBe('<div><span>0:456</span><span>1:123</span><span>2:123</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ a: 0 })
     expect(domHtml(elem)).toBe('<div><span>0:456</span><span>1:0</span><span>2:0</span></div>')
+    matchElementWithDom(elem)
     elem.setData({ b: 789 })
     expect(domHtml(elem)).toBe('<div><span>0:789</span><span>1:0</span><span>2:0</span></div>')
+    matchElementWithDom(elem)
   })
 
   test('undefined template-is', () => {
@@ -997,8 +1135,9 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     expect(domHtml(elem)).toBe('<div></div>')
+    matchElementWithDom(elem)
   })
 
   test('cascaded template', () => {
@@ -1028,11 +1167,13 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend).asInstanceOf(def)!
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend).asInstanceOf(def)!
     expect(domHtml(elem)).toBe('<div>key: A</div><div>value: a</div>')
+    matchElementWithDom(elem)
 
     elem.setData({ 'c.i': 'B' })
     expect(domHtml(elem)).toBe('<div>key: B</div><div>value: b</div>')
+    matchElementWithDom(elem)
   })
 
   test('custom scripts', () => {
@@ -1055,8 +1196,9 @@ describe('node tree structure', () => {
         data: {},
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend).asInstanceOf(def)!
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend).asInstanceOf(def)!
     expect(domHtml(elem)).toBe('<div>6</div>')
+    matchElementWithDom(elem)
   })
 
   test('custom inline scripts', () => {
@@ -1076,8 +1218,9 @@ describe('node tree structure', () => {
         data: {},
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend).asInstanceOf(def)!
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend).asInstanceOf(def)!
     expect(domHtml(elem)).toBe('<div>6</div>')
+    matchElementWithDom(elem)
   })
 
   test('custom scripts across files', () => {
@@ -1104,8 +1247,28 @@ describe('node tree structure', () => {
         data: {},
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend).asInstanceOf(def)!
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend).asInstanceOf(def)!
     expect(domHtml(elem)).toBe('<div>-1 3</div>')
+    matchElementWithDom(elem)
+  })
+
+  test('custom scripts with template', () => {
+    const def = glassEasel
+      .registerElement({
+        template: tmpl(`
+          <wxs module="a">module.exports={ foo: 'foo' }</wxs>
+          <template name="test">
+            <div>{{a.foo}}</div>
+          </template>
+          <template is="test" data="{{ a: { foo: 'bar' } }}" />
+          <div>{{a.foo}}</div>
+        `),
+        data: {},
+      })
+      .general()
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend).asInstanceOf(def)!
+    expect(domHtml(elem)).toBe('<div>foo</div><div>foo</div>')
+    matchElementWithDom(elem)
   })
 
   test('block slot', () => {
@@ -1134,7 +1297,7 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<child-comp><div>123</div></child-comp>')
     matchElementWithDom(elem)
@@ -1153,9 +1316,10 @@ describe('node tree structure', () => {
         `),
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<div></div>')
+    matchElementWithDom(elem)
   })
 
   test('dataset name cases', () => {
@@ -1166,9 +1330,10 @@ describe('node tree structure', () => {
         `),
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<div></div>')
+    matchElementWithDom(elem)
     expect(elem.getShadowRoot()!.childNodes[0]!.asElement()!.dataset.camelcase).toBe(123)
   })
 
@@ -1180,9 +1345,43 @@ describe('node tree structure', () => {
         `),
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<div hidden=""></div>')
+    matchElementWithDom(elem)
+  })
+
+  test('attribute types', () => {
+    const def = glassEasel
+      .registerElement({
+        template: tmpl(`
+          <div
+            a="{{true}}"
+            b="{{false}}"
+            c="{{null}}"
+            d="{{undefined}}"
+            e="{{arr}}"
+            f="{{obj}}"
+            g="{{0}}"
+            h="{{NaN}}"
+            i="{{infinity}}"
+            j
+          ></div>
+        `),
+        data: {
+          arr: [],
+          obj: {},
+          NaN,
+          infinity: Infinity,
+        },
+      })
+      .general()
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
+    glassEasel.Element.pretendAttached(elem)
+    expect(domHtml(elem)).toBe(
+      '<div a="" c="" d="" e="" f="[object Object]" g="0" h="NaN" i="Infinity" j=""></div>',
+    )
+    matchElementWithDom(elem)
   })
 
   test('property name cases', () => {
@@ -1201,7 +1400,7 @@ describe('node tree structure', () => {
         `),
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(elem.getShadowRoot()!.childNodes[0]!.asInstanceOf(subComp)!.data.propName).toBe('abc')
   })
@@ -1218,14 +1417,16 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<a href="abc"></a>')
+    matchElementWithDom(elem)
     elem.setData({
       hidden: true,
       url: '',
     })
     expect(domHtml(elem)).toBe('<a href="" hidden=""></a>')
+    matchElementWithDom(elem)
   })
 
   test('setting element id', () => {
@@ -1239,9 +1440,10 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<div>123</div>')
+    matchElementWithDom(elem)
     expect(domHtml(elem.getShadowRoot()!.getElementById('abc')!)).toBe('123')
     elem.setData({
       d: 'def',
@@ -1272,7 +1474,7 @@ describe('node tree structure', () => {
       `),
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<sub-comp><div></div><span></span></sub-comp>')
     matchElementWithDom(elem)
@@ -1316,7 +1518,7 @@ describe('node tree structure', () => {
       `),
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     const subElem = (elem.$.sub as glassEasel.GeneralComponent).asInstanceOf(subComp)!
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<sub-comp><a></a><b></b><c><s></s></c></sub-comp>')
@@ -1378,9 +1580,10 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<div><span></span></div>')
+    matchElementWithDom(elem)
     const child = elem.getShadowRoot()!.getElementById('child')!
     child.triggerEvent('customEv')
     const ev = ops.shift() as glassEasel.ShadowedEvent<any>
@@ -1410,7 +1613,7 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     const child = elem.getShadowRoot()!.getElementById('child')!
     child.triggerEvent('customEv')
@@ -1430,9 +1633,94 @@ describe('node tree structure', () => {
     ops = []
   })
 
-  test('setting external classes', () => {
+  test('setting properties', () => {
+    const cs = new glassEasel.ComponentSpace()
+    const subComp = cs.defineComponent({
+      template: tmpl(`
+        <div class="{{style}} a-{{propA + 1}}"></div>
+      `),
+      properties: {
+        style: String,
+        propA: Number,
+      },
+    })
+    const def = cs
+      .defineComponent({
+        using: {
+          'sub-comp': subComp.general(),
+        },
+        template: tmpl(`
+          <sub-comp style="abc" prop-a="3" />
+        `),
+      })
+      .general()
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
+    glassEasel.Element.pretendAttached(elem)
+    expect(domHtml(elem)).toBe('<sub-comp><div class="abc a-4"></div></sub-comp>')
+    matchElementWithDom(elem)
+  })
+
+  test('setting array as classNames', () => {
     const cs = new glassEasel.ComponentSpace()
     const ssm = cs.styleScopeManager
+    const subComp = cs.defineComponent({
+      externalClasses: ['ext-class'],
+      template: tmpl(`
+        <div class="inner ext-class"></div>
+      `),
+    })
+    const def = cs
+      .defineComponent({
+        options: {
+          styleScope: ssm.register('p'),
+        },
+        using: {
+          'sub-comp': subComp.general(),
+        },
+        data: () => ({
+          classes: 'static',
+          extClass: 'a-class',
+        }),
+        template: tmpl(`
+        <sub-comp class="{{classes}}" ext-class="{{extClass}}" />
+      `),
+      })
+      .general()
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
+    glassEasel.Element.pretendAttached(elem)
+    expect(domHtml(elem)).toBe(
+      '<sub-comp class="p--static"><div class="inner p--a-class"></div></sub-comp>',
+    )
+    matchElementWithDom(elem)
+    elem.setData({
+      classes: ['static', 'dynamic'],
+    })
+    expect(domHtml(elem)).toBe(
+      '<sub-comp class="p--static p--dynamic"><div class="inner p--a-class"></div></sub-comp>',
+    )
+    matchElementWithDom(elem)
+    elem.setData({
+      classes: '',
+      extClass: ['a-class', 'dynamic'],
+    })
+    expect(domHtml(elem)).toBe(
+      '<sub-comp class=""><div class="inner p--a-class p--dynamic"></div></sub-comp>',
+    )
+    matchElementWithDom(elem)
+    elem.setData({
+      extClass: 'static',
+    })
+    expect(domHtml(elem)).toBe('<sub-comp class=""><div class="inner p--static"></div></sub-comp>')
+    matchElementWithDom(elem)
+  })
+
+  test('setting external classes', () => {
+    const cs = new glassEasel.ComponentSpace(
+      undefined,
+      undefined,
+      glassEasel.getDefaultComponentSpace().styleScopeManager,
+    )
+    const ssm = cs.styleScopeManager
     const subComp = cs.defineComponent({
       externalClasses: ['class', 'ext-class'],
       template: tmpl(`
@@ -1455,23 +1743,93 @@ describe('node tree structure', () => {
       `),
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe(
       '<sub-comp class="p--static"><div class="p--static p--a-class"></div></sub-comp>',
     )
+    matchElementWithDom(elem)
     elem.setData({
       dynamic: 'dynamic',
     })
     expect(domHtml(elem)).toBe(
-      '<sub-comp class="p--static p--dynamic"><div class="p--static p--dynamic p--a-class"></div></sub-comp>',
+      '<sub-comp class="p--static p--dynamic"><div class="p--static p--a-class p--dynamic"></div></sub-comp>',
     )
+    matchElementWithDom(elem)
     elem.setData({
       dynamic: '',
     })
     expect(domHtml(elem)).toBe(
       '<sub-comp class="p--static"><div class="p--static p--a-class"></div></sub-comp>',
     )
+    matchElementWithDom(elem)
+  })
+
+  test('setting nested external classes', () => {
+    const cs = new glassEasel.ComponentSpace(
+      undefined,
+      undefined,
+      glassEasel.getDefaultComponentSpace().styleScopeManager,
+    )
+    const ssm = cs.styleScopeManager
+    const subComp = cs.defineComponent({
+      externalClasses: ['class', 'ext-class'],
+      template: tmpl(`
+        <div class="class ext-class"></div>
+      `),
+    })
+    const def = cs
+      .defineComponent({
+        options: {
+          styleScope: ssm.register('p'),
+        },
+        using: {
+          sub: subComp.general(),
+        },
+        properties: {
+          dynamic: String,
+        },
+        externalClasses: ['a-class'],
+        template: tmpl(`
+          <sub class="static {{ dynamic || '' }}" ext-class="a-class" />
+        `),
+      })
+      .general()
+    const parent = cs.defineComponent({
+      options: {
+        styleScope: ssm.register('pp'),
+        extraStyleScope: glassEasel.StyleScopeManager.globalScope(),
+      },
+      using: {
+        def,
+      },
+      data: {
+        dynamic1: '',
+        dynamic2: '',
+      },
+      template: tmpl(`<def dynamic="{{dynamic1}}" a-class="root {{dynamic2}}" />`),
+    })
+    const elem = glassEasel.Component.createWithContext('root', parent, testBackend)
+    glassEasel.Element.pretendAttached(elem)
+    expect(domHtml(elem)).toBe(
+      '<def><sub class="p--static"><div class="p--static root pp--root"></div></sub></def>',
+    )
+    matchElementWithDom(elem)
+    elem.setData({
+      dynamic1: 'dynamic',
+    })
+    expect(domHtml(elem)).toBe(
+      '<def><sub class="p--static p--dynamic"><div class="p--static root pp--root p--dynamic"></div></sub></def>',
+    )
+    matchElementWithDom(elem)
+    elem.setData({
+      dynamic1: '',
+      dynamic2: 'dynamic',
+    })
+    expect(domHtml(elem)).toBe(
+      '<def><sub class="p--static"><div class="p--static root pp--root dynamic pp--dynamic"></div></sub></def>',
+    )
+    matchElementWithDom(elem)
   })
 
   test('pass object to child components', () => {
@@ -1506,9 +1864,10 @@ describe('node tree structure', () => {
         },
       })
       .general()
-    const elem = glassEasel.Component.createWithContext('root', def, domBackend)
+    const elem = glassEasel.Component.createWithContext('root', def, testBackend)
     glassEasel.Element.pretendAttached(elem)
     expect(domHtml(elem)).toBe('<sub-comp><div class="a1"></div></sub-comp>')
+    matchElementWithDom(elem)
     expect(ops).toBe(1)
     elem.setData({
       'obj.b': 'b1',
@@ -1522,6 +1881,90 @@ describe('node tree structure', () => {
       obj: { a: 'a2' },
     })
     expect(domHtml(elem)).toBe('<sub-comp><div class="a2"></div></sub-comp>')
+    matchElementWithDom(elem)
     expect(ops).toBe(3)
   })
-})
+
+  test('recursive component', () => {
+    const cs = new glassEasel.ComponentSpace()
+    cs.updateComponentOptions({
+      writeFieldsToNode: false,
+    })
+    type INode = {
+      className: string
+      childNodes: INode[]
+      before?: string
+      after?: string
+    }
+    const Node = cs
+      .define('node')
+      .options({
+        virtualHost: true,
+        dataDeepCopy: glassEasel.DeepCopyKind.None,
+        propertyPassingDeepCopy: glassEasel.DeepCopyKind.None,
+      })
+      .property('childNodes', {
+        type: Array,
+        default: () => [] as INode[],
+      })
+      .externalClasses(['class'])
+      .template(
+        tmpl(`
+          <div class="class">
+            <block wx:for="{{childNodes}}">
+              <block wx:if="{{item.before}}">{{item.before}}</block>
+              <node child-nodes="{{item.childNodes}}" class="{{item.className}}" />
+              <block wx:if="{{item.after}}">{{item.after}}</block>
+            </block>
+          </div>
+        `),
+      )
+      .registerComponent()
+    cs.setGlobalUsingComponent('node', Node.general())
+    const Parent = cs
+      .define()
+      .usingComponents({ node: Node })
+      .options({
+        dataDeepCopy: glassEasel.DeepCopyKind.None,
+        propertyPassingDeepCopy: glassEasel.DeepCopyKind.None,
+      })
+      .template(
+        tmpl(`
+          <node child-nodes="{{node.childNodes}}" class="{{node.className}}" />
+        `),
+      )
+      .data(() => ({
+        node: {
+          className: 'root',
+          childNodes: [
+            {
+              className: 'c1',
+              childNodes: [
+                {
+                  className: 'c11',
+                  childNodes: [],
+                  before: '[',
+                  after: ']',
+                },
+              ],
+            },
+            {
+              className: 'c2',
+              childNodes: [],
+            },
+          ],
+        } satisfies INode,
+      }))
+      .registerComponent()
+    const elem = glassEasel.Component.createWithContext('root', Parent, testBackend)
+    glassEasel.Element.pretendAttached(elem)
+    expect(domHtml(elem)).toBe(
+      '<div class="root"><div class="c1">[<div class="c11"></div>]</div><div class="c2"></div></div>',
+    )
+    matchElementWithDom(elem)
+  })
+}
+
+describe('node tree structure (DOM backend)', () => testCases(domBackend))
+describe('node tree structure (shadow backend)', () => testCases(shadowBackend))
+describe('node tree structure (composed backend)', () => testCases(composedBackend))