@pyreon/elements 0.24.4 → 0.24.6

package/src/__tests__/Text.test.ts

@@ -1,274 +0,0 @@
-import type { VNode } from '@pyreon/core'
-import { h } from '@pyreon/core'
-import { describe, expect, it } from 'vitest'
-import { Text } from '../Text'
-
-const asVNode = (v: unknown) => v as VNode
-
-describe('Text', () => {
-  describe('static properties', () => {
-    it('has isText set to true', () => {
-      expect(Text.isText).toBe(true)
-    })
-
-    it('has correct displayName', () => {
-      expect(Text.displayName).toBe('@pyreon/elements/Text')
-    })
-
-    it('has correct pkgName', () => {
-      expect(Text.pkgName).toBe('@pyreon/elements')
-    })
-
-    it('has correct PYREON__COMPONENT', () => {
-      expect(Text.PYREON__COMPONENT).toBe('@pyreon/elements/Text')
-    })
-  })
-
-  describe('default rendering', () => {
-    it('returns a VNode whose type is the Styled component (a function)', () => {
-      const result = asVNode(Text({ children: 'Hello' }))
-      expect(typeof result.type).toBe('function')
-    })
-
-    it('does not set as prop when no tag or paragraph provided', () => {
-      const result = asVNode(Text({ children: 'Hello' }))
-      expect(result.props.as).toBeUndefined()
-    })
-
-    it('renders children in output', () => {
-      const result = asVNode(Text({ children: 'Hello' }))
-      expect(result.props.children).toBe('Hello')
-    })
-
-    it('passes $text prop with extraStyles', () => {
-      const result = asVNode(Text({ children: 'Hello' }))
-      expect(result.props.$text).toEqual({ extraStyles: undefined })
-    })
-
-    it('renders null content when no children or label', () => {
-      const result = asVNode(Text({}))
-      expect(result.props.children).toBeUndefined()
-    })
-  })
-
-  describe('content fallback chain', () => {
-    it('renders children as content', () => {
-      const result = asVNode(Text({ children: 'child content' }))
-      expect(result.props.children).toBe('child content')
-    })
-
-    it('renders label when children not provided', () => {
-      const result = asVNode(Text({ label: 'label text' }))
-      expect(result.props.children).toBe('label text')
-    })
-
-    it('prefers children over label', () => {
-      const result = asVNode(Text({ children: 'child', label: 'label' }))
-      expect(result.props.children).toBe('child')
-    })
-
-    it('renders VNode children', () => {
-      const child = h('strong', null, 'bold')
-      const result = asVNode(Text({ children: child }))
-      expect(result.props.children).toBe(child)
-    })
-
-    it('renders number label', () => {
-      const result = asVNode(Text({ label: 42 }))
-      expect(result.props.children).toBe(42)
-    })
-  })
-
-  describe('tag prop', () => {
-    it('sets as prop to h1', () => {
-      const result = asVNode(Text({ tag: 'h1', children: 'Heading' }))
-      expect(result.props.as).toBe('h1')
-    })
-
-    it('sets as prop to h2', () => {
-      const result = asVNode(Text({ tag: 'h2', children: 'Sub heading' }))
-      expect(result.props.as).toBe('h2')
-    })
-
-    it('sets as prop to strong', () => {
-      const result = asVNode(Text({ tag: 'strong', children: 'Bold' }))
-      expect(result.props.as).toBe('strong')
-    })
-
-    it('sets as prop to em', () => {
-      const result = asVNode(Text({ tag: 'em', children: 'Italic' }))
-      expect(result.props.as).toBe('em')
-    })
-
-    it('does not forward tag as a prop', () => {
-      const result = asVNode(Text({ tag: 'h1', children: 'Heading' }))
-      expect(result.props.tag).toBeUndefined()
-    })
-  })
-
-  describe('paragraph prop', () => {
-    it('sets as prop to p when paragraph is true', () => {
-      const result = asVNode(Text({ paragraph: true, children: 'Paragraph text' }))
-      expect(result.props.as).toBe('p')
-    })
-
-    it('does not set as prop when paragraph is false', () => {
-      const result = asVNode(Text({ paragraph: false, children: 'Inline text' }))
-      expect(result.props.as).toBeUndefined()
-    })
-
-    it('paragraph is overridden when tag is also set (tag wins because paragraph branch is skipped)', () => {
-      // When paragraph is true, finalTag = 'p'
-      // When tag is also set, the else branch is not reached, so paragraph wins
-      const result = asVNode(Text({ tag: 'h1', paragraph: true, children: 'Heading' }))
-      expect(result.props.as).toBe('p')
-    })
-
-    it('uses tag when paragraph is false', () => {
-      const result = asVNode(Text({ tag: 'h1', paragraph: false, children: 'Heading' }))
-      expect(result.props.as).toBe('h1')
-    })
-
-    it('does not forward paragraph as a prop', () => {
-      const result = asVNode(Text({ paragraph: true, children: 'text' }))
-      expect(result.props.paragraph).toBeUndefined()
-    })
-  })
-
-  describe('css prop', () => {
-    it('passes css value through $text.extraStyles', () => {
-      const customCss = 'color: red;'
-      const result = asVNode(Text({ css: customCss, children: 'styled' }))
-      expect(result.props.$text).toEqual({ extraStyles: customCss })
-    })
-
-    it('passes undefined extraStyles when no css prop', () => {
-      const result = asVNode(Text({ children: 'plain' }))
-      expect(result.props.$text).toEqual({ extraStyles: undefined })
-    })
-
-    it('does not forward css as a direct prop', () => {
-      const result = asVNode(Text({ css: 'color: blue;', children: 'text' }))
-      expect(result.props.css).toBeUndefined()
-    })
-  })
-
-  describe('HTML attribute forwarding', () => {
-    it('passes through id', () => {
-      const result = asVNode(Text({ id: 'text-id', children: 'text' }))
-      expect(result.props.id).toBe('text-id')
-    })
-
-    it('passes through role', () => {
-      const result = asVNode(Text({ role: 'heading', children: 'text' }))
-      expect(result.props.role).toBe('heading')
-    })
-
-    it('passes through title', () => {
-      const result = asVNode(Text({ title: 'tooltip', children: 'text' }))
-      expect(result.props.title).toBe('tooltip')
-    })
-
-    it('passes through data- attributes', () => {
-      const result = asVNode(Text({ 'data-testid': 'txt', children: 'text' }))
-      expect(result.props['data-testid']).toBe('txt')
-    })
-
-    it('passes through aria- attributes', () => {
-      const result = asVNode(Text({ 'aria-label': 'label', children: 'text' }))
-      expect(result.props['aria-label']).toBe('label')
-    })
-
-    it('passes through on-prefixed event handlers', () => {
-      const handler = () => undefined
-      const result = asVNode(Text({ onClick: handler, children: 'text' }))
-      expect(result.props.onClick).toBe(handler)
-    })
-
-    it('passes through ref', () => {
-      const ref = { current: null }
-      const result = asVNode(Text({ ref, children: 'text' }))
-      expect(result.props.ref).toBe(ref)
-    })
-
-    it('passes through class', () => {
-      const result = asVNode(Text({ class: 'title', children: 'text' }))
-      expect(result.props.class).toBe('title')
-    })
-
-    it('passes through style', () => {
-      const result = asVNode(Text({ style: 'color: red;', children: 'text' }))
-      expect(result.props.style).toBe('color: red;')
-    })
-
-    it('does not set class when not provided', () => {
-      const result = asVNode(Text({ children: 'text' }))
-      expect(result.props.class).toBeUndefined()
-    })
-
-    it('does not set style when not provided', () => {
-      const result = asVNode(Text({ children: 'text' }))
-      expect(result.props.style).toBeUndefined()
-    })
-  })
-
-  describe('reserved props are consumed and not forwarded', () => {
-    it('does not forward paragraph, label, tag, or css', () => {
-      const result = asVNode(
-        Text({
-          paragraph: true,
-          label: 'lbl',
-          children: 'text',
-          tag: 'h1',
-          css: 'font-size: 2rem;',
-        }),
-      )
-      expect(result.props.paragraph).toBeUndefined()
-      expect(result.props.label).toBeUndefined()
-      expect(result.props.tag).toBeUndefined()
-      expect(result.props.css).toBeUndefined()
-    })
-  })
-
-  describe('combined props', () => {
-    it('renders with paragraph, css, class, and data attribute together', () => {
-      const result = asVNode(
-        Text({
-          paragraph: true,
-          css: 'margin: 0;',
-          class: 'intro',
-          'data-testid': 'intro-text',
-          children: 'Hello world',
-        }),
-      )
-
-      expect(typeof result.type).toBe('function')
-      expect(result.props.as).toBe('p')
-      expect(result.props.$text).toEqual({ extraStyles: 'margin: 0;' })
-      expect(result.props.class).toBe('intro')
-      expect(result.props['data-testid']).toBe('intro-text')
-      expect(result.props.children).toBe('Hello world')
-      // Reserved props not forwarded
-      expect(result.props.paragraph).toBeUndefined()
-      expect(result.props.css).toBeUndefined()
-    })
-
-    it('renders with tag, ref, and event handler together', () => {
-      const ref = { current: null }
-      const handler = () => undefined
-      const result = asVNode(
-        Text({
-          tag: 'h2',
-          ref,
-          onClick: handler,
-          children: 'Subtitle',
-        }),
-      )
-
-      expect(result.props.as).toBe('h2')
-      expect(result.props.ref).toBe(ref)
-      expect(result.props.onClick).toBe(handler)
-      expect(result.props.children).toBe('Subtitle')
-    })
-  })
-})

