BDD in JavaScript: Erste Schritte mit Gurke und Gherkin-js-Tutorial-php.cn

BDD in JavaScript: Getting Started with Cucumber and Gherkin

Die Vorteile der testgetriebenen Entwicklung (TDD) sind bekannt, die die Produktqualität und die Entwicklungseffizienz der Produkte verbessern. Jedes Mal, wenn Sie einen Code -Test schreiben, können Sie die Richtigkeit des Codes sicherstellen und mögliche zukünftige Codefehler feststellen.

Verhaltensgetriebene Entwicklung (BDD) geht weiterentwickelt und testet das Verhalten des Produkts nicht nur, um sicherzustellen, dass sich das Produkt im Einklang mit den Erwartungen verhält. In diesem Artikel wird beschrieben, wie automatisierte Akzeptanztests im BDD-Stil mit dem Gurken-Framework geschrieben werden. Der Vorteil der Gurke besteht darin, dass Testfälle in präziser natürlicher Sprache für das einfache Verständnis durch nicht-technisches Personal im Projekt geschrieben werden können. Nach dem Lesen dieses Artikels können Sie feststellen, ob Gurke für Ihr Team geeignet ist und Ihren eigenen Akzeptanztest schreiben. Bereit? Fangen wir an!

Schlüsselpunkte

BDD Basierend auf TDD wird es eher auf das Verhalten des Produkts als auf den Code getestet, sodass es einfacher wird, von einer breiteren Palette von Stakeholdern, einschließlich nicht-technischer Personal, verstanden zu werden.

Gurke ist ein BDD-Framework, das Gherkin verwendet, eine leicht verständliche Sprache, um Testfälle zu definieren, um sicherzustellen, dass alle Beteiligten den Testprozess verstehen und am Testprozess teilnehmen können.
Gherkin -Syntaxstrukturen testet in Szenarien und Merkmale, wobei die einfache gegebene, dann Schritte zur Beschreibung des Verhaltens ohne Angabe technischer Implementierungen.
cucumber.js integriert sich in JavaScript-Projekte, führt Gherkin-definierte Tests aus und unterstützt asynchrone Operationen und externe Testwerkzeuge über verschiedene Plug-Ins und Konfigurationen.
cucumber.js -Einstellungen umfassen das Installieren des Moduls über NPM, das Konfigurieren von Feature -Dateien und Schrittdefinitionen sowie optional in ein Build -Skript oder Taskläufer wie Grunzen oder Gulp.
Dieser Artikel enthält ein grundlegendes Gurken -Testbeispiel, das demonstriert, dass ein Gherkin -Szenario für Addition und Multiplikation eingerichtet wird, wobei einfache Behauptungen zur Überprüfung der Richtigkeit dieser Vorgänge verwendet werden.
Dieser Artikel beschreibt auch die erweiterten Merkmale von cucumber.js, z.

Der Unterschied zwischen BDD und TDD

spiegelt sich hauptsächlich in der Struktur- und Schreibmethode des Tests wider. In TDD werden Tests geschrieben, gewartet und von Entwicklern verstanden, die Code schreiben. Andere brauchen möglicherweise überhaupt keine Lesen von Tests, und das ist völlig in Ordnung. In BDD muss jedoch Tests von weit mehr Menschen verstanden werden als Entwickler, die Funktionen schreiben. Viele Interessengruppen kümmern sich darum, ob sich das Produkt korrekt verhält, z. B. das QA -Personal, Produktanalysten, Vertriebsmitarbeiter und sogar die Geschäftsleitung. Dies bedeutet, dass BDD -Tests im Idealfall so geschrieben werden müssen, dass jeder, der das Produkt versteht, verstehen kann. Der Unterschied ist:

und:

const assert = require('assert');
const webdriver = require('selenium-webdriver');
const browser = new webdriver.Builder()
  .usingServer()
  .withCapabilities({'browserName': 'chrome' })
  .build();

browser.get('http://en.wikipedia.org/wiki/Wiki');
browser.findElements(webdriver.By.css('[href^="/wiki/"]'))
.then(function(links){
  assert.equal(19, links.length); // 假设的数字
  browser.quit();
});

