Files
mhoennigandClaude Opus 5 3fbc772d81 feat(diagram): das Knoten-Fenster löst den nativen Tooltip überall ab
Das Fenster aus D52 war für Touch gebaut — damit standen zwei Darstellungen
desselben Inhalts nebeneinander, und ausgerechnet die schlechtere bekam der
Zeiger. Jetzt zeigt es überall: am Zeiger nach 350 ms beim Überfahren, bei
Tastaturfokus sofort, auf Touch unverändert beim Tipp.

Was ein `title` prinzipiell nicht kann:
- keine Absätze (die Beschreibungen im Plan brechen bei ~76 Zeichen, das sah
  ausgefranst aus),
- keine Linie (der Trennstrich war aus 24 `─` GEMALT, D40-Nachtrag),
- nichts bei Tastaturfokus — wer mit Tab durch das Diagramm geht, sah bisher
  keine Beschreibung. Nachgemessen mit ECHTEM Tastendruck: Fokus von
  #not.line auf #not.status, Fenster folgt, 10 px unter dem Knoten, Ring am
  fokussierten Knoten.

- Inhalt zieht von `title` nach `data-tip` (sonst zeigte der Browser seinen
  eigenen zusätzlich) — dasselbe Attribut unter anderem Namen, keine
  Verdopplung der 20 kB DOM-Text.
- Die letzten drei nativen Tooltips IN Knoten mussten weichen: Das
  Warndreieck war redundant (Statusname steht in den Fakten), die Annahme
  „Größe fehlt, gilt als M" wandert in die Faktenzeile. Nachgemessen: 0 von
  161 Knoten und 0 Kinder tragen noch einen `title`.
- Absicht-Erkennung: 350 ms Verzögerung, beim Wechsel zwischen Knoten ohne
  Warten, 120 ms Nachfrist beim Verlassen (der Weg ins Fenster führt über
  einen Zwischenraum).
- `aria-hidden` am Fenster: Der Inhalt steht schon im aria-label, sonst würde
  er doppelt vorgelesen; × und ↗ deshalb `tabindex="-1"`.

Werkzeuggrenze notiert: `element.focus()` feuert ohne Fensterfokus keine
Fokus-Ereignisse (`document.hasFocus()` false) — der erste Prüflauf zeigte
fälschlich „öffnet nichts".

SPEC §9 + D57; Plan: #ed.tipwindow [x] (161 Knoten, 0 Warnungen).
293 Tests grün, 5 Snapshots/Zusicherungen auf `data-tip` nachgezogen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-24 12:07:00 +02:00

164 lines
6.4 KiB
JavaScript

