@knowark/componarkjs 1.13.4 → 1.14.1

package/lib/base/component/component.test.js

@@ -1,4 +1,5 @@
-import { jest } from '@jest/globals'
+import { it, mock } from 'node:test'
+import assert from 'node:assert/strict'
 import { Component } from './component.js'
 
 class MockComponent extends Component {
@@ -42,486 +43,864 @@ class MockContentComponent extends Component {
 }
 Component.define('mock-content-component', MockContentComponent)
 
-describe('Component', () => {
-  let container = null
-  let component = null
-  beforeEach(() => {
-    container = document.createElement('div')
-    container.innerHTML = '<mock-component code="XYZ123"></mock-component>'
-    component = container.querySelector('mock-component')
-    document.body.append(container)
-  })
+class AsyncLoadComponent extends Component {
+  async load () {
+    throw new Error('Async Load Error!')
+  }
+}
+Component.define('async-load-component', AsyncLoadComponent)
 
-  afterEach(() => {
-    container.remove()
-    container = null
-    component = null
-  })
+class SyncLoadComponent extends Component {
+  load () {
+    throw new Error('Sync Load Error!')
+  }
+}
+Component.define('sync-load-component', SyncLoadComponent)
 
-  it('can be instantiated', () => {
-    expect(component).toBeTruthy()
-  })
+class PlainLoadComponent extends Component {
+  load () {
+    return null
+  }
+}
+Component.define('plain-load-component', PlainLoadComponent)
 
-  it('has an stable public api', () => {
-    expect(typeof component.constructor.define).toEqual('function')
-    expect(typeof component.init).toEqual('function')
-    expect(typeof component.reflectedProperties).toEqual('function')
-    expect(typeof component.connectedCallback).toEqual('function')
-    expect(typeof component.render).toEqual('function')
-    expect(typeof component.load).toEqual('function')
-    expect(typeof component.select).toEqual('function')
-    expect(typeof component.selectAll).toEqual('function')
-    expect(typeof component.emit).toEqual('function')
-    expect(typeof component.content).toBeDefined()
-  })
+class StringLoadComponent extends Component {
+  load () {
+    throw 'String Load Error!'
+  }
+}
+Component.define('string-load-component', StringLoadComponent)
 
-  it('has an init method through which state is set', () => {
-    const response = component.init({ attribute: 'value' })
-    expect(response).toBe(component)
-  })
+class CleanupComponent extends Component {
+  init (context = {}) {
+    this.cleanupCalls = 0
+    return super.init(context)
+  }
 
-  it('can set its content via a property', () => {
-    component.content = '<p>Hello World</p>'
-    const paragraph = component.querySelector('p')
-    expect(component.content).toBe('<p>Hello World</p>')
-    expect(paragraph.outerHTML).toBe('<p>Hello World</p>')
-  })
+  render () {
+    return super.render()
+  }
+}
+Component.define('cleanup-component', CleanupComponent)
 
-  it('can have some of its attributes reflected as properties', () => {
-    expect(component.code).toBe('XYZ123')
-  })
-  it('has an asynchronous load method which is empty by default', async () => {
-    expect(await component.load()).toBeUndefined()
-  })
+class OptimizedListenerComponent extends Component {
+  init (context = {}) {
+    this.clicks = 0
+    return super.init(context)
+  }
 
-  it('sets its tag name as class when rendered', () => {
-    component.render()
-    expect(component.className).toEqual('mock-component')
-  })
+  render () {
+    if (!this.querySelector('button')) {
+      this.content = '<button listen on-click="onClick">Click me</button>'
+    }
+    return super.render()
+  }
 
-  it('keeps its previous classes after rendering', () => {
-    component.classList.add('custom-class')
-    component.classList.add('custom-class')
-    component.classList.add('special-class')
-    component.render()
-    expect(component.className).toEqual(
-      'mock-component custom-class special-class')
-  })
+  onClick () {
+    this.clicks += 1
+  }
+}
+Component.define('optimized-listener-component', OptimizedListenerComponent)
 
-  it('emits custom events', () => {
-    let detail = null
-    const handler = (event) => { detail = event.detail }
-    component.addEventListener('fire', handler)
+let container = null
+let component = null
 
-    component.emit('fire', { location: 'indoors' })
+const setup = () => {
+  document.body.innerHTML = ''
+  container = document.createElement('div')
+  container.innerHTML = '<mock-component code="XYZ123"></mock-component>'
+  component = container.querySelector('mock-component')
+  document.body.append(container)
+}
 
-    expect(detail).toEqual({ location: 'indoors' })
-  })
+it('can be instantiated', () => {
+  setup()
+  assert.ok(component)
+})
 
-  it('calls the load method on connectedCallback', async () => {
-    const component = /** @type {Component} */ (
-      document.createElement('mock-component'))
-    const initSpy = jest.spyOn(component, 'init')
-    const renderSpy = jest.spyOn(component, 'render')
-    const loadSpy = jest.spyOn(component, 'load')
+it('has an stable public api', () => {
+  setup()
+  assert.deepStrictEqual(typeof component.constructor.define, 'function')
+  assert.deepStrictEqual(typeof component.init, 'function')
+  assert.deepStrictEqual(typeof component.reflectedProperties, 'function')
+  assert.deepStrictEqual(typeof component.connectedCallback, 'function')
+  assert.deepStrictEqual(typeof component.render, 'function')
+  assert.deepStrictEqual(typeof component.load, 'function')
+  assert.deepStrictEqual(typeof component.select, 'function')
+  assert.deepStrictEqual(typeof component.selectAll, 'function')
+  assert.deepStrictEqual(typeof component.emit, 'function')
+  assert.notStrictEqual(typeof component.content, undefined)
+})
 
-    document.body.append(component)
+it('has an init method through which state is set', () => {
+  setup()
+  const response = component.init({ attribute: 'value' })
+  assert.strictEqual(response, component)
+})
 
-    expect(initSpy).toHaveBeenCalledTimes(1)
-    expect(renderSpy).toHaveBeenCalledTimes(1)
-    expect(loadSpy).toHaveBeenCalledTimes(1)
-  })
+it('can set its content via a property', () => {
+  setup()
+  component.content = '<p>Hello World</p>'
+  const paragraph = component.querySelector('p')
+  assert.strictEqual(component.content, '<p>Hello World</p>')
+  assert.strictEqual(paragraph.outerHTML, '<p>Hello World</p>')
+})
 
-  it('catches and re-raises connectedCallback errors', async () => {
-    expect.assertions(1)
-    const component = /** @type {Component} */ (
-      document.createElement('mock-component'))
-    const consoleError = console.error
-    console.error = jest.fn()
-    component.render = () => {
-      throw new Error('Render Error!')
-    }
+it('can have some of its attributes reflected as properties', () => {
+  setup()
+  assert.strictEqual(component.code, 'XYZ123')
+})
+it('has an asynchronous load method which is empty by default', async () => {
+  setup()
+  assert.strictEqual(await component.load(), undefined)
+})
 
-    try {
-      component.connectedCallback()
-    } catch (error) {
-      expect(error.message).toEqual('Render Error!')
-    }
+it('sets its tag name as class when rendered', () => {
+  setup()
+  component.render()
+  assert.deepStrictEqual(component.className, 'mock-component')
+})
 
-    console.error = consoleError
-  })
+it('keeps its previous classes after rendering', () => {
+  setup()
+  component.classList.add('custom-class')
+  component.classList.add('custom-class')
+  component.classList.add('special-class')
+  component.render()
+  assert.deepStrictEqual(component.className, 'mock-component custom-class special-class')
+})
 
-  it('selects the children matching a selector', () => {
-    container.innerHTML = `
-    <mock-component>
-      <div class="blue"></div>
-      <div class="red"></div>
-      <div class="red"></div>
-    </mock-component>
-    `
-    const component = container.querySelector('mock-component')
+it('emits custom events', () => {
+  setup()
+  let detail = null
+  const handler = (event) => { detail = event.detail }
+  component.addEventListener('fire', handler)
 
-    const blue = component.select('.blue')
-    expect(blue.tagName).toEqual('DIV')
+  component.emit('fire', { location: 'indoors' })
 
-    const red = component.selectAll('.red')
-    expect(red.length).toEqual(2)
-  })
+  assert.deepStrictEqual(detail, { location: 'indoors' })
+})
 
-  it('retrieves its slots through the slots method', () => {
-    container.innerHTML = `
-    <mock-component>
-      <div slot="header" class="header"></div>
-      <div class="body"></div>
-      <div class="aside"></div>
-      <div slot="footer" class="footer"></div>
-    </mock-component>
-    `
+it('calls the load method on connectedCallback', async () => {
+  setup()
+  const component = /** @type {Component} */ (
+    document.createElement('mock-component'))
+  const initSpy = mock.method(component, 'init')
+  const renderSpy = mock.method(component, 'render')
+  const loadSpy = mock.method(component, 'load')
+
+  document.body.append(component)
+
+  assert.strictEqual(initSpy.mock.calls.length, 1)
+  assert.strictEqual(renderSpy.mock.calls.length, 1)
+  assert.strictEqual(loadSpy.mock.calls.length, 1)
+  initSpy.mock.restore()
+  renderSpy.mock.restore()
+  loadSpy.mock.restore()
+})
+
+it('catches and re-raises connectedCallback errors', async () => {
+  setup()
+  const component = /** @type {Component} */ (
+    document.createElement('mock-component'))
+  const consoleErrorMock = mock.method(console, 'error', () => {})
+  let errorEvent = null
+  component.addEventListener('error', (event) => {
+    errorEvent = event
+  })
+  component.render = () => {
+    throw new Error('Render Error!')
+  }
+
+  try {
+    component.connectedCallback()
+  } catch (error) {
+    assert.deepStrictEqual(error.message, 'Render Error!')
+    assert.deepStrictEqual(errorEvent.detail.phase, 'init-render')
+    assert.deepStrictEqual(errorEvent.detail.component, 'MOCK-COMPONENT')
+  } finally {
+    consoleErrorMock.mock.restore()
+  }
+})
+
+  it('creates events without CustomEvent and keeps event details', () => {
+    setup()
     const component = container.querySelector('mock-component')
+  const previousCustomEvent = globalThis.CustomEvent
 
-    expect(component.slots).toEqual({
-      header: [component.select('.header')],
-      general: [component.select('.body'), component.select('.aside')],
-      footer: [component.select('.footer')]
+  try {
+    globalThis.CustomEvent = undefined
+    let detail = null
+    component.addEventListener('fallback-emit', (event) => {
+      detail = event.detail
     })
+
+    component.emit('fallback-emit', { ready: true })
+
+    assert.deepStrictEqual(detail, { ready: true })
+    } finally {
+      globalThis.CustomEvent = previousCustomEvent
+    }
   })
 
-  it('binds its properties to children events', async () => {
-    container.innerHTML = `
-    <mock-component>
-      <input type="text" listen on-input="{{ data.value = data }}"></input>
-    </mock-component>
-    `
+  it('creates events from the component global window Event fallback', () => {
+    setup()
+    const component = document.createElement('mock-component')
+    const previousGlobal = component.global
 
-    const component = container.querySelector('mock-component')
-    const input = component.select('input')
+    try {
+      component.global = {
+        document: {
+          defaultView: {
+            Event: globalThis.Event
+          }
+        }
+      }
 
-    input.dispatchEvent(
-      new globalThis.InputEvent('input', { bubbles: true, data: 'E' })
-    )
+      const event = component._createEvent('context-window-event', { ready: true })
 
-    expect(component.data.value).toEqual('E')
+      assert.deepStrictEqual(event.type, 'context-window-event')
+      assert.deepStrictEqual(event.detail.ready, true)
+      assert.deepStrictEqual(typeof event.stopPropagation, 'function')
+    } finally {
+      component.global = previousGlobal
+    }
   })
 
-  it('binds multiple handlers to the same event', async () => {
-    container.innerHTML = `
-    <mock-component>
-      <input type="text"
-        listen
-        on-input="{{ data.value = data }}"
-        on-input-1="{{ data.value1 = data }}"
-        on-input-2="{{ data.value2 = data }}"
-        on-input-3="{{ data.value3 = data }}"
-      ></input>
-    </mock-component>
-    `
+  it('creates events from globalThis CustomEvent when component global has no window objects', () => {
+    setup()
+    const component = document.createElement('mock-component')
 
-    const component = container.querySelector('mock-component')
-    const input = component.select('input')
+    component.global = {}
+    const event = component._createEvent('global-custom-event', { ready: true })
 
-    input.dispatchEvent(
-      new globalThis.InputEvent('input', { bubbles: true, data: 'E' })
-    )
+    assert.deepStrictEqual(event.type, 'global-custom-event')
+    assert.deepStrictEqual(event.detail.ready, true)
+    assert.deepStrictEqual(event instanceof globalThis.CustomEvent, true)
+  })
+
+  it('emits an error event when async load fails', async () => {
+    setup()
+    const component = document.createElement('async-load-component')
+  let errorEvent = null
 
-    expect(component.data.value).toEqual('E')
-    expect(component.data.value1).toEqual('E')
-    expect(component.data.value2).toEqual('E')
-    expect(component.data.value3).toEqual('E')
+  component.addEventListener('error', (event) => {
+    errorEvent = event
   })
 
-  it('binds to the target.value event property by default', async () => {
-    container.innerHTML = `
-    <mock-component>
-      <input type="text" listen on-input="{{ data.value }}"></input>
-    </mock-component>
-    `
-    const component = container.querySelector('mock-component')
-    const input = component.select('input')
-    const inputEvent = new globalThis.InputEvent('input')
-    const target = { name: 'input', value: 'X' }
-    Object.defineProperty(
-      inputEvent, 'target', { writable: false, value: target })
+  document.body.appendChild(component)
+
+  await new Promise(resolve => setTimeout(resolve, 0))
+
+  assert.ok(errorEvent)
+  assert.deepStrictEqual(errorEvent.detail.message, 'Async Load Error!')
+  assert.deepStrictEqual(errorEvent.detail.phase, 'load')
+  assert.deepStrictEqual(errorEvent.detail.component, 'ASYNC-LOAD-COMPONENT')
+})
 
-    input.dispatchEvent(inputEvent)
+it('emits an error event and throws when sync load fails', () => {
+  setup()
+  const component = document.createElement('sync-load-component')
+  let errorEvent = null
 
-    expect(component.data.value).toEqual('X')
+  component.addEventListener('error', (event) => {
+    errorEvent = event
   })
 
-  it('binds to the detail custom event property', async () => {
-    container.innerHTML = `
-    <mock-component>
-      <input type="text" listen on-alter="{{ data.value }}"></input>
-    </mock-component>
-    `
+  assert.throws(() => {
+    component.connectedCallback()
+  }, /Sync Load Error!/)
 
-    const component = container.querySelector('mock-component')
-    const input = component.select('input')
+  assert.ok(errorEvent)
+  assert.deepStrictEqual(errorEvent.detail.message, 'Sync Load Error!')
+  assert.deepStrictEqual(errorEvent.detail.phase, 'load')
+  assert.deepStrictEqual(errorEvent.detail.component, 'SYNC-LOAD-COMPONENT')
+})
 
-    input.dispatchEvent(
-      new globalThis.CustomEvent('alter', { bubbles: true, detail: 'A' }))
+it('coerces non-error load failures into errors with metadata', () => {
+  setup()
+  const component = document.createElement('string-load-component')
+  let errorEvent = null
 
-    expect(component.data.value).toEqual('A')
+  component.addEventListener('error', (event) => {
+    errorEvent = event
   })
 
-  it('performs basic transformations to event properties', async () => {
-    container.innerHTML = `
-    <mock-component>
-      <input type="text" listen on-alter="{{ data.value | number }}"></input>
-    </mock-component>
-    `
+  assert.throws(() => {
+    component.connectedCallback()
+  }, /String Load Error!/)
 
-    const component = container.querySelector('mock-component')
-    const input = component.select('input')
+  assert.ok(errorEvent)
+  assert.deepStrictEqual(errorEvent.detail.message, 'String Load Error!')
+  assert.deepStrictEqual(errorEvent.detail.phase, 'load')
+  assert.deepStrictEqual(errorEvent.detail.component, 'STRING-LOAD-COMPONENT')
+})
 
-    input.dispatchEvent(
-      new globalThis.CustomEvent('alter', { bubbles: true, detail: '777' }))
+it('creates resolve events without CustomEvent and still resolves', () => {
+  setup()
+  const component = document.createElement('mock-component')
+  const previousCustomEvent = globalThis.CustomEvent
 
-    expect(component.data.value).toEqual(777)
-  })
+  try {
+    globalThis.CustomEvent = undefined
+    let resource = null
+    component.addEventListener('resolve', (event) => {
+      resource = event.detail.resource
+    })
 
-  it('performs object assignment of event details', async () => {
-    container.innerHTML = `
-    <mock-component>
-      <input type="text" listen on-alter="{{ local | object }}"></input>
-    </mock-component>
-    `
+    const result = component.resolve('dependency')
 
-    const component = container.querySelector('mock-component')
-    const input = component.select('input')
+    assert.deepStrictEqual(resource, 'dependency')
+    assert.strictEqual(result, undefined)
+  } finally {
+    globalThis.CustomEvent = previousCustomEvent
+  }
+})
 
-    const detail = { name: 'Sprite', brand: 'Coca-Cola' }
-    input.dispatchEvent(
-      new globalThis.CustomEvent('alter', { bubbles: true, detail }))
+it('creates fallback events when neither CustomEvent nor Event are available', () => {
+  setup()
+  const component = document.createElement('mock-component')
+  const previousCustomEvent = globalThis.CustomEvent
+  const previousEvent = globalThis.Event
+
+  try {
+    globalThis.CustomEvent = undefined
+    globalThis.Event = undefined
+
+    component.global = {}
+    const event = component._createEvent('fallback', { ready: true })
+
+    assert.deepStrictEqual(event.type, 'fallback')
+    assert.deepStrictEqual(event.detail, { ready: true })
+    assert.deepStrictEqual(typeof event.stopPropagation, 'function')
+    assert.deepStrictEqual(typeof event.preventDefault, 'function')
+    assert.doesNotThrow(() => event.stopPropagation())
+    assert.doesNotThrow(() => event.preventDefault())
+  } finally {
+    globalThis.CustomEvent = previousCustomEvent
+    globalThis.Event = previousEvent
+  }
+})
 
-    expect(component.local).toEqual({ name: 'Sprite', brand: 'Coca-Cola' })
-  })
+it('falls back to globalThis when component global is missing', () => {
+  setup()
+  const component = document.createElement('mock-component')
+  const previousCustomEvent = globalThis.CustomEvent
 
-  it('performs nested object assignment of event details', async () => {
-    container.innerHTML = `
-    <mock-component>
-      <input type="text" listen on-alter="{{ local.zone | object }}"></input>
-    </mock-component>
-    `
+  try {
+    globalThis.CustomEvent = undefined
+    component.global = null
 
-    const component = container.querySelector('mock-component')
-    component.local.zone = {}
-    const input = component.select('input')
+    const event = component._createEvent('global-fallback', { ready: true })
 
-    const detail = { country: 'USA', city: 'Atlanta' }
-    input.dispatchEvent(
-      new globalThis.CustomEvent('alter', { bubbles: true, detail }))
+    assert.deepStrictEqual(event.type, 'global-fallback')
+    assert.deepStrictEqual(event.detail.ready, true)
+  } finally {
+    globalThis.CustomEvent = previousCustomEvent
+  }
+})
 
-    expect(component.local).toEqual({
-      zone: {
-        country: 'USA',
-        city: 'Atlanta' 
-      }
-    })
+it('registers and runs cleanup callbacks on disconnect', () => {
+  setup()
+  const component = document.createElement('cleanup-component')
+  container.appendChild(component)
+
+  let cleanupCalls = 0
+  component.registerCleanup(() => {
+    cleanupCalls += 1
+  })
+  component.registerCleanup(() => {
+    cleanupCalls += 1
   })
 
-  it('listens to events and handles them with its own methods', async () => {
-    container.innerHTML = `
-      <mock-component code="ABC123">
-        <input type="text" listen on-alter="customHandler"></input>
-      </mock-component>
-    `
+  component.disconnectedCallback()
 
-    const component = container.querySelector('mock-component')
-    const input = component.select('input')
+  assert.deepStrictEqual(cleanupCalls, 2)
+})
 
-    const event = new globalThis.CustomEvent(
-      'alter', { bubbles: true, detail: { code: [] } })
-    input.dispatchEvent(event)
+it('supports unregistering cleanup callbacks', () => {
+  setup()
+  const component = document.createElement('cleanup-component')
+  container.appendChild(component)
 
-    expect(event.detail.code).toEqual(['ABC123'])
+  let cleanupCalls = 0
+  const unregister = component.registerCleanup(() => {
+    cleanupCalls += 1
   })
+  unregister()
+  unregister()
 
-  it('listens to events and redirects them to target components', async () => {
-    container.innerHTML = `
-      <mock-component code="ABC123">
-        <input type="text" listen on-alter="customHandler@#child"></input>
-        <mock-component id="child" code="XYZ890"></mock-component>
-      </mock-component>
-    `
+  component.disconnectedCallback()
 
-    const component = container.querySelector('mock-component')
-    const input = component.select('input')
+  assert.deepStrictEqual(cleanupCalls, 0)
+})
 
-    const event = new globalThis.CustomEvent(
-      'alter', { bubbles: true, detail: { code: [] } })
-    input.dispatchEvent(event)
+it('supports disconnected init fast-path when local state is already set', () => {
+  setup()
+  const component = document.createElement('mock-component')
+  component.local = { preset: true }
+  const initSpy = mock.method(component, 'init')
+  container.appendChild(component)
 
-    expect(event.detail.code).toEqual(['XYZ890'])
-  })
+  assert.deepStrictEqual(initSpy.mock.calls.length, 0)
+  initSpy.mock.restore()
+})
 
-  it('does not launch and event if the target is not found', async () => {
-    container.innerHTML = `
-      <mock-component code="ABC123">
-        <input type="text" listen on-alter="customHandler@#missing"></input>
-        <mock-component id="child" code="XYZ890"></mock-component>
-      </mock-component>
-    `
+it('returns unchanged values when enhanced error details are absent', () => {
+  setup()
+  const component = document.createElement('cleanup-component')
 
-    const component = container.querySelector('mock-component')
-    const input = component.select('input')
+  const result = component._enhanceError(undefined, 'init-render')
+
+  assert.strictEqual(result, undefined)
+})
+
+it('accepts non-function cleanup callbacks as no-op registrations', () => {
+  setup()
+  const component = document.createElement('cleanup-component')
 
-    const event = new globalThis.CustomEvent(
-      'alter', { bubbles: true, detail: { code: [] } })
-    input.dispatchEvent(event)
+  const unregister = component.registerCleanup()
 
-    expect(event.detail.code).toEqual([])
+  assert.doesNotThrow(() => unregister())
+})
+
+it('emits an error event when a cleanup callback throws', () => {
+  setup()
+  const component = document.createElement('cleanup-component')
+  container.appendChild(component)
+  let errorEvent = null
+
+  component.addEventListener('error', (event) => {
+    errorEvent = event
+  })
+  component.registerCleanup(() => {
+    throw new Error('Cleanup failed')
   })
 
+  component.disconnectedCallback()
 
-  it('listens to clicks and redirects them to target components', async () => {
-    container.innerHTML = `
-      <mock-component code="ABC123">
-        <div type="text" listen on-click="customHandler@#child">
-          <button id="action">Action</button>
-        </div>
-        <mock-component id="child" code="XYZ890"></mock-component>
-      </mock-component>
-    `
+  assert.ok(errorEvent)
+  assert.deepStrictEqual(errorEvent.detail.message, 'Cleanup failed')
+  assert.deepStrictEqual(errorEvent.detail.phase, 'cleanup')
+  assert.deepStrictEqual(errorEvent.detail.component, 'CLEANUP-COMPONENT')
+})
 
-    const component = container.querySelector('mock-component')
-    const button = component.select('#action')
+it('supports load implementations that do not return promises', () => {
+  setup()
+  const component = document.createElement('plain-load-component')
+
+  assert.doesNotThrow(() => {
+    component.connectedCallback()
+  })
+})
 
-    const event = new globalThis.CustomEvent(
-      'click', { bubbles: true, detail: { code: [] } })
-    button.dispatchEvent(event)
+it('selects the children matching a selector', () => {
+  setup();
+  container.innerHTML = `
+  <mock-component>
+    <div class="blue"></div>
+    <div class="red"></div>
+    <div class="red"></div>
+  </mock-component>
+  `
+  const component = container.querySelector('mock-component')
+
+  const blue = component.select('.blue')
+  assert.deepStrictEqual(blue.tagName, 'DIV')
+
+  const red = component.selectAll('.red')
+  assert.deepStrictEqual(red.length, 2)
+})
 
-    expect(event.detail.code).toEqual(['XYZ890'])
+it('retrieves its slots through the slots method', () => {
+  setup();
+  container.innerHTML = `
+  <mock-component>
+    <div slot="header" class="header"></div>
+    <div class="body"></div>
+    <div class="aside"></div>
+    <div slot="footer" class="footer"></div>
+  </mock-component>
+  `
+  const component = container.querySelector('mock-component')
+
+  assert.deepStrictEqual(component.slots, {
+    header: [component.select('.header')],
+    general: [component.select('.body'), component.select('.aside')],
+    footer: [component.select('.footer')]
   })
+})
 
-  it('listens to events and pipes them to target components', async () => {
-    container.innerHTML = `
-      <mock-component code="ABC123">
-        <div type="text" listen on-change="replaceChildren%detail.name@#child">
-          <button id="action">Action</button>
-        </div>
-        <div id="child">
-          Hello
-        </div>
-      </mock-component>
-    `
-    const component = container.querySelector('mock-component')
-    const button = component.select('#action')
+it('binds its properties to children events', async () => {
+  setup();
+  container.innerHTML = `
+  <mock-component>
+    <input type="text" listen on-input="{{ data.value = data }}"></input>
+  </mock-component>
+  `
+
+  const component = container.querySelector('mock-component')
+  const input = component.select('input')
 
-    const event = new globalThis.CustomEvent(
-      'change', { bubbles: true, detail: { name: 'World' } })
-    button.dispatchEvent(event)
+  input.dispatchEvent(
+    new globalThis.InputEvent('input', { bubbles: true, data: 'E' })
+  )
 
-    const child = container.querySelector('#child')
-    expect(child.textContent.trim()).toEqual('World')
+  assert.deepStrictEqual(component.data.value, 'E')
+})
+
+it('binds multiple handlers to the same event', async () => {
+  setup();
+  container.innerHTML = `
+  <mock-component>
+    <input type="text"
+      listen
+      on-input="{{ data.value = data }}"
+      on-input-1="{{ data.value1 = data }}"
+      on-input-2="{{ data.value2 = data }}"
+      on-input-3="{{ data.value3 = data }}"
+    ></input>
+  </mock-component>
+  `
+
+  const component = container.querySelector('mock-component')
+  const input = component.select('input')
+
+  input.dispatchEvent(
+    new globalThis.InputEvent('input', { bubbles: true, data: 'E' })
+  )
+
+  assert.deepStrictEqual(component.data.value, 'E')
+  assert.deepStrictEqual(component.data.value1, 'E')
+  assert.deepStrictEqual(component.data.value2, 'E')
+  assert.deepStrictEqual(component.data.value3, 'E')
+})
+
+it('binds to the target.value event property by default', async () => {
+  setup()
+  container.innerHTML = `
+  <mock-component>
+    <input type="text" listen on-input="{{ data.value }}"></input>
+  </mock-component>
+  `
+  const component = container.querySelector('mock-component')
+  const input = component.select('input')
+  input.value = 'X'
+  const inputEvent = new globalThis.InputEvent('input', { bubbles: true })
+
+  input.dispatchEvent(inputEvent)
+
+  assert.deepStrictEqual(component.data.value, 'X')
+})
+
+it('binds to the detail custom event property', async () => {
+  setup();
+  container.innerHTML = `
+  <mock-component>
+    <input type="text" listen on-alter="{{ data.value }}"></input>
+  </mock-component>
+  `
+
+  const component = container.querySelector('mock-component')
+  const input = component.select('input')
+
+  input.dispatchEvent(
+    new globalThis.CustomEvent('alter', { bubbles: true, detail: 'A' }))
+
+  assert.deepStrictEqual(component.data.value, 'A')
+})
+
+it('performs basic transformations to event properties', async () => {
+  setup();
+  container.innerHTML = `
+  <mock-component>
+    <input type="text" listen on-alter="{{ data.value | number }}"></input>
+  </mock-component>
+  `
+
+  const component = container.querySelector('mock-component')
+  const input = component.select('input')
+
+  input.dispatchEvent(
+    new globalThis.CustomEvent('alter', { bubbles: true, detail: '777' }))
+
+  assert.deepStrictEqual(component.data.value, 777)
+})
+
+it('performs object assignment of event details', async () => {
+  setup();
+  container.innerHTML = `
+  <mock-component>
+    <input type="text" listen on-alter="{{ local | object }}"></input>
+  </mock-component>
+  `
+
+  const component = container.querySelector('mock-component')
+  const input = component.select('input')
+
+  const detail = { name: 'Sprite', brand: 'Coca-Cola' }
+  input.dispatchEvent(
+    new globalThis.CustomEvent('alter', { bubbles: true, detail }))
+
+  assert.deepStrictEqual(component.local, { name: 'Sprite', brand: 'Coca-Cola' })
+})
+
+it('performs nested object assignment of event details', async () => {
+  setup();
+  container.innerHTML = `
+  <mock-component>
+    <input type="text" listen on-alter="{{ local.zone | object }}"></input>
+  </mock-component>
+  `
+
+  const component = container.querySelector('mock-component')
+  component.local.zone = {}
+  const input = component.select('input')
+
+  const detail = { country: 'USA', city: 'Atlanta' }
+  input.dispatchEvent(
+    new globalThis.CustomEvent('alter', { bubbles: true, detail }))
+
+  assert.deepStrictEqual(component.local, {
+    zone: {
+      country: 'USA',
+      city: 'Atlanta' 
+    }
   })
+})
 
-  it('emits an error event on declared listeners', async () => {
-    container.innerHTML = `
-    <mock-component>
-      <input type="text" listen on-alter="erroringHandler"></input>
+it('listens to events and handles them with its own methods', async () => {
+  setup();
+  container.innerHTML = `
+    <mock-component code="ABC123">
+      <input type="text" listen on-alter="customHandler"></input>
     </mock-component>
-    `
+  `
 
-    const component = container.querySelector('mock-component')
+  const component = container.querySelector('mock-component')
+  const input = component.select('input')
+
+  const event = new globalThis.CustomEvent(
+    'alter', { bubbles: true, detail: { code: [] } })
+  input.dispatchEvent(event)
 
-    let errorEvent = {}
-    component.addEventListener('error', (event) => { errorEvent = event })
+  assert.deepStrictEqual(event.detail.code, ['ABC123'])
+})
 
-    const input = component.select('input')
+it('listens to events and redirects them to target components', async () => {
+  setup();
+  container.innerHTML = `
+    <mock-component code="ABC123">
+      <input type="text" listen on-alter="customHandler@#child"></input>
+      <mock-component id="child" code="XYZ890"></mock-component>
+    </mock-component>
+  `
 
-    input.dispatchEvent(
-      new globalThis.CustomEvent(
-        'alter', { bubbles: true, detail: 'I will error!' }
-      ))
+  const component = container.querySelector('mock-component')
+  const input = component.select('input')
 
-    expect(errorEvent.detail.message).toEqual('Something went wrong!')
-  })
+  const event = new globalThis.CustomEvent(
+    'alter', { bubbles: true, detail: { code: [] } })
+  input.dispatchEvent(event)
 
-  it('emits an error event on declared async listeners', async () => {
-    container.innerHTML = `
-    <mock-component>
-      <input type="text" listen on-alter="asyncErroringHandler"></input>
+  assert.deepStrictEqual(event.detail.code, ['XYZ890'])
+})
+
+it('does not launch and event if the target is not found', async () => {
+  setup();
+  container.innerHTML = `
+    <mock-component code="ABC123">
+      <input type="text" listen on-alter="customHandler@#missing"></input>
+      <mock-component id="child" code="XYZ890"></mock-component>
     </mock-component>
-    `
+  `
 
-    const component = container.querySelector('mock-component')
+  const component = container.querySelector('mock-component')
+  const input = component.select('input')
 
-    let errorEvent = {}
-    component.addEventListener('error', (event) => { errorEvent = event })
+  const event = new globalThis.CustomEvent(
+    'alter', { bubbles: true, detail: { code: [] } })
+  input.dispatchEvent(event)
 
-    const input = component.select('input')
+  assert.deepStrictEqual(event.detail.code, [])
+})
 
-    input.dispatchEvent(
-      new globalThis.CustomEvent(
-        'alter', { bubbles: true, detail: 'I will error!' }
-      ))
 
-    // Sleep
-    await new Promise(resolve => setTimeout(resolve, 0))
+it('listens to clicks and redirects them to target components', async () => {
+  setup();
+  container.innerHTML = `
+    <mock-component code="ABC123">
+      <div type="text" listen on-click="customHandler@#child">
+        <button id="action">Action</button>
+      </div>
+      <mock-component id="child" code="XYZ890"></mock-component>
+    </mock-component>
+  `
 
-    expect(errorEvent.detail.message).toEqual('Something went async wrong!')
-  })
+  const component = container.querySelector('mock-component')
+  const button = component.select('#action')
 
-  it('resolves its resource dependencies using events propagation', () => {
-    const listener = (event) => {
-      const resource = event.detail.resource
-      event.detail[resource] = 'RESOLVED_DEPENDENCY'
-    }
-    document.addEventListener('resolve', listener)
-    container.innerHTML = `
-    <mock-component></mock-component>
-    `
-    const component = container.querySelector('mock-component')
+  const event = new globalThis.CustomEvent(
+    'click', { bubbles: true, detail: { code: [] } })
+  button.dispatchEvent(event)
 
-    expect(component.dependency).toEqual('RESOLVED_DEPENDENCY')
-    document.removeEventListener('resolve', listener)
-  })
+  assert.deepStrictEqual(event.detail.code, ['XYZ890'])
+})
 
-  it('provides the dependencies requested to it by child components', () => {
-    class ParentComponent extends MockComponent {
-      provide (resource) {
-        if (resource === 'Dependency') {
-          return `RESOURCE: ${resource} PROVIDED BY: ${this.id}`
-        }
-        if (resource === 'state') return { key: 'value' }
+it('listens to events and pipes them to target components', async () => {
+  setup();
+  container.innerHTML = `
+    <mock-component code="ABC123">
+      <div type="text" listen on-change="replaceChildren%detail.name@#child">
+        <button id="action">Action</button>
+      </div>
+      <div id="child">
+        Hello
+      </div>
+    </mock-component>
+  `
+  const component = container.querySelector('mock-component')
+  const button = component.select('#action')
+
+  const event = new globalThis.CustomEvent(
+    'change', { bubbles: true, detail: { name: 'World' } })
+  button.dispatchEvent(event)
+
+  const child = container.querySelector('#child')
+  assert.deepStrictEqual(child.textContent.trim(), 'World')
+})
+
+it('emits an error event on declared listeners', async () => {
+  setup();
+  container.innerHTML = `
+  <mock-component>
+    <input type="text" listen on-alter="erroringHandler"></input>
+  </mock-component>
+  `
+
+  const component = container.querySelector('mock-component')
+
+  let errorEvent = {}
+  component.addEventListener('error', (event) => { errorEvent = event })
+
+  const input = component.select('input')
+
+  input.dispatchEvent(
+    new globalThis.CustomEvent(
+      'alter', { bubbles: true, detail: 'I will error!' }
+    ))
+
+  assert.deepStrictEqual(errorEvent.detail.message, 'Something went wrong!')
+})
+
+it('emits an error event on declared async listeners', async () => {
+  setup();
+  container.innerHTML = `
+  <mock-component>
+    <input type="text" listen on-alter="asyncErroringHandler"></input>
+  </mock-component>
+  `
+
+  const component = container.querySelector('mock-component')
+
+  let errorEvent = {}
+  component.addEventListener('error', (event) => { errorEvent = event })
+
+  const input = component.select('input')
+
+  input.dispatchEvent(
+    new globalThis.CustomEvent(
+      'alter', { bubbles: true, detail: 'I will error!' }
+    ))
+
+  // Sleep
+  await new Promise(resolve => setTimeout(resolve, 0))
+
+  assert.deepStrictEqual(errorEvent.detail.message, 'Something went async wrong!')
+})
+
+it('resolves its resource dependencies using events propagation', () => {
+  setup();
+  const listener = (event) => {
+    const resource = event.detail.resource
+    event.detail[resource] = 'RESOLVED_DEPENDENCY'
+  }
+  document.addEventListener('resolve', listener)
+  container.innerHTML = `
+  <mock-component></mock-component>
+  `
+  const component = container.querySelector('mock-component')
+
+  assert.deepStrictEqual(component.dependency, 'RESOLVED_DEPENDENCY')
+  document.removeEventListener('resolve', listener)
+})
+
+it('provides the dependencies requested to it by child components', () => {
+  setup();
+  class ParentComponent extends MockComponent {
+    provide (resource) {
+      if (resource === 'Dependency') {
+        return `RESOURCE: ${resource} PROVIDED BY: ${this.id}`
       }
+      if (resource === 'state') return { key: 'value' }
     }
-    Component.define('parent-component', ParentComponent)
+  }
+  Component.define('parent-component', ParentComponent)
 
-    container.innerHTML = `
-    <parent-component id="parent">
-      <mock-component id="child"></mock-component>
-    </parent-component>
-    `
+  container.innerHTML = `
+  <parent-component id="parent">
+    <mock-component id="child"></mock-component>
+  </parent-component>
+  `
 
-    const child = container.querySelector('#child')
+  const child = container.querySelector('#child')
 
-    expect(child.dependency).toEqual(
-      'RESOURCE: Dependency PROVIDED BY: parent')
+  assert.deepStrictEqual(child.dependency, 'RESOURCE: Dependency PROVIDED BY: parent')
 
-    const state = child.resolve('state')
-    expect(state).toEqual({ key: 'value' })
+  const state = child.resolve('state')
+  assert.deepStrictEqual(state, { key: 'value' })
 
-    const unknown = child.resolve('unknown')
-    expect(unknown).toBe(undefined)
-  })
+  const unknown = child.resolve('unknown')
+  assert.strictEqual(unknown, undefined)
+})
 
-  it('provides a styleNames utility function for setting styles', () => {
-    container.innerHTML = `
-    <mock-component class></mock-component>
-    `
-    const component = container.querySelector('mock-component')
-    const background = 'primary'
-    const shadow = 'small'
-    const color = ''
-    const styleMap = {
-      [`background-${background}`]: background,
-      [`color-${color}`]: color,
-      [`shadow-${shadow}`]: shadow
-    }
+it('provides a styleNames utility function for setting styles', () => {
+  setup();
+  container.innerHTML = `
+  <mock-component class></mock-component>
+  `
+  const component = container.querySelector('mock-component')
+  const background = 'primary'
+  const shadow = 'small'
+  const color = ''
+  const styleMap = {
+    [`background-${background}`]: background,
+    [`color-${color}`]: color,
+    [`shadow-${shadow}`]: shadow
+  }
 
-    const result = component.styleNames(styleMap)
+  const result = component.styleNames(styleMap)
 
-    expect(result).toEqual('background-primary shadow-small')
-  })
+  assert.deepStrictEqual(result, 'background-primary shadow-small')
+})
+
+it('reuses listener bindings when content does not change', () => {
+  setup()
+  container.innerHTML = `
+  <optimized-listener-component></optimized-listener-component>
+  `
+  const component = container.querySelector('optimized-listener-component')
+
+  component.render()
+  component.querySelector('button').click()
+
+  component.render()
+  component.querySelector('button').click()
+
+  component.content = '<button listen on-click="onClick">Click me</button>'
+  component.render()
+  component.querySelector('button').click()
+
+  assert.deepStrictEqual(component.clicks, 3)
+  assert.deepStrictEqual(component._needsBinding, false)
 })