Hinweis 02-3: Detail und Zurück
Stufe 1 zuerst lesen, dann selbst probieren. Die nächste Stufe erst, wenn du nach zwei Versuchen feststeckst.
Stufe 1: Denkfrage
LeadDetail bekommt lead, das auch undefined sein kann. Wann passiert das? (Zum
Beispiel, wenn jemand die ID in der Adresse ändert oder der Lead gelöscht wurde.) Was soll
die Person dann sehen?
Stufe 2: Teilbeispiel
<section data-testid="lead-detail">
<button type="button" data-testid="back-to-list" onClick={onBack}>Zurück zur Liste</button>
{lead === undefined ? (
<p>Lead nicht gefunden.</p>
) : (
<dl>
<dt>Firma</dt><dd>{lead.company}</dd>
{/* E-Mail, Status, Follow-up */}
</dl>
)}
</section>
Stufe 3: Konkrete Erklärung
Der Zurück-Button steht ausserhalb der Bedingung, damit er immer da ist. <dl> mit <dt>
und <dd> ist die passende Struktur für Bezeichnung und Wert und für Screenreader gut lesbar.
Für das Follow-up schreib {lead.nextFollowUp ?? "kein Termin"}; ?? nimmt den rechten
Wert, wenn links null steht. Der Test sucht nach "2026-04-02" für den Test-Lead T-002,
also gib das Datum unverändert aus.