49 lines
1.6 KiB
JavaScript
49 lines
1.6 KiB
JavaScript
import { describe, expect, it } from 'vitest'
|
|
import { html } from '../src/html.js'
|
|
|
|
describe('html tagged template', () => {
|
|
it('produces a {type, props, children} vnode', () => {
|
|
const vnode = html`<p>hi</p>`
|
|
expect(vnode).toMatchObject({ type: 'p', children: ['hi'] })
|
|
})
|
|
|
|
it('reads static attributes into props', () => {
|
|
const vnode = html`<a href="/x">y</a>`
|
|
expect(vnode.props).toEqual({ href: '/x' })
|
|
})
|
|
|
|
it('reads interpolated attribute values into props', () => {
|
|
const href = '/dynamic'
|
|
const vnode = html`<a href=${href}>y</a>`
|
|
expect(vnode.props.href).toBe('/dynamic')
|
|
})
|
|
|
|
it('treats bare attributes as boolean true', () => {
|
|
const vnode = html`<input disabled />`
|
|
expect(vnode.type).toBe('input')
|
|
expect(vnode.props).toEqual({ disabled: true })
|
|
})
|
|
|
|
it('supports spread props', () => {
|
|
const vnode = html`<a ...${{ href: '/x', title: 't' }}>y</a>`
|
|
expect(vnode.props).toMatchObject({ href: '/x', title: 't' })
|
|
})
|
|
|
|
it('nests child vnodes', () => {
|
|
const vnode = html`<ul><li>a</li></ul>`
|
|
expect(vnode.type).toBe('ul')
|
|
expect(vnode.children[0]).toMatchObject({ type: 'li', children: ['a'] })
|
|
})
|
|
|
|
it('interleaves text and interpolated values as children', () => {
|
|
const vnode = html`<p>Hello ${'World'}</p>`
|
|
expect(vnode.type).toBe('p')
|
|
expect(vnode.children.join('')).toBe('Hello World')
|
|
})
|
|
|
|
it('returns an array for multiple root nodes', () => {
|
|
const vnodes = html`<p>a</p><p>b</p>`
|
|
expect(Array.isArray(vnodes)).toBe(true)
|
|
expect(vnodes).toHaveLength(2)
|
|
})
|
|
})
|