diff --git a/BEDIENUNGSANLEITUNG.md b/BEDIENUNGSANLEITUNG.md index cd41a7c..234768a 100644 --- a/BEDIENUNGSANLEITUNG.md +++ b/BEDIENUNGSANLEITUNG.md @@ -28,27 +28,27 @@ Dieses Programm visualisiert die Funktionsweise von **20 Sortieralgorithmen** ## 2. Oberfläche ``` -┌──────────────────────────────────────────────────────────┐ +┌───────────────────────────────────────────────────────────────┐ │ Sortier-Algorithmen [Bedienung] │ -├──────────────┬─────────────────────────────────────────────┤ -│ │ ┌─ Phase-Label ──────────────────────┐ │ -│ Algorithmus │ │ Vergleich: arr[3]=42 mit arr[4]=17 │ │ -│ [Dropdown] │ └────────────────────────────────────┘ │ -│ │ │ -│ Daten │ ┌─────────── Canvas ─────────────────┐ │ -│ [Vorlage] │ │ │ │ -│ │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │ -│ Eigene │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │ -│ Werte │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │ -│ │ │ │ │ -│ Array-Größe │ └────────────────────────────────────┘ │ -│ ─────────── │ │ -│ Geschw. │ [▶][⏸][⏭][🔀][↺][🌙] │ -│ ─────────── │ │ -│ Legend │ Vergleiche: 128 Tausche: 64 Zeit: 1.2s │ -│ │ │ -│ [▶ Play] │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ -└──────────────┴─────────────────────────────────────────────┘ +├──────────────┬────────────────────────────────────────────────┤ +│ │ ┌─ Phase-Label ───────────────────────┐ │ +│ Algorithmus │ │ Vergleich: arr[3]=42 mit arr[4]=17 │ │ +│ [Dropdown] │ └─────────────────────────────────────┘ │ +│ │ │ +│ Daten │ ┌─────────── Canvas ──────────────────┐ │ +│ [Vorlage] │ │ │ │ +│ │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │ +│ Eigene │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │ +│ Werte │ │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ │ +│ │ │ │ │ +│ Array-Größe │ └─────────────────────────────────────┘ │ +│ ─────────── │ │ +│ Geschw. │ [▶][⏸][⏭][🔀][↺][🌙] │ +│ ─────────── │ │ +│ Legend │ Vergleiche: 128 Tausche: 64 Zeit: 1.2s │ +│ │ │ +│ [▶ Play] │ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ │ +└──────────────┴────────────────────────────────────────────────┘ ``` - **Links (Sidebar):** Algorithmus wählen, Datensatz, eigene Werte, Geschwindigkeit, Legende @@ -314,6 +314,29 @@ Algorithmen mit besonderen Eigenschaften oder Anwendungsfällen. --- +## Tests + +```bash +node test_algorithms.js # Kurzbericht +node test_algorithms.js --verbose # Detaillierte Ausgabe +``` + +Das Testskript führt **automatisierte Korrektheitstests** für alle Sortieralgorithmen durch: + +**Haupt-Tests** — 19 Sortier-Algorithmen × 5 Presets × 2 Größen = 190 Tests. Für jeden: `done`-Step, sortiert, Länge erhalten. + +**Shuffle-Tests** — 10 Tests. Prüft dass die Werte permutiert aber erhalten bleiben. + +**Edge Cases** — Leeres Array und Single-Element. + +**Performance-Test** — 6 Algorithmen mit 100 Elementen. + +**Gesamt: 198 Tests** — alle müssen bestehen. + +Das Skript extrahiert den JavaScript-Code aus `sorting_visualization.html`, führt ihn in einer isolierten Node.js-VM aus und ruft `buildSteps(algo)` auf. Die Funktion ist rein funktional — keine DOM-Manipulation — und daher unit-testbar. + +--- + ## Lizenz Dieses Projekt ist eine Open-Source-Lehr- und Lernressource. diff --git a/README.md b/README.md index 7465c7f..d449c74 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ Interaktive Visualisierung von 20 Sortieralgorithmen mit Schritt-für-Schritt-Da - **Schritt-Navigation** — vor, zurück, Play/Pause - **Keyboard-Steuerung** — alle Funktionen auch ohne Maus bedienbar - **URL-State** — Auswahl bleibt beim Neuladen erhalten -- **Mobile optimiert** — Touch-Support, zoom-resistent +- **Mobile optimiert** — Touch-Support, zoom-resistent, responsive - **Hell/Dunkel-Modus** — per Button oder `T` - **Barrierefreiheit** — ARIA-Labels, Screen-Reader-Ankündigungen @@ -57,17 +57,51 @@ Interaktive Visualisierung von 20 Sortieralgorithmen mit Schritt-für-Schritt-Da ## Tests ```bash -node test_algorithms.js +node test_algorithms.js # Kurzbericht +node test_algorithms.js --verbose # Detaillierte Ausgabe ``` -Alle 198 Tests müssen bestehen. +### Was wird getestet? + +Das Testskript führt **automatisierte Korrektheitstests** für alle Sortieralgorithmen durch: + +**1. Haupt-Tests (2 Größen × 5 Presets × 19 Sortier-Algorithmen = 190)** +Für jeden Algorithmus (außer Shuffle) wird geprüft: +- Der letzte Step hat `type === 'done'` +- Das Array ist vollständig sortiert +- Die Array-Länge bleibt erhalten + +**2. Shuffle-Tests (10 Tests)** +Shuffle ist speziell — prüft stattdessen: +- Länge bleibt erhalten +- Alle Original-Werte sind noch vorhanden + +**3. Edge Cases (2 Tests)** +- Leeres Array → Bubble Sort +- Single-Element `[42]` → Bubble Sort + +**4. Performance-Test (6 Algorithmen × 100 Elemente)** +- Sortiert das Array korrekt in akzeptabler Zeit + +**Gesamt: 198 Tests** + +### Technische Details + +Das Skript: +1. **Extrahiert** den JavaScript-Code aus `sorting_visualization.html` +2. **Führt** ihn in einer isolierten Node.js-VM aus (mit gemockten DOM-Elementen) +3. **Ruft** `buildSteps(algo)` auf — die Funktion die alle Steps für die Animation erzeugt +4. **Verifiziert** dass der letzte Step das Array korrekt sortiert hat + +Die `buildSteps`-Funktion ist rein funktional und gibt nur Step-Objekte zurück — keine DOM-Manipulation. Das macht sie unit-testbar. --- ## Dateien ``` -sorting_visualization.html # Hauptprogramm (Single-File) +sorting_visualization.html # Hauptprogramm (Single-File) +BEDIENUNGSANLEITUNG.md # Bedienungsanlietung test_algorithms.js # Node.js Test-Suite .gitignore # Git-Konfiguration README.md # Dieses Dokument diff --git a/sorting_visualization.html b/sorting_visualization.html index bdc188a..4af0cc9 100644 --- a/sorting_visualization.html +++ b/sorting_visualization.html @@ -204,7 +204,7 @@

- Sortier-Algorithmen v0.2.18 + Sortier-Algorithmen v0.3.1

Interaktive Visualisierung mit schrittweiser Animation