Einfacher Integrationscheck im TUI

In der vorherigen Lektion haben wir einzelne Funktionen isoliert mit Unit-Tests geprüft. Jetzt gehen wir einen Schritt weiter: Bei einem Integrationscheck testen wir das Zusammenspiel mehrerer Teile:

• Eingabe validieren
• Temperatur umrechnen
• Bericht formatieren

Für TUI-Apps ist das meist robuster als UI-Automation auf Zeichenebene. Wir testen den fachlichen Ablauf direkt über eine Funktion, die mehrere Schritte kombiniert.

Beispiel-Ablauf

Kritischer Ablauf in unserer Wetter-App: „Wetterbericht formatieren“

1. Stadtname wird validiert (nicht leer?)
2. Temperatur wird von °C in °F umgerechnet
3. Ein formatierter Bericht-String wird erzeugt

Dateistruktur:

src/
  temperature.ts
  format-weather.ts
  format-weather.integration.test.ts

Produktcode

Die Funktion celsiusToFahrenheit aus src/temperature.ts kennen wir bereits aus der Unit-Test-Lektion — sie ist dort einzeln getestet. Hier nutzen wir sie als Baustein.

src/format-weather.ts:

import { celsiusToFahrenheit } from './temperature.ts';
 
function validateCityName(name: string): string {
  const trimmed = name?.trim();
 
  if (!trimmed) {
    throw new Error('Stadtname darf nicht leer sein');
  }
 
  return trimmed;
}
 
export function formatWeatherReport(city: string, temperatureC: number): string {
  const validCity = validateCityName(city);
  const temperatureF = celsiusToFahrenheit(temperatureC);
 
  return `${validCity}: ${temperatureC}°C / ${temperatureF}°F`;
}

Die Funktion formatWeatherReport kombiniert drei Schritte: Stadtname prüfen, Temperatur umrechnen, formatierten String erzeugen. Alles sind reine Funktionen ohne Seiteneffekte — kein Dateizugriff, keine Netzwerkanfragen.

Integrationscheck mit Vitest

Die Testdatei heißt .integration.test.ts, um Integrationschecks klar von Unit-Tests (.test.ts) zu unterscheiden.

src/format-weather.integration.test.ts:

import { describe, expect, it } from 'vitest';
import { formatWeatherReport } from './format-weather.ts';
 
describe('formatWeatherReport (Integration)', () => {
  it('Erfolgsfall: formatiert Bericht mit Stadt und Temperaturen', () => {
    const result = formatWeatherReport('Berlin', 20);
 
    expect(result).toContain('Berlin');
    expect(result).toContain('20°C');
    expect(result).toContain('68°F');
  });
 
  it('Fehlerfall: leerer Stadtname wirft Fehler', () => {
    expect(() => formatWeatherReport('', 20)).toThrow(
      'Stadtname darf nicht leer sein',
    );
  });
});

Anders als beim Unit-Test, der celsiusToFahrenheit isoliert prüft, testet dieser Check den ganzen Ablauf: Validierung, Umrechnung und Formatierung zusammen.

Eine neue expect-Methode im Vergleich zur Unit-Test-Lektion:

• toContain(text) — prüft, ob ein String (oder Array) den angegebenen Wert enthält. Damit können wir flexibel prüfen, ob bestimmte Bestandteile im Ergebnis vorkommen, ohne das exakte Format festzunageln.

Ausführen:

npm test

Einbindung in die TUI

Die TUI kann formatWeatherReport direkt in der Ausgabe nutzen, z. B. in print-weather.ts:

import { formatWeatherReport } from './format-weather.ts';
 
function printWeather(city: string, temperatureC: number) {
  try {
    const report = formatWeatherReport(city, temperatureC);
    console.log(report);
  } catch (error: unknown) {
    if (error instanceof Error) {
      console.error(error.message);
      return;
    }
    console.error('Unbekannter Fehler');
  }
}

Dadurch prüfen die Integrationstests genau den Codepfad, den die App im Alltag ebenfalls nutzt.