Nach dem Login kopieren

const assert = require('assert');
const webdriver = require('selenium-webdriver');
const browser = new webdriver.Builder()
  .usingServer()
  .withCapabilities({'browserName': 'chrome' })
  .build();

browser.get('http://en.wikipedia.org/wiki/Wiki');
browser.findElements(webdriver.By.css('[href^="/wiki/"]'))
.then(function(links){
  assert.equal(19, links.length); // 假设的数字
  browser.quit();
});

Nach dem Login kopieren

Diese beiden Tests tun dasselbe, aber eine ist eine lesbare natürliche Sprache und die andere wird nur von Menschen verstanden, die JavaScript und Selen kennen. In diesem Artikel wird angezeigt, wie Sie BDD -Tests in einem JavaScript -Projekt unter Verwendung des Cucumber.js -Frameworks implementieren, damit Ihr Produkt von dieser Teststufe profitieren kann.

Was ist Gurke/Gherkin?

Gurke ist ein Test-Framework für die verhaltensgetriebene Entwicklung. Sie können Tests im Gherkin -Format definieren und diese Gherkins ausführen, indem Sie sie an Code binden. Gherkin ist eine domänenspezifische Sprache (DSL), die zum Schreiben von Gurkentests verwendet wird. Es ermöglicht das Schreiben von Testskripten in einem menschlich lesbaren Format, das dann unter allen Beteiligten in der Produktentwicklung geteilt werden kann. Eine Gherkin -Datei ist eine Datei mit Tests, die in der Gurkin -Sprache geschrieben wurden. Diese Dateien haben normalerweise eine .Feature -Dateierweiterung. Der Inhalt dieser Gherkin -Dateien wird normalerweise als "Gherkin" bezeichnet.

gurkin

In Gherkin -definierten Tests haben Sie die Konzepte von Features und Szenarien. Sie ähneln den Testsuiten und Testfällen in anderen Testrahmen und bieten eine klare Möglichkeit, den Test zu strukturieren. Das Szenario ist nur ein separater Test. Es sollte nur einen Aspekt der Anwendung testen. Funktionen sind eine Reihe verwandter Szenarien. Daher werden viele verwandte Aspekte der Anwendung getestet. Im Idealfall werden Funktionen in Gherkin -Dateien eng mit den Funktionen in der Anwendung abgebildet - daher der Name. Jede Gherkin -Datei enthält eine Funktion, jede Funktion enthält eine oder mehrere Szenarien. Die Szene besteht dann aus Schritten, die in einer bestimmten Reihenfolge angeordnet sind:

zu behaupten

Idealerweise sollte jedes Szenario ein separater Testfall sein, sodass die Anzahl der Schritte sehr klein gehalten werden sollte. Die Schritte sind vollständig optional. Wenn Sie beispielsweise überhaupt nichts festlegen müssen, gibt es möglicherweise keinen bestimmten Schritt. Gherkin -Dateien sind so konzipiert, dass sie leicht zu lesen und jedem zugute kommen können, der an der Produktentwicklung beteiligt ist. Dies schließt nicht-technische Personen ein, sodass Gherkin-Dateien immer eher in Geschäftssprache als in der technischen Sprache geschrieben werden sollten. Dies bedeutet beispielsweise, dass Sie nicht auf eine einzelne UI -Komponente verweisen, sondern das Produktkonzept beschreiben, das Sie testen möchten.

Gherkin -Testbeispiel

Folgendes ist eine Gurkin -Beispiel -Suche nach Googles Gurken.js:

Given I have opened a Web Browser
When I load the Wikipedia article on "Wiki"
Then I have "19" Wiki Links

Nach dem Login kopieren

Wir können sofort sehen, dass dieser Test uns sagt, was zu tun ist, nicht wie es zu tun ist. Es ist in einer Sprache geschrieben, die jeder verstehen kann, und - was auch immer -, ist es höchstwahrscheinlich richtig, egal wie das Endprodukt optimiert ist. Google kann sich entscheiden, seine Benutzeroberfläche vollständig zu ändern, aber Gherkin ist immer noch genau, solange die Funktionalität gleichwertig ist. Sie können mehr darüber lesen, wenn Sie dann auf dem Gurkenwiki sind.