package/src/__tests__/Util.test.ts

@@ -1,63 +0,0 @@
-import type { VNodeChild } from '@pyreon/core'
-import { h } from '@pyreon/core'
-import { describe, expect, it } from 'vitest'
-import Util from '../Util/component'
-
-describe('Util', () => {
-  describe('statics', () => {
-    it('has displayName', () => {
-      expect(Util.displayName).toBe('@pyreon/elements/Util')
-    })
-
-    it('has pkgName', () => {
-      expect(Util.pkgName).toBe('@pyreon/elements')
-    })
-
-    it('has PYREON__COMPONENT', () => {
-      expect(Util.PYREON__COMPONENT).toBe('@pyreon/elements/Util')
-    })
-  })
-
-  describe('className injection', () => {
-    it('calls render with className prop for string className', () => {
-      const child = h('div', { 'data-testid': 'child' }, 'Content')
-      const result = Util({ children: child, className: 'my-class' }) as VNodeChild
-      // render() should merge className into the child
-      expect(result).toBeDefined()
-    })
-
-    it('joins array className into space-separated string', () => {
-      const child = h('div', { 'data-testid': 'child' }, 'Content')
-      const result = Util({ children: child, className: ['cls-a', 'cls-b'] }) as VNodeChild
-      expect(result).toBeDefined()
-    })
-  })
-
-  describe('style injection', () => {
-    it('calls render with style prop for style object', () => {
-      const child = h('div', { 'data-testid': 'child' }, 'Content')
-      const result = Util({ children: child, style: { color: 'red' } }) as VNodeChild
-      expect(result).toBeDefined()
-    })
-  })
-
-  describe('both className and style', () => {
-    it('passes both className and style to render', () => {
-      const child = h('div', { 'data-testid': 'child' }, 'Content')
-      const result = Util({
-        children: child,
-        className: 'my-class',
-        style: { color: 'blue' },
-      }) as VNodeChild
-      expect(result).toBeDefined()
-    })
-  })
-
-  describe('no-op when no props', () => {
-    it('renders children without modification when no className or style', () => {
-      const child = h('div', { 'data-testid': 'child' }, 'Content')
-      const result = Util({ children: child }) as VNodeChild
-      expect(result).toBeDefined()
-    })
-  })
-})

