BDD auf TypeScript: Code schreiben, den das Business versteht

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

BDD auf TypeScript: Wenn Code die Sprache des Geschäfts spricht

\n\n

Haben Sie schon einmal ein mehrseitiges Dokument mit Anforderungen übersetzt, nur um festzustellen, dass der Kunde etwas ganz anderes gemeint hat? Kennen Sie die Situation, in der ein Entwickler und ein Analyst dieselbe Aufgabe betrachten, aber zwei verschiedene Anwendungen sehen? Wenn ja, dann sind Sie bereit für BDD (Behaviour-Driven Development) – eine Methodik, die die Grenze zwischen „ich möchte“ und „erledigt“ verwischt.

\n\n

Heute sprechen wir darüber, wie man BDD auf TypeScript einführt. Ich zeige Ihnen, wie Sie langweilige Spezifikationen in lebendige, ausführbare Szenarien verwandeln, die sowohl der Manager als auch der Backend-Entwickler verstehen. Es geht nicht nur um Tests – es geht um eine gemeinsame Sprache im Team.

\n\n

Übrigens, wenn Sie gerade erst mit TypeScript beginnen, empfehle ich einen Blick in die Wissensdatenbank von PythonLib – dort gibt es hervorragende Materialien zu den Grundlagen. Aber wir machen weiter.

\n\n

Was ist BDD und warum brauchen Sie es?

\n\n

Behaviour-Driven Development ist eine Weiterentwicklung von TDD (Test-Driven Development). Während TDD sich darauf konzentriert, „wie“ der Code funktioniert (Tests werden vor der Implementierung geschrieben), beantwortet BDD die Frage, „was“ das System aus Benutzersicht tun soll.

\n\n

Das Hauptmerkmal von BDD ist die Gherkin-Syntax. Es ist die Struktur „Gegeben – Wenn – Dann“ (Given – When – Then), die so aussieht:

\n\n
Funktionalität: Benutzeranmeldung\n  Als registrierter Benutzer\n  möchte ich mich im System anmelden\n  um Zugang zu meinem persönlichen Bereich zu erhalten\n\n  Szenario: Erfolgreicher Login\n    Gegeben ein Benutzer mit der E-Mail "test@example.com" und dem Passwort "123456"\n    Wenn der Benutzer korrekte Daten eingibt\n    Dann leitet das System ihn zu seinem persönlichen Bereich weiter\n
\n\n

Finden Sie nicht auch, dass das verständlicher ist als „der Unit-Test prüft, ob die Methode login() true zurückgibt“? Genau darin liegt die Stärke von BDD: Tests auf TypeScript werden zu einer Dokumentation, die jedes Teammitglied lesen kann.

\n\n

Wann rechnet sich BDD?

\n\n
    \n
  • Komplexe Geschäftslogik – wenn der Code viele Bedingungen, Aktionsketten und Fehlerszenarien enthält.
  • \n
  • Verteilte Teams – Analysten in Moskau, Entwickler in Minsk, Tester in Nowosibirsk. BDD ist ihre gemeinsame Sprache.
  • \n
  • Mikroservices – wenn die Interaktionsverträge zwischen Diensten klar beschrieben werden müssen.
  • \n
\n\n

Werkzeuge für BDD auf TypeScript

\n\n

Für die Einführung von BDD in TypeScript haben wir zwei Hauptwerkzeuge: Cucumber.js (oder seine Varianten) und Jest mit Plugins. Lassen Sie uns beide Ansätze durchgehen.

\n\n

Cucumber.js + TypeScript: Der Klassiker

\n\n

Cucumber ist der Goldstandard für BDD. Es liest Gherkin-Dateien (normalerweise mit der Erweiterung .feature) und führt die Code-Schritte aus, die Sie in TypeScript schreiben.

\n\n

Installation:

\n\n
npm install --save-dev @cucumber/cucumber typescript ts-node\nnpm install --save-dev @types/node\n
\n\n

Erstellen Sie die Datei features/login.feature:

\n\n
Funktionalität: Anmeldung im System\n  Als Benutzer\n  möchte ich mich anmelden\n  um Zugang zu den Funktionen zu erhalten\n\n  Szenario: Erfolgreicher Login mit korrekter E-Mail und Passwort\n    Gegeben ich öffne die Anmeldeseite\n    Wenn ich die E-Mail "admin@test.com" eingebe\n    Und ich das Passwort "secret" eingebe\n    Und ich auf die Schaltfläche "Anmelden" klicke\n    Dann sehe ich die Begrüßungsnachricht "Willkommen, Admin!"\n
\n\n

Jetzt schreiben wir die Schritte (Steps) in TypeScript. Erstellen Sie features/step_definitions/login.steps.ts:

\n\n
import { Given, When, Then } from '@cucumber/cucumber';\nimport { expect } from 'chai';\n\n// Einfache Simulation des Anwendungszustands\nconst appState = {\n  currentPage: '',\n  loggedInUser: ''\n};\n\nGiven('ich öffne die Anmeldeseite', function () {\n  appState.currentPage = 'login';\n  appState.loggedInUser = '';\n});\n\nWhen('ich die E-Mail {string} eingebe', function (email                

Blogs

Buchempfehlungen