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>
92 lines
3.7 KiB
JavaScript
92 lines
3.7 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()});
|
|
|
|
/* Abhängigkeiten `:#a,#b` (SPEC §1, D37): der Knoten hängt von den Knoten mit
|
|
diesen IDs ab — auch außerhalb seines eigenen Teilbaums. */
|
|
describe('Parser — `:#a,#b` als Abhängigkeits-Token', () => {
|
|
it('extrahiert die ID-Liste und nimmt sie aus dem Label', () => {
|
|
const [a, b] = roots(`[ ] Auth #auth\n[ ] Deploy :#auth (M)`);
|
|
expect([b.label, b.deps, b.size]).toEqual(['Deploy', ['auth'], 'M']);
|
|
expect(a.deps).toEqual([]);
|
|
});
|
|
|
|
it('liest mehrere IDs aus einem Token', () => {
|
|
const [wurzel] = roots(`[ ] A #a\n[ ] B #b\n[ ] C :#a,#b`);
|
|
expect(roots(`[ ] A #a\n[ ] B #b\n[ ] C :#a,#b`)[2].deps).toEqual(['a', 'b']);
|
|
});
|
|
|
|
it('führt mehrere Token je Zeile zusammen', () => {
|
|
const {roots: r, warnings} = parse(`[ ] A #a\n[ ] B #b\n[ ] C :#a später :#b`);
|
|
expect(r[2].deps).toEqual(['a', 'b']);
|
|
expect(r[2].label).toBe('C später');
|
|
expect(warnings).toEqual([]);
|
|
});
|
|
|
|
it('erkennt das Token nur alleinstehend — eingeklammerte Erwähnung bleibt Label', () => {
|
|
const [wurzel] = roots(`[ ] Dependencies across the tree, (:#auth,#api) (M)`);
|
|
expect([wurzel.label, wurzel.deps]).toEqual(
|
|
['Dependencies across the tree, (:#auth,#api)', []]);
|
|
});
|
|
|
|
it('lässt einen gewöhnlichen Doppelpunkt im Label stehen', () => {
|
|
const [wurzel] = roots(`[ ] Merke: wichtig`);
|
|
expect([wurzel.label, wurzel.deps]).toEqual(['Merke: wichtig', []]);
|
|
});
|
|
|
|
it('endet am Leerraum: `:#a, #b` liest nur #a — das #b wird Knoten-ID', () => {
|
|
/* Der dokumentierte Stolperstein (SPEC §1): die Liste ist EIN Token. */
|
|
const [a, b] = roots(`[ ] A #a\n[ ] B :#a, #b`);
|
|
expect([b.deps, b.id, b.label]).toEqual([['a'], 'b', 'B ,']);
|
|
});
|
|
|
|
it('verträgt sich mit der eigenen Knoten-ID auf derselben Zeile', () => {
|
|
const nodes = roots(`[ ] A #a\n[ ] B #b :#a`);
|
|
expect([nodes[1].id, nodes[1].deps]).toEqual(['b', ['a']]);
|
|
});
|
|
});
|
|
|
|
describe('Unbekannte IDs warnen — Zyklen nie', () => {
|
|
it('meldet eine Abhängigkeit ohne Zielknoten mit Zeilennummer', () => {
|
|
const {warnings} = parse(`[ ] A #a\n[ ] B :#a,#fehlt`);
|
|
expect(warnings).toEqual([{type: 'unknownDep', line: 2, id: 'fehlt'}]);
|
|
});
|
|
|
|
it('erlaubt Vorwärts-Referenzen (Ziel steht weiter unten)', () => {
|
|
expect(parse(`[ ] A :#b\n[ ] B #b`).warnings).toEqual([]);
|
|
});
|
|
|
|
it('warnt nicht bei Zyklen — auch nicht bei Selbst-Abhängigkeit', () => {
|
|
expect(parse(`[ ] A #a :#b\n[ ] B #b :#a`).warnings).toEqual([]);
|
|
expect(parse(`[ ] A #a :#a`).warnings).toEqual([]);
|
|
});
|
|
});
|
|
|
|
describe('Darstellung — Tooltip und aria, kein eigenes Zeichen', () => {
|
|
it('zeigt die Abhängigkeiten als → im Tooltip und als a11yDeps', () => {
|
|
const {html} = render(`[ ] A #a\n[ ] B #b\n[ ] C :#a,#b`);
|
|
expect(html).toContain('data-tip="→ #a, #b · st_geplant · jumpHint"');
|
|
expect(html).toContain('aria-label="C, a11yStatus, a11yDeps"');
|
|
});
|
|
|
|
it('ändert Knoten ohne Abhängigkeiten nicht', () => {
|
|
const {html} = render(`[ ] Ohne`);
|
|
expect(html).not.toContain('a11yDeps');
|
|
expect(html).not.toContain('→');
|
|
});
|
|
|
|
/* Grundlage der Querverbindungs-Ebene (D41): sie arbeitet auf dem DOM und
|
|
braucht ID und Abhängigkeiten als data-Attribute. */
|
|
it('schreibt data-id und data-deps an die Knoten', () => {
|
|
const {html} = render(`[ ] A #a\n[ ] B #b\n[ ] C :#a,#b`);
|
|
expect(html).toContain('data-id="a"');
|
|
expect(html).toContain('data-deps="a b"');
|
|
expect(html).not.toContain('data-deps=""');
|
|
});
|
|
});
|