buuh/packages/html/test/server.test.js

// Server renderer behavior, matching nanohtml 1.x server semantics.

import { test } from 'node:test'
import assert from 'node:assert'

import html from '@uhhm/buuh-html'
import raw from '@uhhm/buuh-html/raw'

test('renders a template to a string', () => {
  const res = html`<p>hello</p>`
  assert.strictEqual(res.toString(), '<p>hello</p>')
})

test('escapes interpolated text', () => {
  const res = html`<p>${'<script>alert(1)</script>'}</p>`
  assert.strictEqual(res.toString(), '<p>&lt;script&gt;alert(1)&lt;/script&gt;</p>')
})

test('raw() bypasses escaping', () => {
  const res = html`<p>${raw('<em>hi</em>')}</p>`
  assert.strictEqual(res.toString(), '<p><em>hi</em></p>')
})

test('nested templates are not double-encoded', () => {
  const inner = html`<em>&</em>`
  const res = html`<p>${inner}</p>`
  assert.strictEqual(res.toString(), '<p><em>&</em></p>')
})

test('arrays of children are joined', () => {
  const items = ['a', 'b'].map((x) => html`<li>${x}</li>`)
  const res = html`<ul>${items}</ul>`
  assert.strictEqual(res.toString(), '<ul><li>a</li><li>b</li></ul>')
})

test('unquoted attribute interpolation is quoted', () => {
  const res = html`<div class=${'a b'}></div>`
  assert.strictEqual(res.toString(), '<div class="a b"></div>')
})

test('boolean attributes render when truthy and drop when falsy', () => {
  const on = html`<input disabled=${true} />`
  const off = html`<input disabled=${false} />`
  assert.strictEqual(on.toString(), '<input disabled="disabled" />')
  assert.strictEqual(off.toString(), '<input  />'.replace('  ', ' '))
})

test('event handler functions leave no trace in markup', () => {
  const res = html`<button onclick=${() => {}}>go</button>`
  assert.strictEqual(res.toString(), '<button >go</button>')
})

test('handler-shaped attributes with non-function values still render', () => {
  const res = html`<a onclick=${'confirm()'}>x</a>`
  assert.strictEqual(res.toString(), '<a onclick="confirm()">x</a>')
})

test('spread-style object interpolation renders attributes', () => {
  const res = html`<div ${{ class: 'x', hidden: true }}></div>`
  assert.strictEqual(res.toString(), '<div class="x" hidden="hidden"></div>')
})