test: change tests to meet :host requirements

glass-easel/tests/base/composed_backend.ts

@@ -286,6 +286,8 @@ abstract class Node implements glassEasel.composedBackend.Element {
       })
       const tagName = this.tagName.toLowerCase()
       ret.push(`<${tagName}`)
+      const is = this.__wxElement?.asGeneralComponent()?.is
+      if (typeof is === 'string') props.is = is
       if (this.id) props.id = this.getAttribute('id')!
       if (this._$style) props.style = this.getAttribute('style')!
       if (this._$classes) props.class = this.getAttribute('class')!

glass-easel/tests/base/shadow_backend.ts

@@ -398,6 +398,8 @@ abstract class Node implements glassEasel.backend.Element {
       })
       const tagName = this.tagName.toLowerCase()
       ret.push(`<${tagName}`)
+      const is = this.__wxElement?.asGeneralComponent()?.is
+      if (typeof is === 'string') props.is = is
       if (this.id) props.id = this.getAttribute('id')!
       if (this._$style) props.style = this.getAttribute('style')!
       if (this._$classes) props.class = this.getAttribute('class')!

glass-easel/tests/core/behavior.test.ts

@@ -135,7 +135,7 @@ describe('chaining-form interface', () => {
       )
       .registerComponent()
     const elem = glassEasel.Component.createWithContext('root', compDef, domBackend)
-    expect(domHtml(elem)).toBe('<child><div class="invalid a b"></div></child>')
+    expect(domHtml(elem)).toBe('<child is=""><div class="invalid a b"></div></child>')
   })
 
   test('chaining data and observers', () => {
@@ -579,7 +579,9 @@ describe('chaining-form interface', () => {
     const comp = glassEasel.Component.createWithContext('root', compDef, domBackend)
     glassEasel.Element.pretendAttached(comp)
     expect(eventArr).toStrictEqual([1, 2, 1, 2, 1, 2])
-    expect(domHtml(comp)).toBe('<parent><child>A</child><child>B</child><child>C</child></parent>')
+    expect(domHtml(comp)).toBe(
+      '<parent is="parent-comp"><child is="child-comp">A</child><child is="child-comp">B</child><child is="child-comp">C</child></parent>',
+    )
   })
 
   test('chaining filter', () => {

glass-easel/tests/core/data_update.test.ts

@@ -92,15 +92,15 @@ describe('partial update', () => {
     })
     const elem = glassEasel.Component.createWithContext('root', def, domBackend)
     glassEasel.Element.pretendAttached(elem)
-    expect(domHtml(elem)).toBe('<x-c>10</x-c><x-c>20</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">10</x-c><x-c is="">20</x-c>')
     expect(execArr).toStrictEqual(['B', 'A', 'B', 'A'])
     execArr = []
     ;(elem.data.list[0]!.v as any) = 30
     elem.setData({
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
       list: elem.data.list as any,
     })
-    expect(domHtml(elem)).toBe('<x-c>30</x-c><x-c>20</x-c>')
+    expect(domHtml(elem)).toBe('<x-c is="">30</x-c><x-c is="">20</x-c>')
     expect(execArr).toStrictEqual(['D', 'B', 'A', 'B'])
     execArr = []
     elem.setData({ list: [] })

glass-easel/tests/core/placeholder.test.ts

@@ -58,21 +58,21 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     const elem = glassEasel.Component.createWithContext('root', def.general(), testBackend)
     expect(listener).toHaveBeenCalledTimes(1)
     expect(listener).toHaveBeenNthCalledWith(1, false, 'placeholder/simple/child', elem)
-    expect(domHtml(elem)).toBe('<div><child><span></span></child></div>')
+    expect(domHtml(elem)).toBe('<div><child is=""><span></span></child></div>')
     matchElementWithDom(elem)
 
     componentSpace.defineComponent({
       is: 'placeholder/simple/child',
       template: tmpl('child<div><slot/></div>'),
     })
-    expect(domHtml(elem)).toBe('<div><child>child<div><span></span></div></child></div>')
+    expect(domHtml(elem)).toBe('<div><child is="placeholder/simple/child">child<div><span></span></div></child></div>')
     matchElementWithDom(elem)
 
     elem.setData({
       b: true,
     })
     expect(domHtml(elem)).toBe(
-      '<div><child>child<div><span></span></div></child><child-another id="b"></child-another></div>',
+      '<div><child is="placeholder/simple/child">child<div><span></span></div></child><child-another id="b"></child-another></div>',
     )
     matchElementWithDom(elem)
   })
@@ -95,7 +95,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       })
       .registerComponent()
     const elem = glassEasel.Component.createWithContext('root', def.general(), testBackend)
-    expect(domHtml(elem)).toBe('<child>test</child>')
+    expect(domHtml(elem)).toBe('<child is="view">test</child>')
     matchElementWithDom(elem)
   })
 
@@ -116,7 +116,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       })
       .registerComponent()
     const elem = glassEasel.Component.createWithContext('root', def.general(), testBackend)
