@pyreon/runtime-dom 0.24.5 → 0.24.6

package/src/tests/coverage.test.ts

@@ -1,1140 +0,0 @@
-/**
- * Targeted tests to increase code coverage above 95% on all metrics.
- * Covers gaps in: devtools.ts, template.ts, mount.ts, transition.ts,
- * hydrate.ts, transition-group.ts, nodes.ts, props.ts
- */
-import type { ComponentFn, VNodeChild } from '@pyreon/core'
-import {
-  createRef,
-  defineComponent,
-  For,
-  Fragment,
-  h,
-  onMount,
-  onUnmount,
-  onUpdate,
-  Portal,
-} from '@pyreon/core'
-import { signal } from '@pyreon/reactivity'
-import { installDevTools, registerComponent, unregisterComponent } from '../devtools'
-import {
-  Transition as _Transition,
-  TransitionGroup as _TransitionGroup,
-  _tpl,
-  hydrateRoot,
-  mount,
-  sanitizeHtml,
-  setSanitizer,
-} from '../index'
-import { mountChild } from '../mount'
-
-const Transition = _Transition as unknown as ComponentFn<Record<string, unknown>>
-const TransitionGroup = _TransitionGroup as unknown as ComponentFn<Record<string, unknown>>
-
-function container(): HTMLElement {
-  const el = document.createElement('div')
-  document.body.appendChild(el)
-  return el
-}
-
-// ─── template.ts — _tpl() compiler API (lines 72-80) ─────────────────────────
-
-describe('_tpl — compiler-facing template API', () => {
-  test('creates a NativeItem from HTML string and bind function', () => {
-    const el = container()
-    const native = _tpl('<div class="box"><span></span></div>', (root) => {
-      const span = root.querySelector('span')!
-      span.textContent = 'hello'
-      return null
-    })
-    expect(native.__isNative).toBe(true)
-    expect(native.el).toBeInstanceOf(HTMLElement)
-    el.appendChild(native.el)
-    expect(el.querySelector('.box span')?.textContent).toBe('hello')
-  })
-
-  test('caches template elements — same HTML string reuses template', () => {
-    const html = '<p class="cached"><em></em></p>'
-    const n1 = _tpl(html, (root) => {
-      root.querySelector('em')!.textContent = 'first'
-      return null
-    })
-    const n2 = _tpl(html, (root) => {
-      root.querySelector('em')!.textContent = 'second'
-      return null
-    })
-    // Both produce valid elements but they are separate clones
-    expect(n1.el).not.toBe(n2.el)
-    expect((n1.el as HTMLElement).querySelector('em')?.textContent).toBe('first')
-    expect((n2.el as HTMLElement).querySelector('em')?.textContent).toBe('second')
-  })
-
-  test('bind function can return a cleanup', () => {
-    let cleaned = false
-    const native = _tpl('<div></div>', () => {
-      return () => {
-        cleaned = true
-      }
-    })
-    expect(native.cleanup).not.toBeNull()
-    native.cleanup?.()
-    expect(cleaned).toBe(true)
-  })
-
-  test('mountChild handles NativeItem from _tpl', () => {
-    const el = container()
-    const native = _tpl('<span>tpl</span>', () => null)
-    const cleanup = mountChild(native as unknown as VNodeChild, el, null)
-    expect(el.querySelector('span')?.textContent).toBe('tpl')
-    cleanup()
-  })
-
-  test('mountChild handles NativeItem with cleanup from _tpl', () => {
-    const el = container()
-    let cleaned = false
-    const native = _tpl('<span>tpl2</span>', () => () => {
-      cleaned = true
-    })
-    const cleanup = mountChild(native as unknown as VNodeChild, el, null)
-    expect(el.querySelector('span')?.textContent).toBe('tpl2')
-    cleanup()
-    expect(cleaned).toBe(true)
-  })
-})
-
-// ─── devtools.ts — overlay and $p helpers (lines 155-258, 267-290) ────────────
-
-describe('DevTools — overlay and $p console helpers', () => {
-  beforeAll(() => {
-    installDevTools()
-  })
-
-  test('enableOverlay and disableOverlay toggle overlay state', () => {
-    const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
-      enableOverlay: () => void
-      disableOverlay: () => void
-    }
-    // Enable overlay
-    devtools.enableOverlay()
-    expect(document.body.style.cursor).toBe('crosshair')
-
-    // Enable again — should be noop (already active)
-    devtools.enableOverlay()
-    expect(document.body.style.cursor).toBe('crosshair')
-
-    // Disable overlay
-    devtools.disableOverlay()
-    expect(document.body.style.cursor).toBe('')
-
-    // Disable again — should be noop (already disabled)
-    devtools.disableOverlay()
-    expect(document.body.style.cursor).toBe('')
-  })
-
-  test('overlay creates overlay and tooltip elements', () => {
-    const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
-      enableOverlay: () => void
-      disableOverlay: () => void
-    }
-    devtools.enableOverlay()
-    expect(document.getElementById('__pyreon-overlay')).not.toBeNull()
-    devtools.disableOverlay()
-  })
-
-  test('overlay mousemove with no registered component hides overlay', () => {
-    const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
-      enableOverlay: () => void
-      disableOverlay: () => void
-    }
-    devtools.enableOverlay()
-
-    // Simulate mousemove over an unregistered element
-    const target = document.createElement('div')
-    document.body.appendChild(target)
-    const event = new MouseEvent('mousemove', { clientX: 10, clientY: 10, bubbles: true })
-    document.dispatchEvent(event)
-
-    devtools.disableOverlay()
-    target.remove()
-  })
-
-  test('overlay mousemove highlights registered component', () => {
-    const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
-      enableOverlay: () => void
-      disableOverlay: () => void
-    }
-
-    const target = document.createElement('div')
-    target.style.cssText = 'width:100px;height:100px;position:fixed;top:0;left:0;'
-    document.body.appendChild(target)
-    registerComponent('overlay-test', 'OverlayComp', target, null)
-
-    devtools.enableOverlay()
-
-    // Simulate mousemove over the registered element
-    const event = new MouseEvent('mousemove', { clientX: 50, clientY: 50, bubbles: true })
-    document.dispatchEvent(event)
-
-    // Simulate same element again — should be noop (same _currentHighlight)
-    const event2 = new MouseEvent('mousemove', { clientX: 50, clientY: 50, bubbles: true })
-    document.dispatchEvent(event2)
-
-    devtools.disableOverlay()
-    unregisterComponent('overlay-test')
-    target.remove()
-  })
-
-  test('overlay click logs component and disables overlay', () => {
-    const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
-      enableOverlay: () => void
-      disableOverlay: () => void
-    }
-
-    const target = document.createElement('div')
-    target.style.cssText = 'width:100px;height:100px;position:fixed;top:0;left:0;'
-    document.body.appendChild(target)
-
-    // Register parent and child for parent logging branch
-    registerComponent('click-parent', 'ClickParent', null, null)
-    registerComponent('click-test', 'ClickComp', target, 'click-parent')
-
-    devtools.enableOverlay()
-
-    const event = new MouseEvent('click', { clientX: 50, clientY: 50, bubbles: true })
-    document.dispatchEvent(event)
-
-    // In happy-dom elementFromPoint returns null, so the click handler
-    // returns early without calling disableOverlay. Manually disable.
-    devtools.disableOverlay()
-    expect(document.body.style.cursor).toBe('')
-
-    unregisterComponent('click-test')
-    unregisterComponent('click-parent')
-    target.remove()
-  })
-
-  test('overlay click on unregistered element — no console log', () => {
-    const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
-      enableOverlay: () => void
-      disableOverlay: () => void
-    }
-
-    devtools.enableOverlay()
-
-    // Click on area with no component
-    const event = new MouseEvent('click', { clientX: 0, clientY: 0, bubbles: true })
-    document.dispatchEvent(event)
-
-    // In happy-dom elementFromPoint returns null, so click handler returns
-    // early. Manually disable overlay and verify cursor is restored.
-    devtools.disableOverlay()
-    expect(document.body.style.cursor).toBe('')
-  })
-
-  test('Escape key disables overlay', () => {
-    const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
-      enableOverlay: () => void
-      disableOverlay: () => void
-    }
-
-    devtools.enableOverlay()
-    expect(document.body.style.cursor).toBe('crosshair')
-
-    const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })
-    document.dispatchEvent(event)
-    expect(document.body.style.cursor).toBe('')
-  })
-
-  test('Ctrl+Shift+P toggles overlay', () => {
-    // Enable via Ctrl+Shift+P
-    const enableEvent = new KeyboardEvent('keydown', {
-      key: 'P',
-      ctrlKey: true,
-      shiftKey: true,
-      bubbles: true,
-    })
-    window.dispatchEvent(enableEvent)
-    expect(document.body.style.cursor).toBe('crosshair')
-
-    // Disable via Ctrl+Shift+P
-    const disableEvent = new KeyboardEvent('keydown', {
-      key: 'P',
-      ctrlKey: true,
-      shiftKey: true,
-      bubbles: true,
-    })
-    window.dispatchEvent(disableEvent)
-    expect(document.body.style.cursor).toBe('')
-  })
-
-  test('overlay with component that has children shows child count', () => {
-    const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
-      enableOverlay: () => void
-      disableOverlay: () => void
-    }
-
-    const target = document.createElement('div')
-    target.style.cssText = 'width:100px;height:100px;position:fixed;top:50px;left:50px;'
-    document.body.appendChild(target)
-
-    registerComponent('parent-ov', 'ParentOv', target, null)
-    registerComponent('child-ov-1', 'ChildOv1', null, 'parent-ov')
-
-    devtools.enableOverlay()
-
-    const event = new MouseEvent('mousemove', { clientX: 75, clientY: 75, bubbles: true })
-    document.dispatchEvent(event)
-
-    devtools.disableOverlay()
-    unregisterComponent('child-ov-1')
-    unregisterComponent('parent-ov')
-    target.remove()
-  })
-
-  test('$p console helpers exist and work', () => {
-    const $p = (window as unknown as Record<string, unknown>).$p as {
-      components: () => unknown[]
-      tree: () => unknown[]
-      highlight: (id: string) => void
-      inspect: () => void
-      stats: () => { total: number; roots: number }
-      help: () => void
-    }
-
-    expect($p).toBeDefined()
-
-    // $p.components()
-    registerComponent('$p-test', '$pTest', null, null)
-    const comps = $p.components()
-    expect(comps.length).toBeGreaterThan(0)
-
-    // $p.tree()
-    const tree = $p.tree()
-    expect(Array.isArray(tree)).toBe(true)
-
-    // $p.highlight()
-    $p.highlight('$p-test')
-
-    // $p.inspect() — toggles overlay on
-    $p.inspect()
-    expect(document.body.style.cursor).toBe('crosshair')
-    // $p.inspect() — toggles overlay off
-    $p.inspect()
-    expect(document.body.style.cursor).toBe('')
-
-    // $p.stats()
-    const stats = $p.stats()
-    expect(stats.total).toBeGreaterThan(0)
-    expect(typeof stats.roots).toBe('number')
-
-    // $p.help()
-    $p.help()
-
-    unregisterComponent('$p-test')
-  })
-
-  test("$p.stats shows singular 'root' for 1 root", () => {
-    // Clear all components first
-    const $p = (window as unknown as Record<string, unknown>).$p as {
-      stats: () => { total: number; roots: number }
-    }
-    registerComponent('sole-root', 'SoleRoot', null, null)
-    const stats = $p.stats()
-    expect(stats.roots).toBeGreaterThanOrEqual(1)
-    unregisterComponent('sole-root')
-  })
-})
-
-// ─── mount.ts — uncovered branches ───────────────────────────────────────────
-
-describe('mount.ts — uncovered branches', () => {
-  test('component returning invalid value triggers dev warning (line 283)', () => {
-    const el = container()
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-    // Component returns an object without 'type' property — triggers invalid return warning
-    const BadComp = (() => ({ weird: true })) as unknown as ComponentFn
-    mount(h(BadComp, null), el)
-
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('returned an invalid value'))
-    warnSpy.mockRestore()
-  })
-
-  test('component returning Promise triggers dev warning', () => {
-    const el = container()
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-    const AsyncComp = (() => Promise.resolve(null)) as unknown as ComponentFn
-    mount(h(AsyncComp, null), el)
-
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('returned a Promise'))
-    warnSpy.mockRestore()
-  })
-
-  test('void element with children triggers dev warning', () => {
-    const el = container()
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-    mount(h('img', null, 'child text'), el)
-
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('void element'))
-    warnSpy.mockRestore()
-  })
-
-  test('Portal with falsy target warns', () => {
-    const el = container()
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-    mount(h(Portal, { target: null }), el)
-
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('Portal'))
-    warnSpy.mockRestore()
-  })
-
-  test('component subtree mount error with propagateError (lines 298-309)', () => {
-    const el = container()
-    const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
-
-    // Component whose subtree throws during mount
-    const Outer = defineComponent(() => {
-      // Inner component throws during mount (not setup)
-      const Inner = defineComponent(() => {
-        // Return a VNode that will throw when mounted
-        return h('div', null, (() => {
-          throw new Error('subtree mount error')
-        }) as unknown as VNodeChild)
-      })
-      return h(Inner, null)
-    })
-
-    mount(h(Outer, null), el)
-    errorSpy.mockRestore()
-  })
-
-  test('mountChildren with >2 children and cleanups (line 387)', () => {
-    const el = container()
-    const s1 = signal('a')
-    const s2 = signal('b')
-    const s3 = signal('c')
-
-    // 3 reactive children will all have cleanups, hitting the map+cleanup path
-    const unmount = mount(
-      h(
-        'div',
-        null,
-        () => s1(),
-        () => s2(),
-        () => s3(),
-      ),
-      el,
-    )
-
-    expect(el.querySelector('div')?.textContent).toContain('a')
-    expect(el.querySelector('div')?.textContent).toContain('b')
-    expect(el.querySelector('div')?.textContent).toContain('c')
-
-    unmount()
-  })
-
-  test('mountElement with ref + propCleanup at _elementDepth > 0', () => {
-    const el = container()
-    const ref = createRef<HTMLElement>()
-    const cls = signal('foo')
-
-    // Nested element with ref AND reactive prop — exercises the combined cleanup path
-    mount(h('div', null, h('span', { ref, class: () => cls() }, 'inner')), el)
-
-    expect(ref.current).not.toBeNull()
-    expect(ref.current?.className).toBe('foo')
-  })
-
-  test('mountElement with propCleanup only at _elementDepth > 0', () => {
-    const el = container()
-    const cls = signal('bar')
-
-    // Nested element with reactive prop but no ref
-    const unmount = mount(h('div', null, h('span', { class: () => cls() }, 'inner')), el)
-
-    expect(el.querySelector('span')?.className).toBe('bar')
-    cls.set('baz')
-    expect(el.querySelector('span')?.className).toBe('baz')
-    unmount()
-  })
-
-  test('reactive text at _elementDepth > 0 returns just dispose', () => {
-    const el = container()
-    const text = signal('nested')
-
-    // Reactive text inside a parent element — should skip DOM removal closure
-    const unmount = mount(
-      h('div', null, () => text()),
-      el,
-    )
-
-    expect(el.querySelector('div')?.textContent).toBe('nested')
-    text.set('updated')
-    expect(el.querySelector('div')?.textContent).toBe('updated')
-    unmount()
-  })
-
-  test('NativeItem without cleanup at _elementDepth > 0', () => {
-    const el = container()
-    const native = _tpl('<b>native</b>', () => null)
-
-    // Mount NativeItem inside a parent element
-    mount(h('div', null, native as unknown as VNodeChild), el)
-    expect(el.querySelector('b')?.textContent).toBe('native')
-  })
-
-  test('NativeItem with cleanup at _elementDepth > 0', () => {
-    const el = container()
-    let _cleaned = false
-    const native = _tpl('<b>native2</b>', () => () => {
-      _cleaned = true
-    })
-
-    mount(h('div', null, native as unknown as VNodeChild), el)
-    expect(el.querySelector('b')?.textContent).toBe('native2')
-  })
-})
-
-// ─── transition.ts — uncovered branches (lines 152, 165, 170-175) ────────────
-
-describe('Transition — uncovered branches', () => {
-  test('onUnmount cancels pending leave (line 152)', async () => {
-    const el = container()
-    const visible = signal(true)
-
-    const unmount = mount(
-      h(Transition, {
-        show: visible,
-        name: 'fade',
-        children: h('div', { id: 'unmount-leave' }, 'content'),
-      }),
-      el,
-    )
-
-    // Start leave animation
-    visible.set(false)
-
-    // Unmount before leave completes — should cancel pending leave
-    unmount()
-  })
-
-  test('non-object/array child returns rawChild (line 165)', () => {
-    const el = container()
-    const visible = signal(true)
-
-    // Pass a non-object, non-array child (string) — hits line 165
-    mount(
-      h(Transition, {
-        show: visible,
-        children: 'just text' as unknown as VNodeChild,
-      }),
-      el,
-    )
-  })
-
-  test('array child returns rawChild (line 164)', () => {
-    const el = container()
-    const visible = signal(true)
-
-    // Pass an array child — hits the Array.isArray branch
-    mount(
-      h(Transition, {
-        show: visible,
-        children: [h('span', null, 'a'), h('span', null, 'b')] as unknown as VNodeChild,
-      }),
-      el,
-    )
-  })
-
-  test('component child warns and returns vnode (lines 170-175)', () => {
-    const el = container()
-    const visible = signal(true)
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-    const Inner = defineComponent(() => h('span', null, 'comp child'))
-
-    mount(
-      h(Transition, {
-        show: visible,
-        children: h(Inner, null),
-      }),
-      el,
-    )
-
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('Transition child is a component'))
-    warnSpy.mockRestore()
-  })
-
-  test('leave with no ref.current sets isMounted false immediately (line 142-144)', async () => {
-    const el = container()
-    const visible = signal(true)
-
-    // Use a non-string type (like a component) so ref won't be injected
-    const Comp = () => h('span', null, 'no-ref')
-    mount(
-      h(Transition, {
-        show: visible,
-        children: h(Comp, null) as VNodeChild,
-      }),
-      el,
-    )
-
-    // Toggle off — ref.current will be null for component children
-    visible.set(false)
-    await new Promise<void>((r) => queueMicrotask(r))
-  })
-
-  test('onAfterEnter callback fires after enter transition', async () => {
-    const el = container()
-    const visible = signal(false)
-    let afterEnterCalled = false
-
-    mount(
-      h(Transition, {
-        show: visible,
-        name: 'fade',
-        onAfterEnter: () => {
-          afterEnterCalled = true
-        },
-        children: h('div', { id: 'after-enter-test' }, 'content'),
-      }),
-      el,
-    )
-
-    visible.set(true)
-    await new Promise<void>((r) => queueMicrotask(r))
-
-    // Trigger rAF
-    await new Promise<void>((r) => requestAnimationFrame(() => r()))
-    const target = el.querySelector('#after-enter-test')
-    if (target) {
-      target.dispatchEvent(new Event('transitionend'))
-    }
-    expect(afterEnterCalled).toBe(true)
-  })
-
-  test('onAfterLeave callback fires after leave transition', async () => {
-    const el = container()
-    const visible = signal(true)
-    let afterLeaveCalled = false
-
-    mount(
-      h(Transition, {
-        show: visible,
-        name: 'fade',
-        onAfterLeave: () => {
-          afterLeaveCalled = true
-        },
-        children: h('div', { id: 'after-leave-test' }, 'content'),
-      }),
-      el,
-    )
-
-    const target = el.querySelector('#after-leave-test')
-    visible.set(false)
-
-    await new Promise<void>((r) => requestAnimationFrame(() => r()))
-    if (target) {
-      target.dispatchEvent(new Event('transitionend'))
-    }
-    await new Promise<void>((r) => queueMicrotask(r))
-    expect(afterLeaveCalled).toBe(true)
-  })
-
-  test('tooltip repositions when near top of viewport', () => {
-    const devtools = (window as unknown as Record<string, unknown>).__PYREON_DEVTOOLS__ as {
-      enableOverlay: () => void
-      disableOverlay: () => void
-    }
-
-    const target = document.createElement('div')
-    // Position near top so tooltip moves below element (rect.top < 35)
-    target.style.cssText = 'width:100px;height:20px;position:fixed;top:10px;left:10px;'
-    document.body.appendChild(target)
-    registerComponent('top-comp', 'TopComp', target, null)
-
-    devtools.enableOverlay()
-
-    const event = new MouseEvent('mousemove', { clientX: 50, clientY: 15, bubbles: true })
-    document.dispatchEvent(event)
-
-    devtools.disableOverlay()
-    unregisterComponent('top-comp')
-    target.remove()
-  })
-})
-
-// ─── hydrate.ts — uncovered branches (lines 162-183, 338) ────────────────────
-
-describe('hydrate.ts — uncovered branches', () => {
-  test('For hydration with SSR markers — full path with afterEnd (lines 162-183)', () => {
-    const el = container()
-    // SSR markers with content after the end marker
-    el.innerHTML = '<!--pyreon-for--><li>a</li><li>b</li><!--/pyreon-for--><p>after</p>'
-    const items = signal([
-      { id: 1, label: 'a' },
-      { id: 2, label: 'b' },
-    ])
-    const cleanup = hydrateRoot(
-      el,
-      h(
-        Fragment,
-        null,
-        For({
-          each: items,
-          by: (r: { id: number }) => r.id,
-          children: (r: { id: number; label: string }) => h('li', null, r.label),
-        }),
-        h('p', null, 'after'),
-      ),
-    )
-    cleanup()
-  })
-
-  test('component with onUpdate hooks during hydration (line 338)', () => {
-    const el = container()
-    el.innerHTML = '<span>update-test</span>'
-    let _updateCalled = false
-
-    const Comp = defineComponent(() => {
-      onUpdate(() => {
-        _updateCalled = true
-      })
-      return h('span', null, 'update-test')
-    })
-
-    const cleanup = hydrateRoot(el, h(Comp, null))
-    cleanup()
-  })
-
-  test('component with onUnmount hook during hydration cleanup', () => {
-    const el = container()
-    el.innerHTML = '<span>unmount-test</span>'
-    let unmountCalled = false
-
-    const Comp = defineComponent(() => {
-      onUnmount(() => {
-        unmountCalled = true
-      })
-      return h('span', null, 'unmount-test')
-    })
-
-    const cleanup = hydrateRoot(el, h(Comp, null))
-    cleanup()
-    expect(unmountCalled).toBe(true)
-  })
-
-  test('component with mount cleanup during hydration', () => {
-    const el = container()
-    el.innerHTML = '<span>mount-cleanup</span>'
-    let mountCleanupCalled = false
-
-    const Comp = defineComponent(() => {
-      onMount(() => () => {
-        mountCleanupCalled = true
-      })
-      return h('span', null, 'mount-cleanup')
-    })
-
-    const cleanup = hydrateRoot(el, h(Comp, null))
-    cleanup()
-    expect(mountCleanupCalled).toBe(true)
-  })
-
-  test('hydrates component with children merge', () => {
-    const el = container()
-    el.innerHTML = '<div><b>child</b></div>'
-
-    const Wrapper = defineComponent((props: { children?: VNodeChild }) =>
-      h('div', null, props.children),
-    )
-    const cleanup = hydrateRoot(el, h(Wrapper, null, h('b', null, 'child')))
-    cleanup()
-  })
-
-  test('hydrates reactive accessor returning VNode with domNode present', () => {
-    const el = container()
-    el.innerHTML = '<div><span>initial</span></div>'
-    const content = signal<VNodeChild>(h('span', null, 'initial'))
-    // Reactive accessor returns a VNode — goes through the complex reactive path with marker
-    const cleanup = hydrateRoot(el, h('div', null, (() => content()) as unknown as VNodeChild))
-    cleanup()
-  })
-})
-
-// ─── transition-group.ts — FLIP move animation (lines 209-218) ───────────────
-
-describe('TransitionGroup — FLIP move animation', () => {
-  test('FLIP animation fires for moved items', async () => {
-    const el = container()
-    const items = signal([
-      { id: 1, label: 'a' },
-      { id: 2, label: 'b' },
-      { id: 3, label: 'c' },
-    ])
-
-    mount(
-      h(TransitionGroup, {
-        tag: 'div',
-        name: 'list',
-        items: () => items(),
-        keyFn: (item: { id: number }) => item.id,
-        render: (item: { id: number; label: string }) =>
-          h('span', { class: 'flip-item' }, item.label),
-      }),
-      el,
-    )
-    await new Promise<void>((r) => queueMicrotask(r))
-    expect(el.querySelectorAll('span.flip-item').length).toBe(3)
-
-    // Reorder to trigger FLIP
-    items.set([
-      { id: 3, label: 'c' },
-      { id: 1, label: 'a' },
-      { id: 2, label: 'b' },
-    ])
-
-    // Wait for the effect and rAF chains
-    await new Promise<void>((r) => queueMicrotask(r))
-    await new Promise<void>((r) => requestAnimationFrame(() => r()))
-    // Second rAF for the inner requestAnimationFrame in FLIP
-    await new Promise<void>((r) => requestAnimationFrame(() => r()))
-
-    // Fire transitionend to clean up move class
-    const spans = el.querySelectorAll('span.flip-item')
-    for (const span of spans) {
-      span.dispatchEvent(new Event('transitionend'))
-    }
-
-    // Items should be reordered
-    const reorderedSpans = el.querySelectorAll('span.flip-item')
-    expect(reorderedSpans[0]?.textContent).toBe('c')
-    expect(reorderedSpans[1]?.textContent).toBe('a')
-    expect(reorderedSpans[2]?.textContent).toBe('b')
-  })
-})
-
-// ─── nodes.ts — empty mount placeholder paths (lines 433-435, 493-496) ───────
-
-describe('nodes.ts — placeholder comment paths', () => {
-  test('mountFor fresh render — component returning null uses placeholder', () => {
-    const el = container()
-    const items = signal([{ id: 1 }, { id: 2 }])
-
-    // Component that returns null — mount produces no DOM nodes, so
-    // the mountFor fresh render path needs a placeholder comment anchor
-    const NullComp = defineComponent(() => null)
-
-    mount(
-      h(
-        'div',
-        null,
-        For({
-          each: items,
-          by: (r: { id: number }) => r.id,
-          children: (r: { id: number }) => h(NullComp, { key: r.id }),
-        }),
-      ),
-      el,
-    )
-  })
-
-  test('mountFor replace-all — component returning null uses placeholder', () => {
-    const el = container()
-    const items = signal([{ id: 1 }])
-
-    const NullComp = defineComponent(() => null)
-
-    mount(
-      h(
-        'div',
-        null,
-        For({
-          each: items,
-          by: (r: { id: number }) => r.id,
-          children: (r: { id: number }) => h(NullComp, { key: r.id }),
-        }),
-      ),
-      el,
-    )
-
-    // Replace all with new keys
-    items.set([{ id: 10 }, { id: 11 }])
-  })
-
-  test('mountFor step 3 — new entries with component returning null (lines 493-496)', () => {
-    const el = container()
-    const items = signal([{ id: 1 }, { id: 2 }])
-
-    const NullComp = defineComponent(() => null)
-
-    mount(
-      h(
-        'div',
-        null,
-        For({
-          each: items,
-          by: (r: { id: number }) => r.id,
-          children: (r: { id: number }) => h(NullComp, { key: r.id }),
-        }),
-      ),
-      el,
-    )
-
-    // Add new items — step 3 mount new entries path
-    items.set([{ id: 1 }, { id: 2 }, { id: 3 }])
-  })
-
-  test('mountFor with NativeItem having cleanup in replace-all path', () => {
-    const el = container()
-    type R = { id: number; label: string }
-    let cleanupCount = 0
-
-    const items = signal<R[]>([{ id: 1, label: 'old' }])
-
-    mount(
-      h(
-        'div',
-        null,
-        For({
-          each: items,
-          by: (r) => r.id,
-          children: (r) => {
-            const native = _tpl('<b></b>', (root) => {
-              root.textContent = r.label
-              return () => {
-                cleanupCount++
-              }
-            })
-            return native as unknown as ReturnType<typeof h>
-          },
-        }),
-      ),
-      el,
-    )
-
-    // Replace all — should call cleanup on old entries
-    items.set([{ id: 10, label: 'new' }])
-    expect(cleanupCount).toBe(1)
-  })
-})
-
-// ─── props.ts — uncovered branches (lines 213, 242, 273-277) ─────────────────
-
-describe('props.ts — uncovered branches', () => {
-  test('multiple prop cleanups chain correctly (line 213)', () => {
-    const el = container()
-    const cls = signal('a')
-    const title = signal('t')
-
-    // Two reactive props => two cleanups that chain
-    const unmount = mount(h('div', { class: () => cls(), title: () => title() }), el)
-
-    const div = el.querySelector('div') as HTMLElement
-    expect(div.className).toBe('a')
-    expect(div.title).toBe('t')
-
-    cls.set('b')
-    title.set('u')
-    expect(div.className).toBe('b')
-    expect(div.title).toBe('u')
-
-    unmount()
-  })
-
-  test('non-function event handler triggers dev warning', () => {
-    const el = container()
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-    mount(h('button', { onClick: 'not a function' }), el)
-
-    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('non-function value'))
-    warnSpy.mockRestore()
-  })
-
-  test('innerHTML with setHTML method (line 242)', async () => {
-    const el = container()
-    const div = document.createElement('div')
-    el.appendChild(div)
-
-    // Mock setHTML on the element
-    let setHTMLCalled = false
-    ;(div as unknown as Record<string, unknown>).setHTML = (html: string) => {
-      setHTMLCalled = true
-      div.innerHTML = html
-    }
-
-    // Use applyProp directly for this test
-    const { applyProp } = await import('../props')
-    applyProp(div, 'innerHTML', '<b>via setHTML</b>')
-    expect(setHTMLCalled).toBe(true)
-    expect(div.innerHTML).toBe('<b>via setHTML</b>')
-  })
-
-  test('multiple chained prop cleanups (3+ reactive props)', () => {
-    const el = container()
-    const a = signal('a')
-    const b = signal('b')
-    const c = signal('c')
-
-    const unmount = mount(
-      h('div', {
-        class: () => a(),
-        title: () => b(),
-        'data-x': () => c(),
-      }),
-      el,
-    )
-
-    const div = el.querySelector('div') as HTMLElement
-    expect(div.className).toBe('a')
-    expect(div.title).toBe('b')
-    expect(div.getAttribute('data-x')).toBe('c')
-
-    unmount()
-  })
-
-  test('sanitizeHtml with no DOMParser or Sanitizer falls back to tag stripping', () => {
-    // This path is hard to test in happy-dom since DOMParser exists,
-    // but we can test the custom sanitizer path
-    setSanitizer((html) => html.replace(/<[^>]*>/g, ''))
-    const result = sanitizeHtml('<b>bold</b><script>bad</script>')
-    expect(result).toBe('boldbad')
-    setSanitizer(null)
-  })
-
-  test('dangerouslySetInnerHTML does NOT warn (name itself is the warning, matches React)', () => {
-    const el = container()
-    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-    mount(h('div', { dangerouslySetInnerHTML: { __html: '<em>raw</em>' } }), el)
-
-    // Previously this warned on every applyProp call, flooding the console
-    // on re-renders. The name "dangerouslySetInnerHTML" IS the warning.
-    expect(warnSpy).not.toHaveBeenCalled()
-    warnSpy.mockRestore()
-  })
-
-  test('style as null/undefined does nothing', () => {
-    const el = container()
-    mount(h('div', { style: null as unknown as string }), el)
-    // Should not throw
-    expect(el.querySelector('div')).not.toBeNull()
-  })
-})
-
-// ─── Additional edge cases for mount.ts ──────────────────────────────────────
-
-describe('mount.ts — additional edge cases', () => {
-  test('mountElement no reactive work and no ref at depth > 0 returns noop', () => {
-    const el = container()
-    // Static nested element with no reactive props, no ref — returns noop at _elementDepth > 0
-    const unmount = mount(h('div', null, h('span', null, 'static')), el)
-    expect(el.querySelector('span')?.textContent).toBe('static')
-    unmount()
-  })
-
-  test('mountChildren 2-child path where one cleanup is noop', () => {
-    const el = container()
-    // 2 children: one static (noop cleanup) and one with cleanup
-    const cls = signal('x')
-    mount(h('div', null, h('span', null, 'static'), h('b', { class: () => cls() }, 'reactive')), el)
-    expect(el.querySelectorAll('span').length).toBe(1)
-    expect(el.querySelector('b')?.className).toBe('x')
-  })
-
-  test('mountChildren 2-child path where both cleanups are noop', () => {
-    const el = container()
-    // 2 static children — both noop cleanup
-    mount(h('div', null, h('span', null, 'a'), h('b', null, 'b')), el)
-    expect(el.querySelector('span')?.textContent).toBe('a')
-    expect(el.querySelector('b')?.textContent).toBe('b')
-  })
-
-  test('mountChildren 2-child path where first cleanup is noop', () => {
-    const el = container()
-    const cls = signal('x')
-    // First child static (noop), second child reactive
-    mount(h('div', null, 'text', h('b', { class: () => cls() }, 'reactive')), el)
-  })
-
-  test('isKeyedArray returns false for empty array', () => {
-    const el = container()
-    const items = signal<{ id: number }[]>([])
-    // Reactive accessor returning empty array — should not use keyed reconciler
-    mount(
-      h('div', null, () => items().map((it) => h('span', { key: it.id }))),
-      el,
-    )
-    expect(el.querySelector('span')).toBeNull()
-  })
-
-  test('isKeyedArray returns false for non-keyed vnodes', () => {
-    const el = container()
-    const items = signal([1, 2, 3])
-    // VNodes without keys — should NOT use keyed reconciler
-    mount(
-      h('div', null, () => items().map((n) => h('span', null, String(n)))),
-      el,
-    )
-    expect(el.querySelectorAll('span').length).toBe(3)
-  })
-})
-
-// ─── hydrate.ts — additional branches ────────────────────────────────────────
-
-describe('hydrate.ts — additional branches', () => {
-  test('hydrates component returning null', () => {
-    const el = container()
-    el.innerHTML = ''
-    const NullComp = defineComponent(() => null)
-    const cleanup = hydrateRoot(el, h(NullComp, null))
-    cleanup()
-  })
-
-  test('hydrates element mismatch — element found but wrong tag', () => {
-    const el = container()
-    el.innerHTML = '<div>wrong tag</div>'
-    // Expect a <p> but find <div>
-    const cleanup = hydrateRoot(el, h('p', null, 'right'))
-    cleanup()
-  })
-
-  test('hydrates For without SSR markers but with existing domNode (non-comment)', () => {
-    const el = container()
-    // Existing element (not a comment) — takes the no-markers path
-    el.innerHTML = '<span>not a for marker</span>'
-    const items = signal([{ id: 1, label: 'a' }])
-    const cleanup = hydrateRoot(
-      el,
-      For({
-        each: items,
-        by: (r: { id: number }) => r.id,
-        children: (r: { id: number; label: string }) => h('li', null, r.label),
-      }),
-    )
-    cleanup()
-  })
-
-  test('hydrates PortalSymbol — always remounts', async () => {
-    const el = container()
-    const target = container()
-    el.innerHTML = ''
-
-    const { Portal } = await import('@pyreon/core')
-    const cleanup = hydrateRoot(el, Portal({ target, children: h('span', null, 'portal') }))
-    expect(target.querySelector('span')?.textContent).toBe('portal')
-    cleanup()
-  })
-
-  test('reactive accessor with complex VNode and existing domNode inserts marker before domNode', () => {
-    const el = container()
-    el.innerHTML = '<span>existing</span>'
-    const content = signal<VNodeChild>(h('b', null, 'complex'))
-    const cleanup = hydrateRoot(el, (() => content()) as unknown as VNodeChild)
-    cleanup()
-  })
-})