import { describe, it, expect } from 'vitest';
import { parse } from '../src/parser.js';
import { renderTreeHtml } from '../src/render.js';
const t = key => key;
const roots = txt => parse(txt).roots;
const render = txt => renderTreeHtml(roots(txt),
{t, showDiscarded: false, cheapPath: false, cheapSet: new Set()});
/* Knotenbeschreibungen (SPEC §1/§9, D40): `"`-Zeilen (Kurzform) und
ID-Blöcke hinter `---` (Langform). */
describe('Kurzform — `"`-Zeile unter dem Knoten', () => {
it('hängt die Zeile an den vorangehenden Knoten, ohne einen Knoten zu erzeugen', () => {
const [wurzel] = roots(`[ ] Auth\n " Kapselt Login und Tokens.`);
expect(wurzel.desc).toBe('Kapselt Login und Tokens.');
expect(wurzel.children).toEqual([]);
});
it('setzt mehrere `"`-Zeilen zur selben Beschreibung fort', () => {
const [wurzel] = roots(`[ ] Auth\n " Zeile eins.\n " Zeile zwei.`);
expect(wurzel.desc).toBe('Zeile eins.\nZeile zwei.');
});
it('verlangt folgenden Leerraum — `"Zitat"` bleibt ein Label', () => {
const [wurzel] = roots(`"Zitat" als Label`);
expect([wurzel.label, wurzel.desc]).toEqual(['"Zitat" als Label', null]);
});
it('gilt nicht auf Zeilen mit Zerlegungszeichen', () => {
const [wurzel] = roots(`[ ] W\n - " Zitat" als Label`);
expect(wurzel.children[0].label).toBe('" Zitat" als Label');
});
it('warnt bei einer `"`-Zeile ohne vorangehenden Knoten', () => {
const {warnings} = parse(`" verwaist`);
expect(warnings).toEqual([{type: 'descStray', line: 1}]);
});
it('extrahiert im Freitext nichts — (M), @name und #id bleiben Text', () => {
const [wurzel] = roots(`[ ] W\n " Kostet (M), fragt @ana wegen #auth.`);
expect(wurzel.desc).toBe('Kostet (M), fragt @ana wegen #auth.');
expect([wurzel.size, wurzel.tags, wurzel.id]).toEqual([null, [], null]);
});
it('entfernt %%-Kommentare auch in Beschreibungszeilen', () => {
const [wurzel] = roots(`[ ] W\n " Sichtbar. %% unsichtbar`);
expect(wurzel.desc).toBe('Sichtbar.');
});
});
describe('Langform — ID-Blöcke hinter `---`', () => {
const TXT = `[ ] Auth #auth
[ ] API #api
---
#auth
Erster Absatz.
Zweiter Absatz.
#api
Kurz.`;
it('ordnet Blöcke über die ID zu, mit Leerzeilen als Absatztrennern', () => {
const [auth, api] = roots(TXT);
expect(auth.desc).toBe('Erster Absatz.\n\nZweiter Absatz.');
expect(api.desc).toBe('Kurz.');
});
it('erzeugt hinter dem Trenner keine Knoten mehr', () => {
expect(roots(TXT).map(n => n.label)).toEqual(['Auth', 'API']);
});
it('akzeptiert auch längere Trenner und ignoriert weitere im Beschreibungsteil', () => {
const [w] = roots(`[ ] W #w\n-----\n#w\n Text.\n---\n#w\n Mehr.`);
expect(w.desc).toBe('Text.\nMehr.');
});
it('hängt Kurz- und Langform in Dokumentreihenfolge aneinander', () => {
const [w] = roots(`[ ] W #w\n " Kurz.\n---\n#w\n Lang.`);
expect(w.desc).toBe('Kurz.\nLang.');
});
it('warnt bei einer ID ohne Knoten — und schluckt deren Blocktext still', () => {
const {roots: r, warnings} = parse(`[ ] W\n---\n#fehlt\n Text dazu.\n Noch mehr.`);
expect(warnings).toEqual([{type: 'unknownDesc', line: 3, id: 'fehlt'}]);
expect(r[0].desc).toBe(null);
});
it('meldet verwaiste Zeilen einzeln — der versehentliche Trenner wird laut', () => {
const {warnings} = parse(`[ ] W\n---\n- [ ] Verschluckt\n - [ ] Kind`);
expect(warnings).toEqual([
{type: 'descStray', line: 3},
{type: 'descStray', line: 4}
]);
});
it('lässt `- --` als gewöhnlichen Knoten stehen', () => {
expect(roots(`- --`)[0].label).toBe('--');
});
});
describe('Darstellung — Tooltip, ”-Marke, aria', () => {
it('stellt die Beschreibung an den Anfang des Tooltips und setzt die Marke', () => {
const {html} = render(`[ ] Auth #auth\n " Kapselt Login.`);
expect(html).toContain('data-tip="Kapselt Login.\n\n' + '─'.repeat(24)
+ '\n#auth · st_geplant · jumpHint"');
expect(html).toContain('<span class="desc-mark" aria-hidden="true">”</span>');
expect(html).toContain('aria-label="Auth, a11yStatus, a11yId, Kapselt Login."');
});
/* Die Kurz-Fakten hingen früher mit ` · ` am Fließtext — in einer Zeile ging
der Übergang unter. Getrennt wird nur, wenn es etwas zu trennen gibt. */
it('trennt Beschreibung und Kurz-Fakten durch Leerzeile und Strich', () => {
const {html} = render(`[ ] Auth #auth\n " Erste Zeile.\n " Zweite Zeile.`);
const tip = html.match(/data-tip="([^"]*)"/)[1];
const [text, rest] = tip.split('\n\n');
expect(text).toBe('Erste Zeile.\nZweite Zeile.'); /* Fließtext bleibt zusammen */
expect(rest.split('\n')[0]).toMatch(/^─+$/); /* Trennstrich als eigene Zeile */
expect(rest.split('\n')[1]).toContain('#auth'); /* danach die Fakten */
});
it('setzt keinen Trennstrich, wenn es keine Beschreibung gibt', () => {
const {html} = render(`[ ] Ohne #auth`);
expect(html.match(/data-tip="([^"]*)"/)[1]).not.toContain('─');
});
});
/* Der Cursor in einer Beschreibung wählt ihren Knoten aus (SPEC §9): Die Zeile
trägt keinen eigenen Knoten, gehört aber zu einem. Grundlage ist
`node.descLines`; app.js findet den Knoten darüber per `data-desc-lines~=`. */
describe('Zeilenzuordnung der Beschreibung (`descLines`)', () => {
it('ordnet `"`-Zeilen dem vorangehenden Knoten zu', () => {
const [a, b] = roots(`[ ] Erster\n " Eine Zeile.\n " Noch eine.\n[ ] Zweiter`);
expect(a.descLines).toEqual([2, 3]);
expect(b.descLines).toBe(null);
});
it('ordnet den `---`-Block samt Kopfzeile und Leerzeilen zu', () => {
const [n] = roots(`[ ] Auth #auth\n---\n#auth\n Erster Absatz.\n\n Zweiter Absatz.`);
expect(n.descLines).toEqual([3, 4, 5, 6]);
});
it('führt Kurz- und Langform am selben Knoten zusammen', () => {
const [n] = roots(`[ ] Auth #auth\n " Kurz.\n---\n#auth\n Lang.`);
expect(n.descLines).toEqual([2, 4, 5]);
});
it('ordnet nichts zu, wo es keinen Knoten gibt', () => {
const {roots: r, warnings} = parse(`---\n#fehlt\n Text.`);
expect(r).toEqual([]);
expect(warnings.map(w => w.type)).toEqual(['unknownDesc']);
});
it('gibt die Zeilen als `data-desc-lines` aus', () => {
const {html} = render(`[ ] Auth\n " Kapselt Login.`);
expect(html).toContain('data-desc-lines="2"');
});
it('ändert Knoten ohne Beschreibung nicht', () => {
const {html} = render(`[ ] Ohne`);
expect(html).not.toContain('desc-mark');
});
});