-    expect(domHtml(elem)).toBe('<parent></parent>')
+    expect(domHtml(elem)).toBe('<parent is=""></parent>')
     matchElementWithDom(elem)
 
     componentSpace.groupRegister(() => {
@@ -131,7 +131,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       const childDef = componentSpace.define('child').template(tmpl('CHILD')).registerComponent()
       componentSpace.setGlobalUsingComponent('child', childDef)
     })
-    expect(domHtml(elem)).toBe('<parent><child>CHILD</child></parent>')
+    expect(domHtml(elem)).toBe('<parent is="parent"><child is="child">CHILD</child></parent>')
     matchElementWithDom(elem)
   })
 
@@ -164,18 +164,18 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     expect(listener).toHaveBeenCalledTimes(2)
     expect(listener).toHaveBeenNthCalledWith(1, true, 'child-pub', elem)
     expect(listener).toHaveBeenNthCalledWith(2, false, 'child', elem)
-    expect(domHtml(elem)).toBe('<child></child><child-private></child-private>')
+    expect(domHtml(elem)).toBe('<child is=""></child><child-private is=""></child-private>')
     matchElementWithDom(elem)
 
     extraCs.defineComponent({
       is: 'child',
       template: tmpl('A'),
     })
-    expect(domHtml(elem)).toBe('<child></child><child-private>A</child-private>')
+    expect(domHtml(elem)).toBe('<child is=""></child><child-private is="child">A</child-private>')
     matchElementWithDom(elem)
 
     extraCs.exportComponent('child-pub', 'child')
-    expect(domHtml(elem)).toBe('<child>A</child><child-private>A</child-private>')
+    expect(domHtml(elem)).toBe('<child is="child">A</child><child-private is="child">A</child-private>')
     matchElementWithDom(elem)
   })
 
@@ -218,7 +218,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       is: 'placeholder/simple/child',
       template: tmpl('<slot />B'),
     })
-    expect(domHtml(elem)).toBe('<child>AB</child>')
+    expect(domHtml(elem)).toBe('<child is="placeholder/simple/child">AB</child>')
     matchElementWithDom(elem)
   })
 
@@ -260,14 +260,14 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       },
       template: tmpl('<slot /><g>B</g>'),
     })
-    expect(domHtml(elem)).toBe('<child>A<span>B</span></child>')
+    expect(domHtml(elem)).toBe('<child is="placeholder/simple/child">A<span>B</span></child>')
     matchElementWithDom(elem)
 
     componentSpace.defineComponent({
       is: 'placeholder/simple/child-of-child',
       template: tmpl('<slot />C'),
     })
-    expect(domHtml(elem)).toBe('<child>A<g>BC</g></child>')
+    expect(domHtml(elem)).toBe('<child is="placeholder/simple/child">A<g is="placeholder/simple/child-of-child">BC</g></child>')
     matchElementWithDom(elem)
   })
 
@@ -321,14 +321,16 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       template: tmpl('{{ prop }}'),
     })
     const child = (elem.$.child as glassEasel.GeneralComponent).asInstanceOf(childDef)!
-    expect(domHtml(elem)).toBe('<child>new</child><span prop="1">0</span>')
+    expect(domHtml(elem)).toBe(
+      '<child is="placeholder/simple/child">new</child><span prop="1">0</span>',
+    )
     expect(child.data.prop).toBe('new')
 
     elem.setData({
       arr: ['1', '2'],
     })
 
-    expect(domHtml(elem)).toBe('<child>new</child><span prop="1">0</span><span prop="2">1</span>')
+    expect(domHtml(elem)).toBe('<child is="placeholder/simple/child">new</child><span prop="1">0</span><span prop="2">1</span>')
     matchElementWithDom(elem)
 
     const cDef = componentSpace.defineComponent({
@@ -340,7 +342,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     })
     const c0 = (elem.$['c-0'] as glassEasel.GeneralComponent).asInstanceOf(cDef)!
     const c1 = (elem.$['c-1'] as glassEasel.GeneralComponent).asInstanceOf(cDef)!
-    expect(domHtml(elem)).toBe('<child>new</child><c>1</c><c>2</c>')
+    expect(domHtml(elem)).toBe('<child is="placeholder/simple/child">new</child><c is="placeholder/simple/c">1</c><c is="placeholder/simple/c">2</c>')
     expect(c0.data.prop).toBe('1')
     expect(c0.dataset.index).toBe(0)
     expect(c1.data.prop).toBe('2')
@@ -404,7 +406,9 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
     expect(callOrder).toStrictEqual([1])
     glassEasel.Element.pretendAttached(elem)
     expect(callOrder).toStrictEqual([1, 2, 7])
-    expect(domHtml(elem)).toBe('<child><span>3<a></a></span></child>')
+    expect(domHtml(elem)).toBe(
+      '<child is=""><span>3<a is="placeholder/lifetime/a"></a></span></child>',
+    )
     matchElementWithDom(elem)
     callOrder.splice(0, 99)
 
@@ -430,7 +434,7 @@ const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
       },
     })
     expect(callOrder).toStrictEqual([4, 3, 5, 8])
-    expect(domHtml(elem)).toBe('<child><div>21</div></child>')
+    expect(domHtml(elem)).toBe('<child is="placeholder/lifetime/child"><div>21</div></child>')
     matchElementWithDom(elem)
   })