similarbuild 0.1.0

package/templates/skills/sb-compare-visual/scripts/tests/test-compare-tokens.mjs

@@ -0,0 +1,350 @@
+#!/usr/bin/env node
+// test-compare-tokens.mjs — Full coverage of the token comparison logic.
+// Pure functions, no deps — runs anywhere Node ≥ 20 runs.
+
+import { fileURLToPath } from 'node:url'
+import { dirname, resolve } from 'node:path'
+import { strict as assert } from 'node:assert'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const LIB = resolve(here, '..', 'lib', 'compare-tokens.mjs')
+
+const { compareTokens, compareGeometryBlocks, sortBySeverity, parsePx, parseLineHeight, normalizeColor } = await import(LIB)
+
+let passed = 0
+let failed = 0
+
+function test(name, fn) {
+  try {
+    fn()
+    process.stdout.write(`ok - ${name}\n`)
+    passed++
+  } catch (err) {
+    process.stdout.write(`not ok - ${name}\n  ${err.message}\n`)
+    failed++
+  }
+}
+
+// ─── parsePx ────────────────────────────────────────────────────────────────
+
+test('parsePx: handles px', () => {
+  assert.equal(parsePx('24px'), 24)
+  assert.equal(parsePx('0px'), 0)
+  assert.equal(parsePx('-4px'), -4)
+})
+
+test('parsePx: handles rem (16px base)', () => {
+  assert.equal(parsePx('1.5rem'), 24)
+  assert.equal(parsePx('2rem'), 32)
+})
+
+test('parsePx: handles em (16px base)', () => {
+  assert.equal(parsePx('1em'), 16)
+})
+
+test('parsePx: returns null on auto/none/normal/empty', () => {
+  assert.equal(parsePx('auto'), null)
+  assert.equal(parsePx('none'), null)
+  assert.equal(parsePx('normal'), null)
+  assert.equal(parsePx(''), null)
+  assert.equal(parsePx(null), null)
+  assert.equal(parsePx(undefined), null)
+})
+
+test('parsePx: returns null on garbage', () => {
+  assert.equal(parsePx('foo'), null)
+  assert.equal(parsePx('24'), 24) // bare number defaults to px
+})
+
+// ─── parseLineHeight ────────────────────────────────────────────────────────
+
+test('parseLineHeight: unitless', () => {
+  const r = parseLineHeight('1.5')
+  assert.equal(r.kind, 'unitless')
+  assert.equal(r.value, 1.5)
+})
+
+test('parseLineHeight: px', () => {
+  const r = parseLineHeight('24px')
+  assert.equal(r.kind, 'px')
+  assert.equal(r.value, 24)
+})
+
+test('parseLineHeight: normal', () => {
+  const r = parseLineHeight('normal')
+  assert.equal(r.kind, 'normal')
+  assert.equal(r.value, null)
+})
+
+// ─── normalizeColor ─────────────────────────────────────────────────────────
+
+test('normalizeColor: hex 6-digit', () => {
+  assert.equal(normalizeColor('#d8112a'), '#d8112a')
+  assert.equal(normalizeColor('#D8112A'), '#d8112a')
+})
+
+test('normalizeColor: hex 3-digit expands', () => {
+  assert.equal(normalizeColor('#abc'), '#aabbcc')
+})
+
+test('normalizeColor: hex 8-digit drops alpha', () => {
+  assert.equal(normalizeColor('#d8112aff'), '#d8112a')
+})
+
+test('normalizeColor: rgb()', () => {
+  assert.equal(normalizeColor('rgb(216, 17, 42)'), '#d8112a')
+})
+
+test('normalizeColor: rgba() drops alpha', () => {
+  assert.equal(normalizeColor('rgba(216, 17, 42, 0.5)'), '#d8112a')
+})
+
+test('normalizeColor: rgb() space-separated with alpha slash', () => {
+  assert.equal(normalizeColor('rgb(216 17 42 / 0.5)'), '#d8112a')
+})
+
+test('normalizeColor: returns null on transparent/inherit/currentcolor', () => {
+  assert.equal(normalizeColor('transparent'), null)
+  assert.equal(normalizeColor('inherit'), null)
+  assert.equal(normalizeColor('currentcolor'), null)
+})
+
+// ─── sortBySeverity ─────────────────────────────────────────────────────────
+
+test('sortBySeverity: high before medium before low (stable)', () => {
+  const sorted = sortBySeverity([
+    { area: 'a', severity: 'low' },
+    { area: 'b', severity: 'high' },
+    { area: 'c', severity: 'medium' },
+    { area: 'd', severity: 'high' },
+    { area: 'e', severity: 'low' },
+  ])
+  assert.deepEqual(
+    sorted.map((d) => d.area),
+    ['b', 'd', 'c', 'a', 'e'],
+  )
+})
+
+// ─── compareTokens — typography ─────────────────────────────────────────────
+
+test('compareTokens: identical tokens yield no diffs', () => {
+  const tokens = {
+    h1: { present: true, 'font-size': '24px', 'font-weight': '300', color: '#000', 'font-family': 'Roboto', 'line-height': '1.2' },
+    h2: { present: false },
+    h3: { present: false },
+    body: { 'font-size': '18px', 'font-weight': '400', color: '#111', 'font-family': 'Roboto' },
+    button: { present: false },
+    container: { computedRenderedW: 390 },
+    images: { count: 3 },
+  }
+  const diffs = compareTokens(tokens, JSON.parse(JSON.stringify(tokens)))
+  assert.deepEqual(diffs, [])
+})
+
+test('compareTokens: h1 font-size 1px diff is within tolerance', () => {
+  const live = { h1: { present: true, 'font-size': '24px' } }
+  const build = { h1: { present: true, 'font-size': '25px' } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 0)
+})
+
+test('compareTokens: h1 font-size 3px diff flagged high', () => {
+  const live = { h1: { present: true, 'font-size': '27px' } }
+  const build = { h1: { present: true, 'font-size': '24px' } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].area, 'h1')
+  assert.equal(diffs[0].severity, 'high')
+  assert.match(diffs[0].issue, /24px vs 27px expected/)
+  assert.equal(diffs[0].deltaPx, -3)
+})
+
+test('compareTokens: h3 font-size diff flagged medium (not high)', () => {
+  const live = { h3: { present: true, 'font-size': '20px' } }
+  const build = { h3: { present: true, 'font-size': '24px' } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].severity, 'medium')
+})
+
+test('compareTokens: h1 color hex diff flagged high', () => {
+  const live = { h1: { present: true, color: '#d8112a' } }
+  const build = { h1: { present: true, color: '#d82a11' } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].severity, 'high')
+  assert.match(diffs[0].issue, /color #d82a11 vs #d8112a expected/)
+})
+
+test('compareTokens: h1 color rgb() vs hex equivalent → no diff', () => {
+  const live = { h1: { present: true, color: '#d8112a' } }
+  const build = { h1: { present: true, color: 'rgb(216, 17, 42)' } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 0)
+})
+
+test('compareTokens: h1 font-weight diff flagged medium', () => {
+  const live = { h1: { present: true, 'font-weight': '300' } }
+  const build = { h1: { present: true, 'font-weight': '700' } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].severity, 'medium')
+  assert.match(diffs[0].issue, /font-weight/)
+})
+
+test('compareTokens: h1 font-family head diff flagged low', () => {
+  const live = { h1: { present: true, 'font-family': 'Roboto, sans-serif' } }
+  const build = { h1: { present: true, 'font-family': 'Inter, sans-serif' } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].severity, 'low')
+})
+
+test('compareTokens: h1 font-family same head with different fallbacks → no diff', () => {
+  const live = { h1: { present: true, 'font-family': 'Roboto, sans-serif' } }
+  const build = { h1: { present: true, 'font-family': 'Roboto, Arial, sans-serif' } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 0)
+})
+
+test('compareTokens: h1 missing in build flagged high', () => {
+  const live = { h1: { present: true, text: 'Hero' } }
+  const build = { h1: { present: false } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].severity, 'high')
+  assert.equal(diffs[0].liveText, 'Hero')
+})
+
+test('compareTokens: h1 missing in live but present in build flagged medium', () => {
+  const live = { h1: { present: false } }
+  const build = { h1: { present: true } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].severity, 'medium')
+})
+
+// ─── compareTokens — button ─────────────────────────────────────────────────
+
+test('compareTokens: button height 2px diff within tolerance', () => {
+  const live = { button: { present: true, renderedH: 40 } }
+  const build = { button: { present: true, renderedH: 42 } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 0)
+})
+
+test('compareTokens: button height 4px diff flagged medium', () => {
+  const live = { button: { present: true, renderedH: 40 } }
+  const build = { button: { present: true, renderedH: 44 } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].severity, 'medium')
+  assert.equal(diffs[0].deltaPx, 4)
+})
+
+test('compareTokens: button background-color diff flagged high', () => {
+  const live = { button: { present: true, 'background-color': '#000' } }
+  const build = { button: { present: true, 'background-color': '#fff' } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].severity, 'high')
+  assert.match(diffs[0].issue, /background-color/)
+})
+
+// ─── compareTokens — container & images ─────────────────────────────────────
+
+test('compareTokens: container width 5px diff within tolerance', () => {
+  const live = { container: { computedRenderedW: 390 } }
+  const build = { container: { computedRenderedW: 395 } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 0)
+})
+
+test('compareTokens: container width 10px diff flagged low', () => {
+  const live = { container: { computedRenderedW: 390 } }
+  const build = { container: { computedRenderedW: 400 } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].severity, 'low')
+})
+
+test('compareTokens: image count drop flagged high', () => {
+  const live = { images: { count: 5 } }
+  const build = { images: { count: 3 } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].severity, 'high')
+})
+
+test('compareTokens: image count rise flagged medium', () => {
+  const live = { images: { count: 3 } }
+  const build = { images: { count: 5 } }
+  const diffs = compareTokens(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].severity, 'medium')
+})
+
+// ─── priority sort end-to-end ───────────────────────────────────────────────
+
+test('compareTokens: many diffs → sorted high → medium → low', () => {
+  const live = {
+    h1: { present: true, 'font-size': '27px', color: '#d8112a', 'font-family': 'Roboto, sans-serif' },
+    button: { present: true, renderedH: 40 },
+    container: { computedRenderedW: 390 },
+  }
+  const build = {
+    h1: { present: true, 'font-size': '24px', color: '#d82a11', 'font-family': 'Inter, sans-serif' },
+    button: { present: true, renderedH: 50 },
+    container: { computedRenderedW: 410 },
+  }
+  const diffs = compareTokens(live, build)
+  // Severities, in order, must descend
+  const sevs = diffs.map((d) => d.severity)
+  for (let i = 1; i < sevs.length; i++) {
+    const order = { high: 0, medium: 1, low: 2 }
+    assert.ok(order[sevs[i]] >= order[sevs[i - 1]], `order broken at ${i}: ${sevs.join(',')}`)
+  }
+  // We expect at least one high, one medium, one low
+  assert.ok(sevs.includes('high'))
+  assert.ok(sevs.includes('medium'))
+  assert.ok(sevs.includes('low'))
+})
+
+// ─── compareGeometryBlocks ──────────────────────────────────────────────────
+
+test('compareGeometryBlocks: build overflow when live does not → high', () => {
+  const live = { viewportOverflow: false, totalHeight: 1000 }
+  const build = { viewportOverflow: true, totalHeight: 1000 }
+  const diffs = compareGeometryBlocks(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].severity, 'high')
+  assert.match(diffs[0].issue, /overflows/)
+})
+
+test('compareGeometryBlocks: 50% taller build flagged high', () => {
+  const live = { viewportOverflow: false, totalHeight: 1000 }
+  const build = { viewportOverflow: false, totalHeight: 1500 }
+  const diffs = compareGeometryBlocks(live, build)
+  assert.equal(diffs.length, 1)
+  assert.equal(diffs[0].severity, 'high')
+})
+
+test('compareGeometryBlocks: 10% taller build within tolerance', () => {
+  const live = { viewportOverflow: false, totalHeight: 1000 }
+  const build = { viewportOverflow: false, totalHeight: 1100 }
+  const diffs = compareGeometryBlocks(live, build)
+  assert.equal(diffs.length, 0)
+})
+
+test('compareTokens: null inputs return empty diffs', () => {
+  assert.deepEqual(compareTokens(null, null), [])
+  assert.deepEqual(compareTokens(null, {}), [])
+  assert.deepEqual(compareTokens({}, null), [])
+})
+
+if (failed > 0) {
+  process.stdout.write(`\n${failed} failed, ${passed} passed\n`)
+  process.exit(1)
+}
+process.stdout.write(`\n${passed} passed\n`)
+process.exit(0)