test: add test cases for dynamic add observer

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

@@ -0,0 +1,179 @@
+import { tmpl, composedBackend, domBackend, shadowBackend } from '../base/env'
+import * as glassEasel from '../../src'
+
+const testCases = (testBackend: glassEasel.GeneralBackendContext) => {
+  const componentSpace = new glassEasel.ComponentSpace()
+  componentSpace.updateComponentOptions({
+    writeFieldsToNode: true,
+    writeIdToDOM: true,
+  })
+  componentSpace.defineComponent({
+    is: '',
+  })
+
+  it('dynamic add lifetime listener', () => {
+    let actionOrder: number[] = []
+
+    const Comp = componentSpace.defineComponent({
+      options: {
+        listenerChangeLifetimes: true,
+      },
+      lifetimes: {
+        listenerChange() {
+          actionOrder.push(1)
+        },
+      },
+    })
+
+    const elem = glassEasel.Component.createWithContext('root', Comp, domBackend).general()
+    const elem2 = glassEasel.Component.createWithContext('root', Comp, domBackend).general()
+
+    elem.addListener('custom', () => {})
+    expect(actionOrder).toStrictEqual([1])
+    actionOrder = []
+
+    const onListenerChange = () => {
+      actionOrder.push(2)
+    }
+    elem.addLifetimeListener('listenerChange', onListenerChange)
+    elem.addListener('custom1', () => {})
+    expect(actionOrder).toStrictEqual([1, 2])
+    actionOrder = []
+
+    elem2.addListener('custom', () => {})
+    expect(actionOrder).toStrictEqual([1])
+    actionOrder = []
+
+    elem.removeLifetimeListener('listenerChange', onListenerChange)
+    elem.addListener('custom2', () => {})
+    expect(actionOrder).toStrictEqual([1])
+    actionOrder = []
+
+    elem.addLifetimeListener('attached', () => {
+      actionOrder.push(3)
+    })
+    glassEasel.Component.pretendAttached(elem)
+    expect(actionOrder).toStrictEqual([3])
+    actionOrder = []
+  })
+
+  it('dynamic add page lifetime listener', () => {
+    let showCallResArr: [string, unknown][] = []
+    let hideCallResArr: [string, unknown][] = []
+
+    const A = componentSpace.defineComponent({
+      template: tmpl('<div><slot></div>'),
+      pageLifetimes: {
+        show(args) {
+          showCallResArr.push(['pa', args])
+        },
+      },
+    })
+    const D = componentSpace.defineComponent({
+      template: tmpl('<div></div>'),
+      pageLifetimes: {
+        show(args) {
+          showCallResArr.push(['pd', args])
+        },
+      },
+    })
+    const B = componentSpace.defineComponent({
+      using: { A, D },
+      template: tmpl('<div><A id="a"><D id="d"></D></A></div>'),
+      pageLifetimes: {
+        show(args) {
+          showCallResArr.push(['pb', args])
+        },
+        hide(args) {
+          hideCallResArr.push(['pb', args])
+        },
+      },
+    })
+    const C = componentSpace.defineComponent({
+      using: { A, B },
+      template: tmpl('<div><A id="a"></A><B id="b"></B></div>'),
+      pageLifetimes: {
+        show(args) {
+          showCallResArr.push(['pc', args])
+        },
+        hide(args) {
+          hideCallResArr.push(['pc', args])
+        },
+      },
+    })
+    const elemC = glassEasel.Component.createWithContext('root', C, testBackend)
+    const elemB = elemC.$.b as glassEasel.GeneralComponent
+    const elemA1 = elemC.$.a as glassEasel.GeneralComponent
+    const elemA2 = elemB.$.a as glassEasel.GeneralComponent
+    const elemD = elemB.$.d as glassEasel.GeneralComponent
+
+    elemC.triggerPageLifetime('show', [{ showProp: 'showValue' }])
+    expect(showCallResArr.length).toBe(5)
+    expect(showCallResArr).toStrictEqual([
+      ['pc', { showProp: 'showValue' }],
+      ['pa', { showProp: 'showValue' }],
+      ['pb', { showProp: 'showValue' }],
+      ['pa', { showProp: 'showValue' }],
+      ['pd', { showProp: 'showValue' }],
+    ])
+    showCallResArr = []
+
+    elemC.addPageLifetimeListener('show', (args) => {
+      showCallResArr.push(['dpc', args])
+    })
+    const onShowA1 = (args: unknown) => {
+      showCallResArr.push(['dpa1', args])
+    }
+    elemA1.addPageLifetimeListener('show', onShowA1)
+
+    elemC.triggerPageLifetime('show', [{ showProp: 'showValue' }])
+    expect(showCallResArr.length).toBe(7)
+    expect(showCallResArr).toStrictEqual([
+      ['pc', { showProp: 'showValue' }],
+      ['dpc', { showProp: 'showValue' }],
+      ['pa', { showProp: 'showValue' }],
+      ['dpa1', { showProp: 'showValue' }],
+      ['pb', { showProp: 'showValue' }],
+      ['pa', { showProp: 'showValue' }],
+      ['pd', { showProp: 'showValue' }],
+    ])
+    showCallResArr = []
+
+    elemA1.removePageLifetimeListener('show', onShowA1)
+    elemC.triggerPageLifetime('show', [{ showProp: 'showValue' }])
+    expect(showCallResArr.length).toBe(6)
+    expect(showCallResArr).toStrictEqual([
+      ['pc', { showProp: 'showValue' }],
+      ['dpc', { showProp: 'showValue' }],
+      ['pa', { showProp: 'showValue' }],
+      ['pb', { showProp: 'showValue' }],
+      ['pa', { showProp: 'showValue' }],
+      ['pd', { showProp: 'showValue' }],
+    ])
+    showCallResArr = []
+
+    elemB.triggerPageLifetime('hide', [{ hideProp: 'hideValue' }])
+    expect(hideCallResArr.length).toBe(1)
+    expect(hideCallResArr).toStrictEqual([['pb', { hideProp: 'hideValue' }]])
+    hideCallResArr = []
+
+    elemA2.addPageLifetimeListener('hide', (args) => {
+      hideCallResArr.push(['dpa2', args])
+    })
+    elemD.addPageLifetimeListener('hide', (args) => {
+      hideCallResArr.push(['dpd', args])
+    })
+    elemB.triggerPageLifetime('hide', [{ hideProp: 'hideValue' }])
+    expect(hideCallResArr.length).toBe(3)
+    expect(hideCallResArr).toStrictEqual([
+      ['pb', { hideProp: 'hideValue' }],
+      ['dpa2', { hideProp: 'hideValue' }],
+      ['dpd', { hideProp: 'hideValue' }],
+    ])
+    hideCallResArr = []
+  })
+}
+
+describe('placeholder (DOM backend)', () => testCases(domBackend))
+describe('placeholder (shadow backend)', () => testCases(shadowBackend))
+describe('placeholder (composed backend)', () => testCases(composedBackend))

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