package/src/__tests__/Wrapper-innerhtml.test.tsx

@@ -1,178 +0,0 @@
-/**
- * Regression: Wrapper used to silently drop `dangerouslySetInnerHTML`.
- *
- * Bug shape: `OWN_KEYS` listed `'dangerouslySetInnerHTML'`, so `splitProps`
- * moved it into `own`. The Styled JSX call only spread `...commonProps`
- * (built from `rest`) and never re-attached `own.dangerouslySetInnerHTML`.
- * Both runtimes (`runtime-server` and `runtime-dom`) support the prop —
- * the data was lost between Wrapper and the renderer.
- *
- * Two test layers:
- *
- * 1. **Mock-vnode tests** (this file's first describe block) — fast
- *    structural assertions against the vnode tree Wrapper returns. Catches
- *    the prop drop at the API surface where it originally happened.
- *
- * 2. **Real-h() mount tests** (second describe block) — uses real `h()` +
- *    `mount()` to exercise the full Element → Wrapper → Styled → DOM
- *    pipeline. Catches the prop drop wherever it might occur along the
- *    chain (Wrapper, Element, rocketstyle attrs HOC, runtime-dom prop
- *    application). This is the "safety net" pattern from
- *    .claude/rules/test-environment-parity.md — mock-vnode tests bypass
- *    the HOC + mount pipeline and CAN miss bugs that surface only when
- *    the real `h()` + mount path runs, exactly like PR #197's silent
- *    metadata drop. Always have both.
- */
-import { h, type VNode } from '@pyreon/core'
-import { mount } from '@pyreon/runtime-dom'
-import { describe, expect, it, vi } from 'vitest'
-
-vi.mock('~/utils', () => ({
-  IS_DEVELOPMENT: false,
-}))
-
-import Wrapper from '../helpers/Wrapper/component'
-import { Element } from '../Element'
-
-const asVNode = (v: unknown) => v as VNode
-
-describe('Wrapper — dangerouslySetInnerHTML forwarding (mock-vnode)', () => {
-  it('forwards dangerouslySetInnerHTML to the rendered Styled vnode (non-needsFix path)', () => {
-    const html = { __html: '<svg>x</svg>' }
-    const result = asVNode(
-      Wrapper({
-        tag: 'div',
-        dangerouslySetInnerHTML: html,
-      }),
-    )
-
-    // Bug-shape assertion: the prop must reach the rendered vnode.
-    // Pre-fix this is `undefined` → SVG is silently dropped.
-    expect(result.props.dangerouslySetInnerHTML).toBe(html)
-  })
-
-  it('drops children when dangerouslySetInnerHTML is present (mutually exclusive)', () => {
-    const html = { __html: '<svg>x</svg>' }
-    const result = asVNode(
-      Wrapper({
-        tag: 'div',
-        dangerouslySetInnerHTML: html,
-        // children would conflict — innerHTML wins.
-        children: 'should be dropped',
-      }),
-    )
-
-    // children slot must not coexist with innerHTML — runtime-server's
-    // and runtime-dom's prop pipeline both treat them as inner-content
-    // sources, and emitting both would result in either a malformed
-    // tree or innerHTML being overwritten by the children mount.
-    expect(result.children).toEqual([])
-  })
-
-  it('forwards dangerouslySetInnerHTML on the needsFix path (button/fieldset/legend)', () => {
-    // button/fieldset/legend take the two-layer flex fix path. innerHTML
-    // belongs on the inner styled node (where the actual content goes),
-    // NOT on the outer wrapper.
-    const html = { __html: '<span>label</span>' }
-    const result = asVNode(
-      Wrapper({
-        tag: 'button',
-        dangerouslySetInnerHTML: html,
-      }),
-    )
-
-    // The `needsFix` branch should NOT trigger when innerHTML is set
-    // (innerHTML replaces all children, including the inner flex-fix
-    // layer). The simplest correct behavior: bypass needsFix when
-    // innerHTML is present and forward the prop on the single Styled.
-    expect(result.props.dangerouslySetInnerHTML).toBe(html)
-  })
-})
-
-// Real-h() mount tests — parallel coverage that runs the full pipeline.
-// Element uses Wrapper internally; mounting Element with
-// `dangerouslySetInnerHTML` exercises every layer the bug could surface
-// at: Element's split → Wrapper → Styled → runtime-dom's prop application.
-// happy-dom is the test environment; `dangerouslySetInnerHTML` translates
-// to `el.innerHTML = ...` which happy-dom handles natively.
-describe('Wrapper — dangerouslySetInnerHTML forwarding (real h() + mount)', () => {
-  it('Element with dangerouslySetInnerHTML actually injects HTML into the DOM (non-needsFix tag)', () => {
-    const root = document.createElement('div')
-    document.body.appendChild(root)
-
-    const unmount = mount(
-      h(Element, {
-        tag: 'div',
-        'data-testid': 'innerhtml-host',
-        dangerouslySetInnerHTML: { __html: '<svg data-marker="real-h-svg">x</svg>' },
-      }),
-      root,
-    )
-
-    // The structural assertion: SVG element exists in the rendered DOM.
-    // Pre-fix Wrapper dropped the prop → no SVG → null query result.
-    const svg = root.querySelector('[data-marker="real-h-svg"]')
-    expect(svg).not.toBeNull()
-    expect(svg?.tagName.toLowerCase()).toBe('svg')
-
-    unmount()
-    root.remove()
-  })
-
-  it('Element with dangerouslySetInnerHTML on a needsFix tag (button) still injects HTML', () => {
-    // button is a needsFix tag (two-layer flex fix). The Wrapper branch
-    // must bypass the two-layer fix when innerHTML is present, OR forward
-    // innerHTML to the right layer. Either way the rendered DOM must
-    // contain the user-supplied HTML.
-    const root = document.createElement('div')
-    document.body.appendChild(root)
-
-    const unmount = mount(
-      h(Element, {
-        tag: 'button',
-        'data-testid': 'innerhtml-button',
-        dangerouslySetInnerHTML: { __html: '<span data-marker="real-h-button-label">click me</span>' },
-      }),
-      root,
-    )
-
-    const span = root.querySelector('[data-marker="real-h-button-label"]')
-    expect(span).not.toBeNull()
-    expect(span?.textContent).toBe('click me')
-
-    unmount()
-    root.remove()
-  })
-
-  it('children passed alongside dangerouslySetInnerHTML are dropped (innerHTML wins)', () => {
-    // Bug shape: if Wrapper's `own.children` leaks into the rendered vnode
-    // alongside `dangerouslySetInnerHTML`, runtime-dom would either mount
-    // children INTO the innerHTML-populated element (overwriting), or land
-    // both side-by-side. The contract is that innerHTML wins and children
-    // are dropped. Verifying at the DOM level catches both failure shapes.
-    const root = document.createElement('div')
-    document.body.appendChild(root)
-
-    const unmount = mount(
-      h(
-        Element,
-        {
-          tag: 'div',
-          'data-testid': 'innerhtml-with-children',
-          dangerouslySetInnerHTML: { __html: '<i data-marker="real-h-winner">html wins</i>' },
-        },
-        'this child text should NOT appear',
-      ),
-      root,
-    )
-
-    const host = root.querySelector('[data-testid="innerhtml-with-children"]')!
-    expect(host.querySelector('[data-marker="real-h-winner"]')).not.toBeNull()
-    // The child string must not appear anywhere in the rendered host.
-    expect(host.textContent).not.toContain('this child text should NOT appear')
-    expect(host.textContent).toContain('html wins')
-
-    unmount()
-    root.remove()
-  })
-})