Files
werkbaum/frontend/tests/ids.test.js
T
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

128 lines
5.1 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()});
/* Knoten-IDs `#name` (SPEC §1, D36): Adresse für Abhängigkeiten und
Beschreibungsblöcke; eindeutig im ganzen Dokument. */
describe('Parser — `#name` als Knoten-ID', () => {
it('extrahiert die ID und nimmt sie aus dem Label', () => {
const [wurzel] = roots(`[ ] Auth-Modul #auth (M)\n - [ ] Login`);
expect([wurzel.label, wurzel.id, wurzel.size]).toEqual(['Auth-Modul', 'auth', 'M']);
expect(wurzel.children[0].id).toBe(null);
});
it('erkennt IDs nur alleinstehend angesetzt — „C#" bleibt Label', () => {
const [wurzel] = roots(`[ ] C# Kurs`);
expect([wurzel.label, wurzel.id]).toEqual(['C# Kurs', null]);
});
it('macht aus `:#a,#b` (Abhängigkeiten, D37) keine Knoten-ID', () => {
const [wurzel] = roots(`[ ] Deploy :#auth,#api`);
expect([wurzel.label, wurzel.id, wurzel.deps])
.toEqual(['Deploy', null, ['auth', 'api']]);
});
it('nimmt nur das ERSTE Token — weitere `#` bleiben im Label (Tickets)', () => {
const [wurzel] = roots(`[ ] Auth #auth siehe #123`);
expect([wurzel.label, wurzel.id]).toEqual(['Auth siehe #123', 'auth']);
});
it('lässt `#` in URLs unberührt (URL wird vorher extrahiert)', () => {
const [wurzel] = roots(`[ ] Doku https://example.org/seite#abschnitt`);
expect([wurzel.id, wurzel.url]).toEqual([null, 'https://example.org/seite#abschnitt']);
});
it('erlaubt numerische und Unicode-IDs', () => {
const nodes = roots(`[ ] Ticket #123\n[ ] Umlaut #größe-1`);
expect(nodes.map(n => n.id)).toEqual(['123', 'größe-1']);
});
it('ignoriert eine Zeile, die nur aus einer ID besteht — die ID bleibt frei', () => {
const {roots: r, warnings} = parse(`- #auth\n- [ ] Echt #auth`);
expect(r.map(n => [n.label, n.id])).toEqual([['Echt', 'auth']]);
expect(warnings).toEqual([]);
});
});
/* Übliche Schreibweise: ID vor dem Titel, abgetrennt durch einen Doppelpunkt.
Der Doppelpunkt ist optional, gehört weder zur ID noch zum Label. */
describe('ID vor dem Titel, `#id: Titel`', () => {
it('schluckt den trennenden Doppelpunkt', () => {
const [n] = roots(`[ ] #auth: Auth-Modul (M)`);
expect([n.id, n.label, n.size]).toEqual(['auth', 'Auth-Modul', 'M']);
});
it('kommt ohne Doppelpunkt zum selben Ergebnis', () => {
const mit = roots(`[ ] #auth: Auth-Modul (M)`)[0];
const ohne = roots(`[ ] #auth Auth-Modul (M)`)[0];
expect([mit.id, mit.label]).toEqual([ohne.id, ohne.label]);
});
it('lässt den Doppelpunkt auch am Zeilenende weg', () => {
const [n] = roots(`[ ] Titel danach #auth:`);
expect([n.id, n.label]).toEqual(['auth', 'Titel danach']);
});
it('vertägt sich mit Abhängigkeiten in derselben Zeile', () => {
const {roots: r, warnings} = parse(`[ ] #api: API\n[ ] #ui: Oberfläche :#api`);
expect(r.map(n => [n.id, n.label, n.deps])).toEqual([
['api', 'API', []], ['ui', 'Oberfläche', ['api']],
]);
expect(warnings).toEqual([]);
});
it('lässt einen Doppelpunkt IM Label unberührt', () => {
const [n] = roots(`[ ] #auth: Regel: nur mit Token`);
expect([n.id, n.label]).toEqual(['auth', 'Regel: nur mit Token']);
});
it('schluckt nur einen Doppelpunkt mit folgendem Leerraum — `#auth:#db` bleibt Abhängigkeit', () => {
const {roots: r} = parse(`[ ] #db: Datenbank\n[ ] #auth:#db Login`);
expect(r[1].id).toBe('auth');
expect(r[1].deps).toEqual(['db']);
expect(r[1].label).toBe('Login');
});
it('nimmt den Doppelpunkt auch im Beschreibungsteil an', () => {
const {roots: r, warnings} = parse(`[ ] #auth: Auth\n---\n#auth:\n Erklärung.`);
expect(r[0].desc).toBe('Erklärung.');
expect(warnings).toEqual([]);
});
});
describe('Doppelte IDs — Warnung an der späteren Zeile', () => {
it('meldet die spätere Zeile und nennt die erste', () => {
const {warnings} = parse(`[ ] A #auth\n[ ] B\n[ ] C #auth`);
expect(warnings).toEqual([{type: 'duplicateId', line: 3, id: 'auth', firstLine: 1}]);
});
it('lässt die spätere ID trotzdem am Knoten stehen (fehlertolerant)', () => {
const nodes = roots(`[ ] A #x\n[ ] B #x`);
expect(nodes.map(n => n.id)).toEqual(['x', 'x']);
});
it('meldet jede weitere Doppelvergabe einzeln', () => {
const {warnings} = parse(`[ ] A #x\n[ ] B #x\n[ ] C #x`);
expect(warnings.map(w => w.line)).toEqual([2, 3]);
});
});
describe('Darstellung — Tooltip und aria, kein Badge', () => {
it('zeigt die ID im Tooltip und im aria-label', () => {
const {html} = render(`[ ] Auth #auth`);
expect(html).toContain('data-tip="#auth · st_geplant · jumpHint"');
expect(html).toContain('aria-label="Auth, a11yStatus, a11yId"');
});
it('ändert Knoten ohne ID nicht', () => {
const {html} = render(`[ ] Ohne`);
expect(html).not.toContain('a11yId');
expect(html).toContain('data-tip="st_geplant · jumpHint"');
});
});