@@ -0,0 +1,55 @@
+import { domBackend } from '../base/env'
+import * as glassEasel from '../../src'
+
+const componentSpace = new glassEasel.ComponentSpace()
+componentSpace.updateComponentOptions({
+  writeFieldsToNode: true,
+  writeIdToDOM: true,
+})
+componentSpace.defineComponent({
+  is: '',
+})
+
+describe('dynamic add observer', () => {
+  it('should trigger data observers', () => {
+    let actionOrder: number[] = []
+
+    const Comp = componentSpace.defineComponent({
+      observers: {
+        data1() {
+          actionOrder.push(1)
+        },
+      },
+    })
+
+    const elem = glassEasel.Component.createWithContext('root', Comp, domBackend).general()
+    const elem2 = glassEasel.Component.createWithContext('root', Comp, domBackend).general()
+
+    elem.setData({
+      data1: 1,
+      data2: 2,
+    })
+    expect(actionOrder).toStrictEqual([1])
+    actionOrder = []
+
+    elem.dynamicAddObserver(() => {
+      actionOrder.push(2)
+    }, 'data2')
+    elem.dynamicAddObserver(() => {
+      actionOrder.push(3)
+    }, '**')
+    elem.setData({
+      data1: 11,
+      data2: 22,
+    })
+    expect(actionOrder).toStrictEqual([1, 2, 3])
+    actionOrder = []
+
+    elem2.setData({
+      data1: 1,
+      data2: 2,
+    })
+    expect(actionOrder).toStrictEqual([1])
+    actionOrder = []
+  })
+})