cucumber.js

Nach dem Schreiben von Testfällen im Gherkin -Format benötigen Sie eine Möglichkeit, sie auszuführen. In der JavaScript -Welt gibt es ein Modul namens Cucumber.js, mit dem Sie dies tun können. Sie können den JavaScript -Code definieren, den cucumber.js mit verschiedenen in der GHURKIN -Datei definierten Schritten herstellen kann. Anschließend wird die Tests ausgeführt, indem die Gherkin -Datei geladen und den JavaScript -Code ausgeführt wird, der jedem Schritt in der richtigen Reihenfolge zugeordnet ist. Beispielsweise haben Sie im obigen Beispiel die folgenden Schritte:

const assert = require('assert');
const webdriver = require('selenium-webdriver');
const browser = new webdriver.Builder()
  .usingServer()
  .withCapabilities({'browserName': 'chrome' })
  .build();

browser.get('http://en.wikipedia.org/wiki/Wiki');
browser.findElements(webdriver.By.css('[href^="/wiki/"]'))
.then(function(links){
  assert.equal(19, links.length); // 假设的数字
  browser.quit();
});

Nach dem Login kopieren

Sorgen Sie sich nicht zu sehr um all diese Bedeutungen-es wird später ausführlich erklärt. Im Wesentlichen definiert es jedoch einige Methoden, mit denen das Framework von cucumber.js Ihren Code an Schritte in der Gherkin -Datei binden kann.

(Der folgende Inhalt stimmt im Grunde genommen mit dem Originaltext überein und ist leicht angepasst, um die Flüssigkeit und Lesbarkeit aufrechtzuerhalten, und einige Sätze werden Synonyme ersetzt)

GUCUMBER.JS in Ihr Build

einschließen

Gucumber.js in Ihren Build einbeziehen. Fügen Sie einfach das Gurkenmodul in Ihrem Build hinzu und konfigurieren Sie es für ausgeführt. Der erste Schritt ist wie folgt:

Given I have opened a Web Browser
When I load the Wikipedia article on "Wiki"
Then I have "19" Wiki Links

Nach dem Login kopieren

Der zweite Schritt hängt davon ab, wie Sie den Build ausführen.

manuell ausführen

./node_modules/.bin/cucumber.js Es ist relativ einfach, Gurke manuell auszuführen, und es ist am besten, sicherzustellen, dass Sie es zuerst tun können, da die folgenden Lösungen alle Möglichkeiten sind, automatisch dasselbe zu tun. Nach der Installation ist die ausführbare Datei

. Beim Ausführen müssen Sie wissen, wo Sie auf dem Dateisystem alle erforderlichen Dateien finden können. Diese Dateien umfassen sowohl die Gherkin -Datei als auch der zu ausgeführte JavaScript -Code. Nach der Konvention werden alle Gherkin -Dateien im Features -Verzeichnis gespeichert, und wenn Sie es nicht anweisen, andere Vorgänge auszuführen, sucht Gurke auch nach JavaScript -Code, das im selben Verzeichnis ausgeführt wird. Es ist jedoch ratsam, den Speicherort dieser Dateien zu finden, damit Sie mehr Kontrolle über den Build -Prozess haben können. Wenn Sie beispielsweise alle Gherkin -Dateien im Verzeichnis von MyFeatures und allen JavaScript -Code in MySteps speichern, können Sie Folgendes tun:

Given I have loaded Google
When I search for "cucumber.js"
Then the first result is "GitHub - cucumber/cucumber-js: Cucumber for JavaScript"

Nach dem Login kopieren

Das Flag -r $ ./node_modules/.bin/cucumber.js --help ist ein Verzeichnis, das JavaScript -Dateien enthält, die Gurke automatisch zum Testen geladen werden. Es gibt auch einige andere Zeichen, die auch interessant sein könnten - lesen Sie einfach den Hilfegtext, um zu verstehen, wie sie funktionieren:

. Diese Verzeichnisse scannen rekursiv, sodass Sie je nach Situation die Dateien flach oder tief nisten können.

npm script

package.json Nach dem manuellen Ausführen von Gurken ist das Hinzufügen zum Build als NPM -Skript ein einfacher Fall. Sie fügen Ihr

wie folgt den folgenden Befehl hinzu (keine vollständig qualifizierten Pfade, da NPM sie für Sie verarbeitet) wie folgt:

Given('I have loaded Google', function() {});
When('I search for {stringInDoubleQuotes}', function() {});
Then('the first result is {stringInDoubleQuotes}', function() {});

Nach dem Login kopieren

Nachdem Sie fertig sind, können Sie ausführen:

$ npm install --save-dev cucumber

Nach dem Login kopieren

Es wird Gurkentests genau wie zuvor durchgeführt.

grunzen

<🎜>

Ein Grunzen -Plugin für die Durchführung von Gurken.js -Tests. Leider ist es veraltet und funktioniert nicht mit neueren Versionen von cucumber.js, was bedeutet, dass Sie viele Verbesserungen verpassen, wenn Sie es verwenden. Stattdessen kann ich einfach das Grunz-Shell-Plugin verwenden, um den Befehl genau auf die gleiche Weise wie oben auszuführen. Konfigurieren Sie nach der Installation einfach die folgende Plugin -Konfiguration zu Ihrer Gruntfile.js:

const assert = require('assert');
const webdriver = require('selenium-webdriver');
const browser = new webdriver.Builder()
  .usingServer()
  .withCapabilities({'browserName': 'chrome' })
  .build();

browser.get('http://en.wikipedia.org/wiki/Wiki');
browser.findElements(webdriver.By.css('[href^="/wiki/"]'))
.then(function(links){
  assert.equal(19, links.length); // 假设的数字
  browser.quit();
});

Nach dem Login kopieren

Jetzt wie zuvor können Sie Tests durchführen, indem Sie grunt shell:cucumber ausführen.

gulp

gulp ist genau das gleiche wie GrunT, da vorhandene Plugins veraltet sind und ältere Versionen des Gurkenwerkzeugs verwenden. Auch hier können Sie das Gulp-Shell-Modul verwenden, um den Befehl cucumber.js genau wie in anderen Szenarien auszuführen. Das Einrichten ist einfach:

Given I have opened a Web Browser
When I load the Wikipedia article on "Wiki"
Then I have "19" Wiki Links

Nach dem Login kopieren

Jetzt wie zuvor können Sie Tests durchführen, indem Sie gulp cucumber ausführen.

Ihr erster Gurkentest

Bitte beachten Sie, dass alle Codebeispiele in diesem Artikel auf GitHub gefunden werden können.

Jetzt, da wir wissen, wie man Gurken ausführt, schreiben wir tatsächlich einen Test. In diesem Beispiel werden wir etwas ziemlich künstliches tun, um zu zeigen, wie das System funktioniert. Tatsächlich machen Sie komplexere Dinge, z. B. direkt den Code, den Sie testen, direkt aufrufen, HTTP -API -Aufrufe zum Ausführen von Diensten oder zur Steuerung von Selen, um einen Webbrowser zu steuern, um Ihre Anwendung zu testen. Unser einfaches Beispiel wird beweisen, dass die Mathematik noch gültig ist. Wir werden zwei Eigenschaften haben - Zugabe und Multiplikation. Lassen Sie es uns zunächst einrichten.

Given I have loaded Google
When I search for "cucumber.js"
Then the first result is "GitHub - cucumber/cucumber-js: Cucumber for JavaScript"

Nach dem Login kopieren

Wie Sie den Test durchführen, liegt ganz bei Ihnen. In diesem Beispiel werde ich es zum Einfachheit halber manuell tun. In einem realen Projekt werden Sie es mit einer der oben genannten Optionen in Ihren Build integrieren.

