@wippy-fe/webcomponent-core 0.0.34 → 0.0.35

package/src/base-element.host.test.ts

@@ -1,310 +0,0 @@
-/**
- * @vitest-environment jsdom
- *
- * Covers `WippyElement.host` getter — reads `__wippyHost` attached by
- * the managed-layout shell's content resolvers. And the cleanup path
- * in `disconnectedCallback` that drops stale wires on detach.
- */
-import { describe, expect, it, vi } from 'vitest'
-import { WippyElement } from './base-element.ts'
-
-// `ElementInternals.states` shim lives in `vitest.setup.ts` (gen-2-chat
-// repo root) so any test that transitively imports `WippyElement` gets
-// the patch. This file just exercises the resulting behavior.
-
-class TestEl extends WippyElement {
-  static get wippyConfig() {
-    return { propsSchema: { properties: {} }, hostCssKeys: [] }
-  }
-
-  protected onMount(): void {}
-  protected onUnmount(): void {}
-}
-
-const TAG = `wippy-host-test-${Math.random().toString(36).slice(2)}`
-customElements.define(TAG, TestEl)
-
-describe('wippyElement.host getter', () => {
-  it('returns null on a fresh element with no wires', () => {
-    const el = document.createElement(TAG) as TestEl
-    expect(el.host).toBeNull()
-  })
-
-  it('returns the wrapper attached by the resolver as __wippyHost', () => {
-    const el = document.createElement(TAG) as TestEl
-    const fakeWrapper = { layout: { broadcast: () => {} } }
-    ;(el as unknown as { __wippyHost: unknown }).__wippyHost = fakeWrapper
-    expect(el.host).toBe(fakeWrapper)
-  })
-
-  it('connectedCallback can read this.host on first tick', () => {
-    let observedHost: unknown = 'sentinel'
-    class Probe extends WippyElement {
-      static get wippyConfig() {
-        return { propsSchema: { properties: {} }, hostCssKeys: [] }
-      }
-
-      protected onMount(): void {
-        observedHost = this.host
-      }
-
-      protected onUnmount(): void {}
-    }
-    const probeTag = `wippy-probe-${Math.random().toString(36).slice(2)}`
-    customElements.define(probeTag, Probe)
-    const el = document.createElement(probeTag)
-    const fakeWrapper = { layout: {} }
-    ;(el as unknown as { __wippyHost: unknown }).__wippyHost = fakeWrapper
-    document.body.appendChild(el)
-    expect(observedHost).toBe(fakeWrapper)
-    el.remove()
-  })
-})
-
-describe('wippyElement.disconnectedCallback wire cleanup', () => {
-  it('drops __wippyHost and __wippyHostBus on disconnect', () => {
-    const el = document.createElement(TAG) as TestEl
-    ;(el as unknown as { __wippyHost: unknown }).__wippyHost = { layout: {} }
-    ;(el as unknown as { __wippyHostBus: unknown }).__wippyHostBus = {
-      broadcast: () => {},
-      send: () => {},
-      subscribe: () => () => {},
-    }
-    document.body.appendChild(el)
-    el.remove()
-    expect((el as unknown as { __wippyHost?: unknown }).__wippyHost).toBeUndefined()
-    expect((el as unknown as { __wippyHostBus?: unknown }).__wippyHostBus).toBeUndefined()
-  })
-})
-
-describe('wippyElement.reactive — opt-in reactive adapter', () => {
-  // Element with a `count` schema prop so attribute changes are observable.
-  interface ReactiveProps { count: number }
-  interface ReactiveEvents { tick: { n: number } }
-  class ReactiveEl extends WippyElement<ReactiveProps, ReactiveEvents> {
-    static get wippyConfig() {
-      return {
-        propsSchema: { properties: { count: { type: 'integer' as const } } },
-        hostCssKeys: [],
-      }
-    }
-
-    /** Test-only handle for assertions inside lifecycle hooks. */
-    public observedHook: { props: ReactiveProps, errors: string[] } | null = null
-    /** True iff the adapter has been lazy-allocated. */
-    public get adapterAllocated(): boolean {
-      return (this as unknown as { _reactive: unknown })._reactive !== null
-    }
-
-    protected onMount(): void {}
-    protected onUnmount(): void {}
-
-    protected onPropsChanged(props: ReactiveProps, errors: string[]): void {
-      this.observedHook = { props, errors }
-    }
-  }
-  const reactiveTag = `wippy-reactive-${Math.random().toString(36).slice(2)}`
-  customElements.define(reactiveTag, ReactiveEl)
-
-  it('does NOT allocate the adapter when never accessed', () => {
-    const el = document.createElement(reactiveTag) as ReactiveEl
-    el.setAttribute('count', '1')
-    document.body.appendChild(el)
-    el.setAttribute('count', '2')
-    expect(el.adapterAllocated).toBe(false)
-    expect(el.observedHook?.props.count).toBe(2)
-    el.remove()
-  })
-
-  it('lazy-allocates on first `this.reactive` access and seeds from current attributes', () => {
-    const el = document.createElement(reactiveTag) as ReactiveEl
-    el.setAttribute('count', '7')
-    document.body.appendChild(el)
-    expect(el.adapterAllocated).toBe(false)
-
-    const reactive = (el as unknown as { reactive: ReturnType<ReactiveEl['onPropsChanged']> extends void ? any : never }).reactive
-    expect(el.adapterAllocated).toBe(true)
-    expect((reactive as any).props.value).toEqual({ count: 7 })
-    el.remove()
-  })
-
-  it('fires subscribers on attribute change after allocation', () => {
-    const el = document.createElement(reactiveTag) as ReactiveEl
-    el.setAttribute('count', '1')
-    document.body.appendChild(el)
-
-    const reactive = (el as any).reactive
-    const listener = vi.fn()
-    reactive.props.subscribe(listener)
-
-    el.setAttribute('count', '2')
-    expect(listener).toHaveBeenCalledTimes(1)
-    expect(listener).toHaveBeenCalledWith({ count: 2 }, [])
-
-    el.setAttribute('count', '3')
-    expect(listener).toHaveBeenCalledTimes(2)
-    el.remove()
-  })
-
-  it('events.emit dispatches a bubbling/composed CustomEvent on the element', () => {
-    const el = document.createElement(reactiveTag) as ReactiveEl
-    document.body.appendChild(el)
-
-    const reactive = (el as any).reactive
-    const events: Event[] = []
-    el.addEventListener('tick', (e) => {
-      events.push(e)
-    })
-
-    reactive.events.emit('tick', { n: 99 })
-    expect(events).toHaveLength(1)
-    const ev = events[0] as CustomEvent<{ n: number }>
-    expect(ev.detail).toEqual({ n: 99 })
-    expect(ev.bubbles).toBe(true)
-    expect(ev.composed).toBe(true)
-    el.remove()
-  })
-
-  it('disconnectedCallback disposes the adapter; subscribers stop firing', () => {
-    const el = document.createElement(reactiveTag) as ReactiveEl
-    document.body.appendChild(el)
-
-    const reactive = (el as any).reactive
-    const listener = vi.fn()
-    reactive.props.subscribe(listener)
-
-    el.remove()
-    expect(el.adapterAllocated).toBe(false)
-
-    // Re-append with a new attribute; the OLD subscriber must not fire.
-    el.setAttribute('count', '50')
-    document.body.appendChild(el)
-    el.setAttribute('count', '51')
-    expect(listener).not.toHaveBeenCalled()
-    el.remove()
-  })
-
-  it('after reconnect, a fresh adapter is allocated on next .reactive access', () => {
-    const el = document.createElement(reactiveTag) as ReactiveEl
-    document.body.appendChild(el)
-
-    const first = (el as any).reactive
-    el.remove()
-    document.body.appendChild(el)
-
-    const second = (el as any).reactive
-    expect(second).not.toBe(first)
-    el.remove()
-  })
-
-  it('legacy onPropsChanged override still fires alongside reactive', () => {
-    const el = document.createElement(reactiveTag) as ReactiveEl
-    el.setAttribute('count', '1')
-    document.body.appendChild(el)
-    // Force-allocate adapter
-    const reactive = (el as any).reactive
-    const listener = vi.fn()
-    reactive.props.subscribe(listener)
-
-    el.setAttribute('count', '2')
-    expect(listener).toHaveBeenCalledTimes(1)
-    expect(el.observedHook?.props.count).toBe(2)
-    el.remove()
-  })
-})
-
-describe('wippyElement reconnect — no shadow-child accumulation', () => {
-  // R3 regression: previously `connectedCallback` re-ran the full mount
-  // path (CSS injection + container append) on every reconnect. The
-  // `disconnectedCallback` did NOT clear the persistent shadow root, so
-  // each detach+reattach cycle leaked another `<style>` and another
-  // container `<div>`. On a move-style DOM op (e.g. `appendChild` of an
-  // already-connected element, list reorder) the browser fires
-  // disconnect → connect synchronously, so this leak fires on every
-  // reorder.
-  //
-  // Fix: gate CSS / container / icon setup on a `_initialized` flag and
-  // reuse the stored container on reconnect.
-
-  class CssEl extends WippyElement {
-    static get wippyConfig() {
-      return {
-        propsSchema: { properties: {} },
-        hostCssKeys: [],
-        inlineCss: ':host { display: block; }',
-        containerClasses: ['ct'],
-      }
-    }
-
-    public mountCount = 0
-    public lastIsRemount: boolean | undefined = undefined
-    public lastContainer: HTMLElement | null = null
-
-    protected onMount(
-      _shadow: ShadowRoot,
-      container: HTMLElement,
-      _props: Record<string, unknown>,
-      _errors: string[],
-      _content?: string | null,
-      isRemount?: boolean,
-    ): void {
-      this.mountCount += 1
-      this.lastIsRemount = isRemount
-      this.lastContainer = container
-    }
-
-    protected onUnmount(): void {}
-  }
-  const cssTag = `wippy-reconnect-${Math.random().toString(36).slice(2)}`
-  customElements.define(cssTag, CssEl)
-
-  it('does not duplicate <style> or container <div> across detach/reattach cycles', () => {
-    const el = document.createElement(cssTag) as CssEl
-    document.body.appendChild(el)
-
-    const shadow = el.shadowRoot!
-    const initialChildCount = shadow.childElementCount
-    const initialStyles = shadow.querySelectorAll('style').length
-    const initialContainers = shadow.querySelectorAll('div.ct').length
-    expect(initialContainers).toBe(1)
-    expect(initialStyles).toBeGreaterThan(0)
-    expect(el.mountCount).toBe(1)
-    expect(el.lastIsRemount).toBe(false)
-
-    // Detach + reattach (one cycle) — pre-fix this would add another
-    // <style> and another container <div>.
-    el.remove()
-    document.body.appendChild(el)
-
-    expect(shadow.childElementCount).toBe(initialChildCount)
-    expect(shadow.querySelectorAll('style').length).toBe(initialStyles)
-    expect(shadow.querySelectorAll('div.ct').length).toBe(initialContainers)
-    expect(el.mountCount).toBe(2)
-    expect(el.lastIsRemount).toBe(true)
-
-    // Second detach + reattach cycle — counts still stable.
-    el.remove()
-    document.body.appendChild(el)
-
-    expect(shadow.childElementCount).toBe(initialChildCount)
-    expect(shadow.querySelectorAll('style').length).toBe(initialStyles)
-    expect(shadow.querySelectorAll('div.ct').length).toBe(initialContainers)
-    expect(el.mountCount).toBe(3)
-    expect(el.lastIsRemount).toBe(true)
-
-    el.remove()
-  })
-
-  it('reuses the same container instance on reconnect', () => {
-    const el = document.createElement(cssTag) as CssEl
-    document.body.appendChild(el)
-    const firstContainer = el.lastContainer
-    expect(firstContainer).not.toBeNull()
-
-    el.remove()
-    document.body.appendChild(el)
-
-    expect(el.lastContainer).toBe(firstContainer)
-    el.remove()
-  })
-})