61 lines
2.1 KiB
JavaScript
61 lines
2.1 KiB
JavaScript
import { describe, expect, it, vi } from 'vitest'
|
|
import { createElement } from '../../src/utils/create-element.mjs'
|
|
import { html } from '../../src/html.js'
|
|
|
|
describe('createElement', () => {
|
|
it('turns a string leaf into a text node', () => {
|
|
const node = createElement('hello')
|
|
expect(node.nodeType).toBe(Node.TEXT_NODE)
|
|
expect(node.textContent).toBe('hello')
|
|
})
|
|
|
|
it('builds an element from a vnode', () => {
|
|
const el = createElement({ type: 'p', props: null, children: ['hi'] })
|
|
expect(el.tagName).toBe('P')
|
|
expect(el.textContent).toBe('hi')
|
|
})
|
|
|
|
it('assigns known DOM properties directly', () => {
|
|
const el = createElement({ type: 'div', props: { id: 'foo' }, children: [] })
|
|
expect(el.id).toBe('foo')
|
|
})
|
|
|
|
it('falls back to setAttribute for unknown props', () => {
|
|
const el = createElement({ type: 'div', props: { 'data-x': 'y' }, children: [] })
|
|
expect(el.getAttribute('data-x')).toBe('y')
|
|
})
|
|
|
|
it('applies style objects', () => {
|
|
const el = createElement(html`<div style=${{ color: 'red', padding: '1em' }}>x</div>`)
|
|
expect(el.style.color).toBe('red')
|
|
expect(el.style.padding).toBe('1em')
|
|
})
|
|
|
|
it('attaches event handlers passed as props', () => {
|
|
const onClick = vi.fn()
|
|
const btn = createElement(html`<button onClick=${onClick}>hey</button>`)
|
|
btn.click()
|
|
expect(onClick).toHaveBeenCalledOnce()
|
|
})
|
|
|
|
it('appends nested element and text children', () => {
|
|
const el = createElement(html`<ul><li>a</li><li>b</li></ul>`)
|
|
expect(el.tagName).toBe('UL')
|
|
expect(el.querySelectorAll('li')).toHaveLength(2)
|
|
expect(el.textContent).toBe('ab')
|
|
})
|
|
|
|
it('wraps an array of vnodes in a document fragment', () => {
|
|
const frag = createElement([
|
|
{ type: 'p', props: null, children: ['a'] },
|
|
{ type: 'p', props: null, children: ['b'] },
|
|
])
|
|
expect(frag.nodeType).toBe(Node.DOCUMENT_FRAGMENT_NODE)
|
|
expect(frag.childNodes).toHaveLength(2)
|
|
})
|
|
|
|
it('handles a multi-root html template as a fragment', () => {
|
|
const frag = createElement(html`<p>a</p><p>b</p>`)
|
|
expect(frag.querySelectorAll('p')).toHaveLength(2)
|
|
})
|
|
})
|