similarbuild 0.1.0

package/templates/skills/sb-tweak/scripts/tests/test-element-locator.mjs

@@ -0,0 +1,418 @@
+#!/usr/bin/env node
+// test-element-locator.mjs — Unit tests for lib/element-locator.mjs.
+// Covers: candidate collection by type, qualifier scoring, ordinal selection,
+// CSS-rule discovery, ambiguity detection, selector matching.
+//
+// Loads cheerio lazily — gracefully skips integration tests when not installed.
+
+import { strict as assert } from 'node:assert'
+import {
+  locateCandidates,
+  isAmbiguous,
+  findCssRule,
+  findDeclaration,
+  walkTopLevelRules,
+  selectorMatches,
+  splitStyleBlocks,
+  findCssRuleAcrossBlocks,
+} from '../lib/element-locator.mjs'
+
+let passed = 0
+let failed = 0
+let cheerio = null
+
+function test(name, fn) {
+  try {
+    const result = fn()
+    if (result && typeof result.then === 'function') {
+      return result.then(
+        () => { process.stdout.write(`ok - ${name}\n`); passed++ },
+        (err) => { process.stdout.write(`not ok - ${name}\n  ${err.message}\n`); failed++ },
+      )
+    }
+    process.stdout.write(`ok - ${name}\n`)
+    passed++
+  } catch (err) {
+    process.stdout.write(`not ok - ${name}\n  ${err.message}\n`)
+    failed++
+  }
+}
+
+function skip(name, reason) {
+  process.stdout.write(`ok - ${name} # SKIP ${reason}\n`)
+  passed++
+}
+
+async function loadCheerio() {
+  if (cheerio) return cheerio
+  try {
+    cheerio = await import('cheerio')
+  } catch {
+    cheerio = null
+  }
+  return cheerio
+}
+
+// ─── Pure CSS helpers (no cheerio needed) ─────────────────────────────────────
+
+test('walkTopLevelRules: simple rule', () => {
+  const css = '.foo { color: red; }'
+  const rules = walkTopLevelRules(css)
+  assert.equal(rules.length, 1)
+  assert.equal(rules[0].selector, '.foo')
+  assert.match(rules[0].body, /color:\s*red/)
+})
+
+test('walkTopLevelRules: multiple rules', () => {
+  const css = '.foo { color: red; } .bar { color: blue; }'
+  const rules = walkTopLevelRules(css)
+  assert.equal(rules.length, 2)
+  assert.equal(rules[0].selector, '.foo')
+  assert.equal(rules[1].selector, '.bar')
+})
+
+test('walkTopLevelRules: handles comments', () => {
+  const css = '/* hi */ .foo { color: red; /* nested */ }'
+  const rules = walkTopLevelRules(css)
+  assert.equal(rules.length, 1)
+})
+
+test('walkTopLevelRules: descends into @media', () => {
+  const css = '.a { color: red; } @media (min-width: 600px) { .b { color: blue; } }'
+  const rules = walkTopLevelRules(css)
+  // both .a and the inner .b should be picked up
+  assert.equal(rules.length, 2)
+  assert.equal(rules[0].selector, '.a')
+  assert.equal(rules[1].selector, '.b')
+})
+
+test('findDeclaration: finds property', () => {
+  const body = ' color: red; font-size: 14px; '
+  const d = findDeclaration(body, 0, 'font-size')
+  assert.equal(d.value, '14px')
+  assert.equal(d.important, false)
+})
+
+test('findDeclaration: marks !important', () => {
+  const body = ' color: red !important; '
+  const d = findDeclaration(body, 0, 'color')
+  assert.equal(d.value, 'red')
+  assert.equal(d.important, true)
+})
+
+test('findDeclaration: missing property → null', () => {
+  const body = ' color: red; '
+  const d = findDeclaration(body, 0, 'font-size')
+  assert.equal(d, null)
+})
+
+test('findCssRule: matches by class', () => {
+  const css = '.hero__title { font-size: 27px; color: red; }'
+  const r = findCssRule(css, ['hero__title'], 'h1', 'font-size')
+  assert.ok(r, 'expected match')
+  assert.equal(r.currentValue, '27px')
+})
+
+test('findCssRule: matches by tag', () => {
+  const css = 'h1 { font-size: 32px; }'
+  const r = findCssRule(css, [], 'h1', 'font-size')
+  assert.ok(r)
+  assert.equal(r.currentValue, '32px')
+})
+
+test('findCssRule: no match returns null', () => {
+  const css = '.other { font-size: 14px; }'
+  const r = findCssRule(css, ['hero__title'], 'h1', 'font-size')
+  assert.equal(r, null)
+})
+
+test('findCssRule: prefers cascade winner (last match)', () => {
+  const css = '.title { font-size: 14px; } .title { font-size: 18px; }'
+  const r = findCssRule(css, ['title'], 'h1', 'font-size')
+  assert.equal(r.currentValue, '18px')
+})
+
+test('findCssRule: with blockOffset offsets are absolute', () => {
+  const css = '.foo { color: red; }'
+  const r = findCssRule(css, ['foo'], 'div', 'color', 1000)
+  assert.ok(r.declStart >= 1000)
+  assert.equal(r.blockOffset, 1000)
+})
+
+test('selectorMatches: class hit', () => {
+  assert.equal(selectorMatches('.hero__title', ['hero__title'], 'h1'), true)
+})
+
+test('selectorMatches: tag hit when no class', () => {
+  assert.equal(selectorMatches('h1', [], 'h1'), true)
+})
+
+test('selectorMatches: chained selector matches via class', () => {
+  assert.equal(selectorMatches('.hero .hero__title', ['hero__title'], 'h1'), true)
+})
+
+test('selectorMatches: comma-separated list', () => {
+  assert.equal(selectorMatches('.a, .b, .c', ['b'], 'div'), true)
+})
+
+test('selectorMatches: no class hit and no tag hit → false', () => {
+  assert.equal(selectorMatches('.other', ['foo'], 'div'), false)
+})
+
+test('selectorMatches: tag-only selector matches when class only present', () => {
+  assert.equal(selectorMatches('h1', ['hero__title'], 'h1'), true)
+})
+
+test('splitStyleBlocks: html with one style block', () => {
+  const html = '<style>.a { color: red; }</style>'
+  const blocks = splitStyleBlocks(html)
+  assert.equal(blocks.length, 1)
+  assert.match(blocks[0].css, /color: red/)
+})
+
+test('splitStyleBlocks: liquid {% style %}', () => {
+  const liquid = '{% style %}.a { color: red; }{% endstyle %}'
+  const blocks = splitStyleBlocks(liquid)
+  assert.equal(blocks.length, 1)
+})
+
+test('splitStyleBlocks: multiple blocks ordered by offset', () => {
+  const html = '<style>.a { x: 1; }</style><div></div><style>.b { y: 2; }</style>'
+  const blocks = splitStyleBlocks(html)
+  assert.equal(blocks.length, 2)
+  assert.ok(blocks[0].offset < blocks[1].offset)
+})
+
+test('splitStyleBlocks: empty input', () => {
+  assert.equal(splitStyleBlocks('').length, 0)
+})
+
+test('findCssRuleAcrossBlocks: finds in the right block', () => {
+  const blocks = [
+    { css: '.a { color: red; }', offset: 0 },
+    { css: '.b { color: blue; }', offset: 100 },
+  ]
+  const r = findCssRuleAcrossBlocks(blocks, ['b'], 'div', 'color')
+  assert.ok(r)
+  assert.equal(r.currentValue, 'blue')
+  assert.ok(r.declStart >= 100)
+})
+
+test('findCssRuleAcrossBlocks: returns null when not found', () => {
+  const blocks = [{ css: '.a { color: red; }', offset: 0 }]
+  const r = findCssRuleAcrossBlocks(blocks, ['x'], 'span', 'color')
+  assert.equal(r, null)
+})
+
+// ─── isAmbiguous ──────────────────────────────────────────────────────────────
+
+test('isAmbiguous: empty list → false', () => {
+  assert.equal(isAmbiguous([]), false)
+})
+
+test('isAmbiguous: single candidate → false', () => {
+  assert.equal(isAmbiguous([{ score: 0.8 }]), false)
+})
+
+test('isAmbiguous: top two close → true', () => {
+  assert.equal(isAmbiguous([{ score: 0.7 }, { score: 0.65 }]), true)
+})
+
+test('isAmbiguous: top two far apart → false', () => {
+  assert.equal(isAmbiguous([{ score: 0.9 }, { score: 0.4 }]), false)
+})
+
+test('isAmbiguous: top score below 0.3 → false (no high-confidence pick)', () => {
+  assert.equal(isAmbiguous([{ score: 0.25 }, { score: 0.2 }]), false)
+})
+
+test('isAmbiguous: custom threshold', () => {
+  assert.equal(isAmbiguous([{ score: 0.7 }, { score: 0.5 }], 0.05), false)
+  assert.equal(isAmbiguous([{ score: 0.7 }, { score: 0.5 }], 0.3), true)
+})
+
+// ─── locateCandidates (cheerio-required integration tests) ────────────────────
+
+await (async () => {
+  const c = await loadCheerio()
+  if (!c) {
+    skip('locateCandidates: by heading + hero qualifier', 'cheerio not installed')
+    skip('locateCandidates: ordinal first', 'cheerio not installed')
+    skip('locateCandidates: ordinal last', 'cheerio not installed')
+    skip('locateCandidates: image qualifier hero (ancestor match)', 'cheerio not installed')
+    skip('locateCandidates: button without qualifier returns multiple', 'cheerio not installed')
+    skip('locateCandidates: applyTo=css-rule when CSS exists', 'cheerio not installed')
+    skip('locateCandidates: applyTo=attr for alt property', 'cheerio not installed')
+    skip('locateCandidates: applyTo=text when property=text', 'cheerio not installed')
+    skip('locateCandidates: applyTo=remove-element when action=remove', 'cheerio not installed')
+    skip('locateCandidates: empty when target type absent', 'cheerio not installed')
+    skip('locateCandidates: no candidates for missing target.type', 'cheerio not installed')
+    return
+  }
+
+  const HTML_HERO = `
+    <html><head><style>
+      .hero__title { font-size: 27px; color: black; }
+      .pricing__title { font-size: 22px; }
+    </style></head><body>
+      <section class="hero">
+        <h1 class="hero__title">Welcome</h1>
+        <img src="/hero.png" alt="hero" />
+        <button type="button">Buy now</button>
+      </section>
+      <section class="pricing">
+        <h2 class="pricing__title">Plans</h2>
+        <button type="button">Choose</button>
+      </section>
+      <footer>
+        <button type="button">Contact</button>
+      </footer>
+    </body></html>
+  `
+
+  await test('locateCandidates: by heading + hero qualifier', () => {
+    const $ = c.load(HTML_HERO)
+    const intent = {
+      action: 'increase',
+      target: { type: 'heading', qualifier: 'hero' },
+      property: 'font-size',
+      value: { kind: 'pixels', parsed: 32 },
+    }
+    const cands = locateCandidates(intent, $, HTML_HERO)
+    assert.ok(cands.length >= 1, 'expected at least one candidate')
+    assert.equal(cands[0].tag, 'h1')
+    assert.ok(cands[0].classes.includes('hero__title'))
+    assert.ok(cands[0].score >= 0.5, `top score was ${cands[0].score}`)
+  })
+
+  await test('locateCandidates: ordinal first', () => {
+    const $ = c.load(HTML_HERO)
+    const intent = {
+      action: 'remove',
+      target: { type: 'button', qualifier: 'first' },
+      property: null,
+      value: null,
+    }
+    const cands = locateCandidates(intent, $, HTML_HERO)
+    assert.ok(cands.length >= 1)
+    // First button text is "Buy now"
+    assert.match(cands[0].snippet, /Buy now/)
+  })
+
+  await test('locateCandidates: ordinal last', () => {
+    const $ = c.load(HTML_HERO)
+    const intent = {
+      action: 'remove',
+      target: { type: 'button', qualifier: 'last' },
+      property: null,
+      value: null,
+    }
+    const cands = locateCandidates(intent, $, HTML_HERO)
+    assert.ok(cands.length >= 1)
+    // Last button text is "Contact"
+    assert.match(cands[0].snippet, /Contact/)
+  })
+
+  await test('locateCandidates: image qualifier hero (ancestor match)', () => {
+    const $ = c.load(HTML_HERO)
+    const intent = {
+      action: 'set',
+      target: { type: 'image', qualifier: 'hero' },
+      property: 'alt',
+      value: { kind: 'text', parsed: 'AlphaInfuse hero' },
+    }
+    const cands = locateCandidates(intent, $, HTML_HERO)
+    assert.ok(cands.length >= 1)
+    assert.equal(cands[0].tag, 'img')
+    // Ancestor match scoring: should land >= 0.5 (0.2 base + 0.3 ancestor)
+    assert.ok(cands[0].score >= 0.5, `score was ${cands[0].score}`)
+  })
+
+  await test('locateCandidates: button without qualifier returns multiple', () => {
+    const $ = c.load(HTML_HERO)
+    const intent = {
+      action: 'set',
+      target: { type: 'button' },
+      property: 'background-color',
+      value: { kind: 'color', parsed: '#fff' },
+    }
+    const cands = locateCandidates(intent, $, HTML_HERO)
+    assert.ok(cands.length >= 2)
+    // Top candidates should be similar in score → ambiguous
+    assert.equal(isAmbiguous(cands), false) // base score is 0.2 — under threshold to trip ambiguity
+  })
+
+  await test('locateCandidates: applyTo=css-rule when CSS exists', () => {
+    const $ = c.load(HTML_HERO)
+    const intent = {
+      action: 'increase',
+      target: { type: 'heading', qualifier: 'hero' },
+      property: 'font-size',
+      value: { kind: 'pixels', parsed: 32 },
+    }
+    const cands = locateCandidates(intent, $, HTML_HERO)
+    assert.equal(cands[0].applyTo, 'css-rule')
+    assert.ok(cands[0].css)
+    assert.equal(cands[0].css.currentValue, '27px')
+  })
+
+  await test('locateCandidates: applyTo=attr for alt property', () => {
+    const $ = c.load(HTML_HERO)
+    const intent = {
+      action: 'set',
+      target: { type: 'image', qualifier: 'hero' },
+      property: 'alt',
+      value: { kind: 'text', parsed: 'New alt' },
+    }
+    const cands = locateCandidates(intent, $, HTML_HERO)
+    assert.equal(cands[0].applyTo, 'attr')
+    assert.equal(cands[0].attrName, 'alt')
+  })
+
+  await test('locateCandidates: applyTo=text when property=text', () => {
+    const $ = c.load(HTML_HERO)
+    const intent = {
+      action: 'set',
+      target: { type: 'heading', qualifier: 'hero' },
+      property: 'text',
+      value: { kind: 'text', parsed: 'New title' },
+    }
+    const cands = locateCandidates(intent, $, HTML_HERO)
+    assert.equal(cands[0].applyTo, 'text')
+  })
+
+  await test('locateCandidates: applyTo=remove-element when action=remove', () => {
+    const $ = c.load(HTML_HERO)
+    const intent = {
+      action: 'remove',
+      target: { type: 'button', qualifier: 'last' },
+      property: null,
+      value: null,
+    }
+    const cands = locateCandidates(intent, $, HTML_HERO)
+    assert.equal(cands[0].applyTo, 'remove-element')
+  })
+
+  await test('locateCandidates: empty when target type absent', () => {
+    const $ = c.load('<div>no buttons here</div>')
+    const intent = {
+      action: 'remove',
+      target: { type: 'button' },
+      property: null,
+      value: null,
+    }
+    const cands = locateCandidates(intent, $, '<div>no buttons here</div>')
+    assert.equal(cands.length, 0)
+  })
+
+  await test('locateCandidates: no candidates for missing target.type', () => {
+    const $ = c.load('<div>x</div>')
+    const cands = locateCandidates({ action: 'set', target: null }, $, '')
+    assert.equal(cands.length, 0)
+  })
+})()
+
+// ─── Done ─────────────────────────────────────────────────────────────────────
+
+process.stdout.write(`\n1..${passed + failed}\n# passed ${passed}, failed ${failed}\n`)
+process.exit(failed === 0 ? 0 : 1)