Testing und Qualität

Webseiten werden schnell komplex. Kleine Änderungen an CSS, JavaScript, Routing oder Daten können unerwartete Nebenwirkungen haben. Tests und Qualitätschecks helfen, Fehler früher zu finden.

Qualität bedeutet mehr als fehlerfrei

Eine gute Webanwendung ist:

• korrekt
• verständlich
• wartbar
• performant
• zugänglich
• sicher
• konsistent gestaltet
• auf mehreren Geräten nutzbar

Manuelle Checks

Manuelle Tests bleiben wichtig, besonders für Layout, UX und Accessibility.

Prüfe regelmäßig:

• Desktop, Tablet und Smartphone
• helle und dunkle Darstellung, falls vorhanden
• Tastaturbedienung
• Formulare mit gültigen und ungültigen Eingaben
• leere Zustände
• Ladezustände
• Fehlermeldungen
• langsame Netzwerkverbindung
• verschiedene Browser

Unit Tests

Unit Tests prüfen kleine Einheiten, zum Beispiel Funktionen.

function formatPrice(cents) {
  return `${(cents / 100).toFixed(2)} EUR`
}

Mögliche Testfälle:

• 0 wird zu 0.00 EUR
• 199 wird zu 1.99 EUR
• negative Werte werden abgelehnt, falls fachlich nötig

Unit Tests sind besonders nützlich für Validierung, Berechnungen, Formatierung und Hilfsfunktionen.

Integrationstests

Integrationstests prüfen, ob mehrere Teile zusammenarbeiten.

Beispiele:

• Formular sendet Daten an API.
• API validiert Eingaben und speichert Daten.
• Login setzt eine Session.
• Suchfeld zeigt Ergebnisse aus dem Backend.

End-to-End-Tests

End-to-End-Tests prüfen echte Benutzerabläufe im Browser.

Typische Szenarien:

• Benutzer meldet sich an.
• Benutzer erstellt einen Beitrag.
• Benutzer filtert eine Liste.
• Benutzer erhält eine verständliche Fehlermeldung.
• Benutzer kann eine wichtige Aktion per Tastatur ausführen.

E2E-Tests sind wertvoll, aber teurer als kleine Tests. Deshalb sollten sie wichtige Kernabläufe abdecken.

Linting und Formatting

Linting findet typische Codeprobleme. Formatting sorgt für einheitlichen Stil.

Beispiele:

• ungenutzte Variablen
• unerreichbarer Code
• unsichere Patterns
• falsche Imports
• uneinheitliche Einrückung

Automatische Checks sparen Diskussionen und machen Code Reviews fokussierter.

Code Reviews

Ein gutes Review prüft nicht nur, ob Code funktioniert.

Leitfragen:

• Ist das Problem richtig verstanden?
• Ist die Lösung einfacher als nötig kompliziert?
• Sind Fehlerfälle abgedeckt?
• Gibt es Sicherheitsrisiken?
• Ist der Code verständlich benannt?
• Passen Tests und Dokumentation?
• Bleibt die UI konsistent?

Definition of Done

Eine einfache Definition of Done für Webaufgaben:

• Funktion erfüllt die Anforderung.
• Fehlerzustände sind sichtbar behandelt.
• Layout funktioniert mobil und am Desktop.
• Tastaturbedienung ist geprüft.
• Keine offensichtlichen Konsolenfehler.
• Relevante Tests oder manuelle Checks wurden ausgeführt.
• Änderung ist nachvollziehbar dokumentiert oder beschrieben.