frontend: Renderer + Modell headless auslagern (src/model.js, src/render.js)
TASKS Phase 1. Baum-/Kostenlogik -> model.js (gateOf, needsBreakdown, visibleChildren, computeCheapSet, cheapCls), HTML-Erzeugung -> render.js (renderTreeHtml). Beide sind headless: UI-State (verworfene einblenden, günstigster Pfad) kommt als Parameter herein statt aus Globals; nur cheapPathOn bleibt UI-State in app.js. render() in app.js ist jetzt die dünne DOM-Anbindung. Snapshot-Tests (tests/render.test.js): Grundzustand, günstigster Pfad, verworfene einblenden, Geister-Knoten („Untergliederung fehlt"), plus die Zusicherung, dass der Renderer nie eine Modus-Klasse erzeugt (Modus = CSS-Container-Klasse in app.js -> ein Snapshot deckt alle drei Modi). 24 Tests grün. Byte-identisches Rendering im Browser verifiziert (18 Knoten, 6 Blätter, 3 Geister, Toggles ok, keine Konsolenfehler). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
mhoennig
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
7c8f216589
commit
5905712aa5
@@ -0,0 +1,7 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`renderTreeHtml — kanonisches Beispiel > Grundzustand (Pfad aus, verworfene aus): Struktur-Snapshot 1`] = `"<li class="has-and"><a class="node root-node st-arbeit" href="https://wiki.example.de/relaunch" target="_blank" rel="noopener" title="st_arbeit">Website-Relaunch<span class="ext">↗</span><span class="size">XL</span></a><ul class="and"><li class="has-and"><div class="node st-fertig" title="st_fertig">Konzeption<span class="size">M</span></div><ul class="and"><li><div class="node st-fertig" title="st_fertig">Zielgruppenanalyse<span class="size">S</span></div></li><li><div class="node st-fertig" title="st_fertig">Sitemap<span class="size">XS</span></div></li></ul></li><li class="has-and"><div class="node st-arbeit" title="st_arbeit">Umsetzung<span class="size">XL</span></div><ul class="and"><li><a class="node st-durchstich" href="https://git.example.de/frontend" target="_blank" rel="noopener" title="st_durchstich">Frontend<span class="ext">↗</span><span class="size">S</span><span class="tags"><span class="tag">anna</span></span></a></li><li><div class="node st-geplant" title="st_geplant">Backend<span class="size">L</span><span class="tags"><span class="tag">ben</span><span class="tag">carla</span></span></div><div class="ghost-node" title="ghostTooltip">ghost</div></li><li class="has-or"><div class="node st-geplant" title="st_geplant">CMS-Anbindung<span class="size">M</span></div><ul class="or"><li><div class="node st-geplant" title="st_geplant">WordPress</div></li><li><div class="node st-idee" title="st_idee">Headless CMS</div></li></ul></li></ul></li><li class="has-or"><div class="node st-idee" title="st_idee">Hosting<span class="size">M</span></div><ul class="or"><li><div class="node">Cloud</div></li><li><div class="node">On-Premise</div></li></ul></li></ul></li>"`;
|
||||
|
||||
exports[`renderTreeHtml — kanonisches Beispiel > günstigster Pfad an: cheap/cheap-leaf + implizite M-Badges 1`] = `"<li class="has-and"><a class="node root-node cheap st-arbeit" href="https://wiki.example.de/relaunch" target="_blank" rel="noopener" title="st_arbeit">Website-Relaunch<span class="ext">↗</span><span class="size">XL</span></a><ul class="and"><li class="has-and"><div class="node cheap st-fertig" title="st_fertig">Konzeption<span class="size">M</span></div><ul class="and"><li><div class="node cheap cheap-leaf st-fertig" title="st_fertig">Zielgruppenanalyse<span class="size">S</span></div></li><li><div class="node cheap cheap-leaf st-fertig" title="st_fertig">Sitemap<span class="size">XS</span></div></li></ul></li><li class="has-and"><div class="node cheap st-arbeit" title="st_arbeit">Umsetzung<span class="size">XL</span></div><ul class="and"><li><a class="node cheap cheap-leaf st-durchstich" href="https://git.example.de/frontend" target="_blank" rel="noopener" title="st_durchstich">Frontend<span class="ext">↗</span><span class="size">S</span><span class="tags"><span class="tag">anna</span></span></a></li><li><div class="node cheap cheap-leaf st-geplant" title="st_geplant">Backend<span class="size">L</span><span class="tags"><span class="tag">ben</span><span class="tag">carla</span></span></div><div class="ghost-node" title="ghostTooltip">ghost</div></li><li class="has-or"><div class="node cheap st-geplant" title="st_geplant">CMS-Anbindung<span class="size">M</span></div><ul class="or"><li><div class="node cheap cheap-leaf st-geplant" title="st_geplant">WordPress<span class="size implicit" title="implicitSizeTooltip">M</span></div></li><li><div class="node st-idee" title="st_idee">Headless CMS<span class="size implicit" title="implicitSizeTooltip">M</span></div></li></ul></li></ul></li><li class="has-or"><div class="node cheap st-idee" title="st_idee">Hosting<span class="size">M</span></div><ul class="or"><li><div class="node cheap cheap-leaf">Cloud<span class="size implicit" title="implicitSizeTooltip">M</span></div></li><li><div class="node">On-Premise<span class="size implicit" title="implicitSizeTooltip">M</span></div></li></ul></li></ul></li>"`;
|
||||
|
||||
exports[`renderTreeHtml — kanonisches Beispiel > verworfene einblenden: Eigenentwicklung erscheint (durchgestrichen) 1`] = `"<li class="has-and"><a class="node root-node st-arbeit" href="https://wiki.example.de/relaunch" target="_blank" rel="noopener" title="st_arbeit">Website-Relaunch<span class="ext">↗</span><span class="size">XL</span></a><ul class="and"><li class="has-and"><div class="node st-fertig" title="st_fertig">Konzeption<span class="size">M</span></div><ul class="and"><li><div class="node st-fertig" title="st_fertig">Zielgruppenanalyse<span class="size">S</span></div></li><li><div class="node st-fertig" title="st_fertig">Sitemap<span class="size">XS</span></div></li></ul></li><li class="has-and"><div class="node st-arbeit" title="st_arbeit">Umsetzung<span class="size">XL</span></div><ul class="and"><li><a class="node st-durchstich" href="https://git.example.de/frontend" target="_blank" rel="noopener" title="st_durchstich">Frontend<span class="ext">↗</span><span class="size">S</span><span class="tags"><span class="tag">anna</span></span></a></li><li><div class="node st-geplant" title="st_geplant">Backend<span class="size">L</span><span class="tags"><span class="tag">ben</span><span class="tag">carla</span></span></div><div class="ghost-node" title="ghostTooltip">ghost</div></li><li class="has-or"><div class="node st-geplant" title="st_geplant">CMS-Anbindung<span class="size">M</span></div><ul class="or"><li><div class="node st-geplant" title="st_geplant">WordPress</div></li><li><div class="node st-idee" title="st_idee">Headless CMS</div></li><li><div class="node st-verworfen" title="st_verworfen">Eigenentwicklung</div></li></ul></li></ul></li><li class="has-or"><div class="node st-idee" title="st_idee">Hosting<span class="size">M</span></div><ul class="or"><li><div class="node">Cloud</div></li><li><div class="node">On-Premise</div></li></ul></li></ul></li>"`;
|
||||
Reference in New Issue
Block a user