Bump version to v0.3.0

BEDIENUNGSANLEITUNG.md

@@ -28,27 +28,27 @@ Dieses Programm visualisiert die Funktionsweise von **20 Sortieralgorithmen**
 ## 2. Oberfläche
 
 ```
-┌──────────────────────────────────────────────────────────┐
+┌───────────────────────────────────────────────────────────────┐
 │  Sortier-Algorithmen                              [Bedienung] │
-├──────────────┬─────────────────────────────────────────────┤
+├──────────────┬────────────────────────────────────────────────┤
-│              │  ┌─ Phase-Label ──────────────────────┐   │
+│              │  ┌─ Phase-Label ───────────────────────┐       │
 │  Algorithmus │  │  Vergleich: arr[3]=42 mit arr[4]=17 │       │
-│  [Dropdown]  │  └────────────────────────────────────┘   │
+│  [Dropdown]  │  └─────────────────────────────────────┘       │
 │              │                                                │
-│  Daten       │  ┌─────────── Canvas ─────────────────┐   │
+│  Daten       │  ┌─────────── Canvas ──────────────────┐       │
 │  [Vorlage]   │  │                                     │       │
 │              │  │   █ █ █ █ █ █ █ █ █ █ █ █ █ █ █     │       │
 │  Eigene      │  │   █ █ █ █ █ █ █ █ █ █ █ █ █ █ █     │       │
 │  Werte       │  │   █ █ █ █ █ █ █ █ █ █ █ █ █ █ █     │       │
 │              │  │                                     │       │
-│  Array-Größe │  └────────────────────────────────────┘   │
+│  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.

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,10 +57,43 @@ 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.
 
 ---
 
@@ -68,6 +101,7 @@ Alle 198 Tests müssen bestehen.
 
 ```
 sorting_visualization.html  # Hauptprogramm (Single-File)
+BEDIENUNGSANLEITUNG.md      # Bedienungsanlietung
 test_algorithms.js          # Node.js Test-Suite
 .gitignore                  # Git-Konfiguration
 README.md                   # Dieses Dokument

sorting_visualization.html

@@ -204,7 +204,7 @@
       <div class="flex-1"></div>
       <div class="text-center">
         <h1 class="title-text font-bold tracking-tight" style="color: var(--c-text); text-shadow: 0 0 40px rgba(74,124,255,0.3);">
-          Sortier-Algorithmen <span style="font-size: 0.45em; font-weight: 400; opacity: 0.5; vertical-align: middle;">v0.2.18</span>
+          Sortier-Algorithmen <span style="font-size: 0.45em; font-weight: 400; opacity: 0.5; vertical-align: middle;">v0.3.1</span>
         </h1>
         <p class="text-muted text-sm mt-0.5">Interaktive Visualisierung mit schrittweiser Animation</p>
       </div>