[Semester 4] Woche 6 - Testing II & Software Metriken

[Moritz-Czekalski]

Testing III

Zunächst haben wir diese Woche die krankheitsbedingt aufgeschobenen Test-Coverage aufgeholt:

Metrik	Coverage
Lines	88.58%
Statements	83.54%
Functions	83.18%
Branches	72.31%

Die geforderte Coverage über 80% ist für Lines, Statements und Functions erreicht. Branch Coverage liegt darunter, hauptsächlich wegen der vielen alternativen SVG-, Drag-and-Drop- und Editor-Interaktionspfade.

Test-Typ	Automatisierte Abdeckung (Zeilen)	Inhalt
Unit Tests	98.35%	Simulation, Gate-Library, Netze/Wires, Services, Storage, Utils, Hooks, SVG-Helfer
Komponenten-/UI-Tests	84.73%	Editor-Komponenten wie Canvas, Library, Inspector, Toolbar, SignalViewer, SimulationPanel, CustomComponentDialog
Smoke-/Routing-Tests	80.00%	App-Start, geschützte Routen, Navigation Shell
Gesamt-Coverage	85.06%	Gesamter berücksichtigter Frontend-Code ohne Entry-Points, Types und generierte Dateien

---

Software-Metriken

1. Zyklomatische Komplexität

Zyklomatische Komplexität misst die Anzahl unabhängiger Ausführungspfade in einer Funktion oder Methode und ist ein Indikator für Wartbarkeit und Testaufwand.

Im Projekt haben wir in eslint.config.js die ESLint-Regel complexity mit max: 10 aktiviert; der Linter warnt bei Überschreitung.

Befund: Die meisten Frontend-Module liegen unter dem Grenzwert, vereinzelt gibt es jedoch Funktionen mit hoher Komplexität, die refaktoriert werden sollten.

Vorgehen: betroffene Funktionen in kleinere Einheiten zerlegen, Unit-Tests erweitern und die Lint-Checks in der CI als Fehler erzwingen.

2. Kognitive Komplexität

Kognitive Komplexität misst, wie schwer ein Codeabschnitt für Menschen zu verstehen ist.
Je mehr verschachtelte if-Verzweigungen, Schleifen, switches, Bedingungen, Sonderfälle, frühe Returns, komplexe Abläufe,.. vorhanden sind, desto höher wird die Kognitive Komplexität.
Diese Metrik wird in SonarQube gemessen.
Hierbei haben die meisten Klassen einen sehr geringen Wert (<10). Jedoch gibt es auch noch ein paar Dateien mit höheren Werten, bis zu 66.

3. Response for a Class (RFC)

Die RFC‑Metrik misst die Anzahl von Methoden, die eine Klasse direkt bereitstellt, sowie die Methodenaufrufe, die als Reaktion auf Nachrichten an diese Klasse ausgelöst werden. Sie gibt Aufschluss darüber, wie viele verschiedene Antworten ein Objekt liefern kann. Ein hoher Wert deutet auf erhöhte Komplexität, engen Testaufwand und mögliche Kopplungsprobleme hin.

Im Projekt wurde das Skript frontend/scripts/metrics/rfc.cjs eingefügt, das RFC approximiert und Klassen gegen einen Grenzwert (RFC_MAX, Standard: 10) prüft.

Befund: Alle Methoden befinden sich unter dem Maximum von 10.

Vorgehen: Klassen mit hohem RFC aufteilen, Schnittstellen klarer trennen und RFC‑Checks in die CI integrieren, um regressionsbasierte Komplexitätszunahme früh zu erkennen.

[ultra-ms]

Guter Blogeintrag! Die Aufschlüsselung der Test-Coverage nach Test-Typen finde ich sehr übersichtlich, und die Einordnung der Branch-Coverage ist ehrlich nachvollziehbar.

Zwei Anmerkungen:

• Bei "1. Zyklomatische Komplexität" schreibt ihr, dass der Linter bei >10 warnt, und ihr wollt "die Lint-Checks in der CI als Fehler erzwingen". Aber habt ihr schon konkrete Funktionen identifiziert, die aktuell drüber liegen, und plant ihr die Refactorings zeitnah oder erst nach Semesterende?
• Bei "2. Kognitive Komplexität" erwähnt ihr einen Maximalwert von 66, was ja deutlich über dem, was man sich wünscht. Um welche Dateien/Komponenten handelt es sicht hier (Drag-and-Drop-Logik, Rendering-Code)? Das würde die Zahl greifbarer machen.

Aber auch so muss ich sagen: Ein eigenes Skript zur Prüfung der RFC-Metrik ist ein sehr cooler Ansatz.👍🏻

(Gruppe Hexfields-Studio)

[Moritz-Czekalski]

Danke für das Feedback!
Zu den Fragen:

• Aktuell warnt der Linter bei Funktionen größer als 10, wenn die GitHub-Actions-Pipeline durchlaufen wird, dort sind dann die zu großen Funktionen aufgelistet. Die Refactorings dieser sind vorerst nicht unsere Prio-1, da sie zum Teil nur leicht darüber liegen, aber noch im Rahmen.
• Die Datei, die raussticht, ist unsere Canvas.tsx, so ziemlich die Hauptdatei, in der vieles zusammenkommt und verknüpft wird, dadurch steigt die Komplexität enorm.