Given('I have loaded Google', function() {});
When('I search for {stringInDoubleQuotes}', function() {});
Then('the first result is {stringInDoubleQuotes}', function() {});

Nach dem Login kopieren

Schreiben wir jetzt unsere erste tatsächliche Funktion. Dies wird in features/addition.feature:

platziert

$ npm install --save-dev cucumber

Nach dem Login kopieren

Sehr einfach und sehr einfach zu lesen. Es sagt uns genau, was wir tun, ohne uns zu sagen, wie es geht. Versuchen wir es:

Dann schreiben wir unsere erste Stufendatei. Dadurch werden die Schritte einfach implementiert, wie die Gurkenausgabe uns sagt, was nichts Nützliches tut, sondern die Ausgabe aussortiert. Dies wird in steps/maths.js:

platziert

const assert = require('assert');
const webdriver = require('selenium-webdriver');
const browser = new webdriver.Builder()
  .usingServer()
  .withCapabilities({'browserName': 'chrome' })
  .build();

browser.get('http://en.wikipedia.org/wiki/Wiki');
browser.findElements(webdriver.By.css('[href^="/wiki/"]'))
.then(function(links){
  assert.equal(19, links.length); // 假设的数字
  browser.quit();
});

Nach dem Login kopieren

defineSupportCode Hook ist eine Methode von cucumber.js, mit der Sie Code bereitstellen können, dass er für eine Vielzahl verschiedener Situationen verwendet wird. All dies wird abgedeckt, aber im Wesentlichen, wenn Sie Code schreiben möchten, den Gurken direkt anrufen, muss es sich in einem dieser Blöcke befinden. Sie werden feststellen, dass der Beispielcode hier drei verschiedene Schritte definiert - eine für jedes gegebene, wann und dann. Jeder Block gibt eine Zeichenfolge (oder einen regulären Ausdruck an, wenn Sie ihn benötigen), der den Schritten in der Attributdatei und die Funktionen, die ausgeführt werden, wenn dieser Schritt übereinstimmt, übereinstimmt. Platzhalter können in die Stufenzeichenfolge platziert werden (oder verwenden Sie stattdessen den Ausdruck des Capture -Ausdrucks, wenn Sie regelmäßige Ausdrücke verwenden), und diese Platzhalter werden extrahiert und als Argumente für Ihre Funktion bereitgestellt. Dies bietet eine sauberere Ausgabe, während er in der Realität immer noch nichts tut:

Lassen Sie uns jetzt alles zum Laufen bringen. Wir müssen den Code nur in unserer Schrittdefinition implementieren. Wir werden auch eine Sortierung machen, um das Lesen zu erleichtern. Dies beseitigt tatsächlich die Notwendigkeit von Rückrufparametern, da wir keine asynchronen Operationen durchführen. Danach wird unser steps/maths.js so aussehen:

Given I have opened a Web Browser
When I load the Wikipedia article on "Wiki"
Then I have "19" Wiki Links

Nach dem Login kopieren

Führen Sie es aus wie folgt aus:

Das war's, wir haben eine sehr leicht zu erweiterende Testsuite, die beweist, dass Mathematik korrekt ist. Warum als Übung nicht versuchen, es zu erweitern, um die Subtraktion zu unterstützen? Wenn Sie Probleme haben, können Sie in den Kommentaren um Hilfe bitten.

Fortgeschrittene Gurken.js Tipps

Es ist alles gut, aber Gurke kann etwas Fortgeschrittenes tun, das unser Leben erleichtert.

asynchrische Schritt -Definition

