lsa-planer
LSA-Planer Professional – Planungssoftware für Lichtsignalanlagen nach RiLSA 2015 und § 45 StVO. EUPL-1.2.
/ tests ui abschnittsname.test.ts
| 1 | import { describe, expect, it } from 'vitest'; |
| 2 | import { benenneAbschnitt, karte, sectionHeader } from '@/ui/dom'; |
| 3 | import { hilfeKnopf } from '@/ui/help/hilfe'; |
| 4 | import { zugaenglicherName } from './zugaenglicherName'; |
| 5 | |
| 6 | /** |
| 7 | * Name eines Abschnitts, wenn seine Ueberschrift einen Hilfeknopf traegt. |
| 8 | * |
| 9 | * Der Name einer `section` wird aus dem GANZEN Teilbaum des per |
| 10 | * `aria-labelledby` verwiesenen Elements gebildet. Zeigte der Verweis auf die |
| 11 | * Ueberschrift, wanderte die Beschriftung des Hilfeknopfs in den Namen: Die |
| 12 | * Bereichsliste, mit der man eine Seite ueberfliegt, fuehrte dann |
| 13 | * "Zeitdiagramm Hilfe zu Signalzeitenplan" statt "Zeitdiagramm". Bei einer |
| 14 | * Liste von elf Bereichen entscheidet aber das erste Wort. |
| 15 | * |
| 16 | * Der Fall gehoert hierher und nicht in die Ansichten: Er haengt allein an |
| 17 | * sectionHeader() und benenneAbschnitt(), und die bauen jede Karte. |
| 18 | */ |
| 19 | |
| 20 | /** Ermittelt den Namen so, wie eine Sprachausgabe ihn bildet. */ |
| 21 | function nameVon(abschnitt: HTMLElement): string { |
| 22 | document.body.append(abschnitt); |
| 23 | try { |
| 24 | return zugaenglicherName(abschnitt); |
| 25 | } finally { |
| 26 | abschnitt.remove(); |
| 27 | } |
| 28 | } |
| 29 | |
| 30 | describe('Name einer Abschnittskarte', () => { |
| 31 | it('nennt nur den Titel, nicht den Hilfeknopf', () => { |
| 32 | const abschnitt = karte(sectionHeader('Zeitdiagramm', hilfeKnopf('zwischenzeit'))); |
| 33 | expect(nameVon(abschnitt)).toBe('Zeitdiagramm'); |
| 34 | }); |
| 35 | |
| 36 | it('nennt den Titel auch ohne Hilfeknopf', () => { |
| 37 | const abschnitt = karte(sectionHeader('Werkzeug', null)); |
| 38 | expect(nameVon(abschnitt)).toBe('Werkzeug'); |
| 39 | }); |
| 40 | |
| 41 | it('laesst die Ueberschrift eine Ueberschrift bleiben', () => { |
| 42 | // Die Sprachausgabe erkundet die Seite ueber die Ueberschriftenebenen. Ein |
| 43 | // Titel, der seine h2 verliert, faellt aus dieser Uebersicht heraus. |
| 44 | const abschnitt = karte(sectionHeader('Haltlinien', hilfeKnopf('haltlinie'))); |
| 45 | const ueberschrift = abschnitt.querySelector('h2'); |
| 46 | expect(ueberschrift?.textContent).toContain('Haltlinien'); |
| 47 | }); |
| 48 | |
| 49 | it('laesst den Hilfeknopf in der Ueberschrift stehen', () => { |
| 50 | // Die Erklaerung gehoert dorthin, wo die Frage entsteht - der Verweis geht |
| 51 | // am Knopf vorbei, der Knopf selbst bleibt sichtbar an seinem Platz. |
| 52 | const abschnitt = karte(sectionHeader('Fahrlinien', hilfeKnopf('strom'))); |
| 53 | expect(abschnitt.querySelector('h2 .hilfe-knopf')).not.toBeNull(); |
| 54 | }); |
| 55 | |
| 56 | it('benennt einen nachtraeglich gefuellten Abschnitt ebenso', () => { |
| 57 | // Der Ableitungsbereich im Lageplan wird bei jeder Neuzeichnung geleert und |
| 58 | // neu bestueckt; danach laeuft benenneAbschnitt() erneut ueber ihn. |
| 59 | const abschnitt = document.createElement('section'); |
| 60 | abschnitt.append(sectionHeader('Ableitung aus der Zeichnung', hilfeKnopf('zwischenzeit'))); |
| 61 | benenneAbschnitt(abschnitt); |
| 62 | expect(nameVon(abschnitt)).toBe('Ableitung aus der Zeichnung'); |
| 63 | }); |
| 64 | }); |