BDD auf TypeScript: Wenn Code die Sprache des Geschäfts spricht
\n\nHaben 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\nHeute 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\nWas ist BDD und warum brauchen Sie es?
\n\nBehaviour-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\nDas Hauptmerkmal von BDD ist die Gherkin-Syntax. Es ist die Struktur „Gegeben – Wenn – Dann“ (Given – When – Then), die so aussieht:
\n\nFunktionalitä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\nFinden 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\nWann 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
Werkzeuge für BDD auf TypeScript
\n\nFü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\nCucumber.js + TypeScript: Der Klassiker
\n\nCucumber 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.
Installation:
\n\nnpm install --save-dev @cucumber/cucumber typescript ts-node\nnpm install --save-dev @types/node\n\n\nErstellen Sie die Datei features/login.feature:
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\nJetzt schreiben wir die Schritte (Steps) in TypeScript. Erstellen Sie features/step_definitions/login.steps.ts:
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