Bisher haben wir nur die Synchronisierungsschrittdefinition geschrieben. In der JavaScript -Welt ist dies jedoch normalerweise nicht gut genug. Viele Dinge in JavaScript müssen asynchron sein, also brauchen wir einen Weg, um damit umzugehen. Zum Glück hat Cucumber.js je nach Ihrer Präferenz mehrere integrierte Möglichkeiten, damit umzugehen. Die oben vorgeschlagene Methode, die eine traditionellere JavaScript -Methode ist, die asynchrone Schritte ausgeht, verwendet eine Rückruffunktion. Wenn Sie angeben, dass die Schritt -Definition die Rückruffunktion als letzter Parameter haben sollte, wird der Schritt erst nach Auslöser dieses Rückrufs abgeschlossen. In diesem Fall wird dies als Fehler angesehen, wenn der Rückruf mit Argumenten ausgelöst wird, und der Schritt fällt fehl. Wenn es ohne Parameter ausgelöst wird, wird der Schritt als erfolgreich angesehen. Wenn der Rückruf jedoch überhaupt nicht ausgelöst wird, wird sich das Framework irgendwann ausgelöst und den Schritt nicht bestanden. Die Bedeutung der Geschichte? Wenn Sie den Rückrufparameter akzeptieren, stellen Sie ihn sicher, dass Sie ihn aufrufen. Beispielsweise kann die Schrittdefinition eines HTTP -API -Aufrufs mit einem Rückruf wie folgt sein. Dies wird unter Verwendung von Anforderungen geschrieben, da es auf der Antwort Rückrufe verwendet.

Eine andere und mehr bevorzugte Methode besteht darin, den Typ zurückzugeben. Wenn Sie ein Versprechen aus einem Schritt zurückgeben, wird der Schritt nur dann als abgeschlossen angesehen, wenn das Versprechen abgeschlossen ist. Wenn das Versprechen abgelehnt wird, wird der Schritt scheitern; Wenn der von Ihnen zurückgegebene Inhalt kein Versprechen ist, wird der Schritt sofort als erfolgreich angesehen. Dies beinhaltet die Rückkehr undefinierter oder Null. Dies bedeutet, dass Sie wählen können, ob Sie während der Schrittausführung ein Versprechen zurückgeben müssen und das Framework bei Bedarf angepasst wird. Beispielsweise kann die Schrittdefinition für die Erstellung von HTTP -API -Aufrufen mit Versprechen wie folgt sein. Dies wird mit der Fetch -API geschrieben, da sie ein Versprechen für die Antwort zurückgibt.

Feature -Hintergrund, Szenenriss, Datentabelle, Hooks, Ereignisse und Welt

Diese erweiterten Funktionen wie Merkmalshintergrund, Szenenriss, Datentabelle sowie Hakenfunktionen (vor, nach dem Nachher, nach dem Nachstep, nach Afterstep usw.) und Ereignisverarbeitungsmechanismen können die Testeneffizienz und die Lesbarkeit erheblich verbessern. Durch die Verwendung dieser Funktionen ist es möglich, prägnanter zu schreiben und BDD -Tests leichter beizubehalten. World Objekte ermöglichen die Freigabe von Daten und Zustand zwischen verschiedenen Schrittdefinitionen und vereinfachen die Testlogik.

Zusammenfassung

Verhaltensgetriebene Entwicklung ist eine hervorragende Möglichkeit, um sicherzustellen, dass das Produkt über das richtige Verhalten verfügt, und die Gurke als Werkzeug ist eine sehr leistungsstarke Möglichkeit, dies zu erreichen, damit jeder Beteiligte des Produkts lesen, verstehen und sogar schreiben kann Verhaltenstests. Dieser Artikel berührt nur die Haut dessen, was Gurke kann. Deshalb ermutige ich Sie, es selbst auszuprobieren, um seine Kraft zu verstehen. Gurke hat auch eine sehr aktive Community, und ihre Mailingliste und der Gitter -Kanal sind großartige Möglichkeiten, um Hilfe zu erhalten, wenn Sie sie benötigen. Verwenden Sie bereits Gurke? Ermutigt dieser Artikel Sie, es zu versuchen? In jedem Fall möchte ich Sie in den Kommentaren unten hören. Dieser Artikel wurde von Jani Hartikainen von Experten überprüft. Vielen Dank an alle SitePoint -Peer -Rezensenten, die SidePoint -Inhalte für den Besten erhalten haben!

FAQs über BDD in JavaScript mit Gurke und Gherkin

Das obige ist der detaillierte Inhalt vonBDD in JavaScript: Erste Schritte mit Gurke und Gherkin. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!