JavaScriptのBDD：キュウリとガーキンを始めましょう

テスト駆動型開発（TDD）の利点はよく知られており、製品の品質と開発効率を向上させています。コードテストを書くたびに、コードの正確性を確保し、将来のコードエラーの可能性を迅速に検出できます。

行動主導型開発（BDD）は、これについてさらに一歩進んでおり、製品が期待に沿って動作するようにコードするだけでなく、製品の動作をテストします。この記事では、キュウリフレームワークを使用してBDDスタイルの自動化された受け入れテストを作成する方法について説明します。キュウリの利点は、テストケースを簡潔な自然言語で記述して、プロジェクトの非技術者による理解を容易に理解できることです。この記事を読んだ後、キュウリがあなたのチームに適しているかどうかを知ることができ、あなた自身の受け入れテストを書き始めることができます。準備ができて？始めましょう！

キーポイント

BDD TDDに基づいて、コードではなく製品の動作についてテストされているため、非技術者を含む幅広い利害関係者が理解しやすくなります。

• キュウリは、テストケースを定義するために理解しやすい言語であるGherkinを使用するBDDフレームワークであり、すべての利害関係者がテストプロセスを理解して参加できるようにします。
• gherkin構文構造は、シナリオと機能をテストし、単純な指定を使用して、技術的な実装を指定せずに動作を説明する手順を使用します。
• cucumber.jsは、JavaScriptプロジェクトと統合され、Gherkin定義のテストを実行し、さまざまなプラグインと構成を通じて非同期操作と外部テストツールをサポートします。
• cucumber.js設定には、NPM経由でモジュールのインストール、機能ファイルとステップ定義を見つけて設定すること、およびオプションでは、GruntやGulpなどのビルドスクリプトまたはタスクランナーに統合することが含まれます。
• この記事は、これらの操作の正確性を検証するために簡単なアサーションを使用して、追加と乗算のためのGherkinシナリオのセットアップを示す基本的なキュウリテストの例を提供します。
この記事では、非同期テストのサポート、パラメーター化されたテストのシナリオの概要、テスト機能を強化するための事前条件と事後条件を設定するためのフックなど、Cucumber.jsの高度な機能についても概説しています。
• BDDとTDDの違い

それは主にテストの構造と書き込み方法に反映されています。 TDDでは、コードを書く開発者によってテスト、維持、および理解されます。他の人はテストをまったく読む必要がないかもしれませんが、それはまったく大丈夫です。しかし、BDDでは、機能を書く開発者よりもはるかに多くの人々がテストする必要があります。多くの利害関係者は、QA担当者、製品アナリスト、販売担当者、さらには上級管理職など、製品が正しく動作するかどうかを気にしています。これは、理想的には、製品を理解している人なら誰でも理解できる方法でBDDテストを書く必要があることを意味します。違いは次のとおりです

および：

<code class="language-javascript">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();
});</code>

これらの2つのテストは同じことをしますが、1つは読みやすい自然言語であり、もう1つはJavaScriptとSeleniumを知っている人によってのみ理解されます。この記事では、Cucumber.jsフレームワークを使用してJavaScriptプロジェクトでBDDテストを実装する方法を示し、製品のテストのメリットを製品が恩恵を受けることができます。

キュウリ/ガーキンとは？

キュウリは、行動主導の開発のためのテストフレームワークです。 Gherkin形式のテストを定義し、これらのGherkinsをコードにバインドすることで実行可能にすることができます。 Gherkinは、キュウリのテストの作成に使用されるドメイン固有の言語（DSL）です。これにより、テストスクリプトを読みやすい形式で書き込むことができ、製品開発のすべての利害関係者の間で共有できます。 Gherkinファイルは、Gherkin言語で記述されたテストを含むファイルです。これらのファイルには通常、.featureファイル拡張子があります。これらのガーキンファイルの内容は、通常「ガーキン」と呼ばれます。

gherkin

Gherkinが定義したテストでは、 およびシナリオの概念があります。これらは、他のテストフレームワークのテストスイートやテストケースに似ており、テストを構成する明確な方法を提供します。シナリオは別のテストです。アプリケーションの1つの側面のみをテストする必要があります。機能は、関連するシナリオのセットです。したがって、アプリケーションの多くの関連する側面をテストします。理想的には、Gherkinファイルの機能は、アプリケーションの機能と密接にマッピングされます。各Gherkinファイルには機能が含まれており、各機能には1つ以上のシナリオが含まれています。シーンは、特定の順序で配置されているステップで構成されています： 与えられた - これらの手順は、テストが実行される前に初期状態を設定するために使用されます

• - これらの手順は実際に実行されるテストです
• 次に - これらの手順は、テスト結果を主張するために使用されます
理想的には、各シナリオは別のテストケースである必要があるため、Whenステップの数は非常に小さく保つ必要があります。手順は完全にオプションです。たとえば、何も設定する必要がない場合は、与えられたステップがない場合があります。 Gherkinファイルは、読みやすく、製品開発に関与する人なら誰でも利益をもたらすように設計されています。これには非技術的な人々が含まれるため、Gherkinファイルは専門言語ではなくビジネス言語で常に記述する必要があります。これは、たとえば、単一のUIコンポーネントを参照するのではなく、テストする製品の概念を説明することを意味します。

gherkinテストの例

以下はGherkinの例です。GoogleのCucumber.jsの検索：

このテストは、どうすればよいかではなく、何をすべきかを教えてくれることがすぐにわかります。これは、誰でも理解できる言語で書かれており、最終製品がどのように微調整されていても、正しいままでいる可能性が最も高いです。 GoogleはUIを完全に変更することを決定する場合がありますが、機能が同等である限り、Gherkinはまだ正確です。 Cucumber wikiで与えられたときの詳細については、詳細を読むことができます。

<code class="language-gherkin">Given I have opened a Web Browser
When I load the Wikipedia article on "Wiki"
Then I have "19" Wiki Links</code>

cucumber.js

Gherkin形式でテストケースを書いた後、それらを実行する方法が必要です。 JavaScriptの世界には、Cucumber.jsというモジュールがあり、これを行うことができます。 javaScriptコードを定義することができます。これは、cucumber.jsがGherkinファイルで定義されたさまざまな手順に接続できます。次に、Gherkinファイルをロードし、各ステップに関連付けられたJavaScriptコードを正しい順序で実行することにより、テストを実行します。たとえば、上記の例では、次の手順があります。

<code class="language-javascript">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();
});</code>

これらの意味のすべてについてあまり心配しないでください。後で詳しく説明します。しかし、本質的には、Cucumber.jsフレームワークがGherkinファイルのステップにコードをバインドするために使用できるいくつかの方法を定義します。

（次のコンテンツは基本的に元のテキストと一致しており、流encyさと読みやすさを維持するためにわずかに調整され、一部の文は同義語に取って代わります）

ビルドにcucumber.jsを含めます

ビルドにcucumber.jsを含め、ビルドにキュウリモジュールを追加して実行するように構成するだけです。最初のステップは次のとおりです

2番目のステップは、ビルドの実行方法によって異なります。

<code class="language-gherkin">Given I have opened a Web Browser
When I load the Wikipedia article on "Wiki"
Then I have "19" Wiki Links</code>

手動で実行します

キュウリを手動で実行するのは比較的簡単であり、次のソリューションはすべて自動的に行う方法はすべて方法であるため、最初に実行できることを確認するのが最善です。インストール後、実行可能ファイルは

になります。実行するときは、ファイルシステムのどこで必要なファイルをすべて見つけることができるかを知る必要があります。これらのファイルには、実行されるGherkinファイルとJavaScriptコードの両方が含まれます。慣習により、すべてのGherkinファイルは機能ディレクトリに保存され、他の操作を実行するように指示しない場合、Cucumberは同じディレクトリで実行されるJavaScriptコードも探します。ただし、これらのファイルの場所を見つけるように指示して、ビルドプロセスをさらに制御できるように指示することが賢明です。たとえば、MyFeaturesディレクトリにすべてのGherkinファイルを保存し、MyStepsのすべてのJavaScriptコードを保存すると、次のことを行うことができます。

./node_modules/.bin/cucumber.js

フラグは、Cucumberがテスト用に自動的にロードするJavaScriptファイルを含むディレクトリです。興味深いかもしれない他の兆候もいくつかあります。彼らがどのように機能するかを理解するためにヘルプテキストを読んでください：

<code class="language-gherkin">Given I have loaded Google
When I search for "cucumber.js"
Then the first result is "GitHub - cucumber/cucumber-js: Cucumber for JavaScript"</code>

。これらのディレクトリは再帰的にスキャンするため、状況に応じてファイルを浅いまたは深くネストできます。

-r$ ./node_modules/.bin/cucumber.js --helpnpmスクリプト

キュウリを手動で実行した後、NPMスクリプトとしてビルドに追加すると、単純なケースです。次のコマンド（NPMがそれらを処理するため、完全に適格なパスはありません）を次のように追加するだけです。 終了したら、実行できます：

package.json以前とまったく同じキュウリのテストを実行します。

<code class="language-javascript">Given('I have loaded Google', function() {});
When('I search for {stringInDoubleQuotes}', function() {});
Then('the first result is {stringInDoubleQuotes}', function() {});</code>

grunt

<code class="language-bash">$ npm install --save-dev cucumber</code>

cucumber.jsテストを実行するためのgruntプラグインが存在します。残念ながら、それは時代遅れであり、Cucumber.jsの新しいバージョンでは機能しません。つまり、使用すると多くの改善が見逃してしまいます。代わりに、私が好む方法は、単にグラントシェルプラグインを使用して上記とまったく同じ方法でコマンドを実行することです。インストール後、構成するだけで、次のプラグイン構成をgruntfile.jsに追加するだけです：

<code class="language-javascript">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();
});</code>

さて、以前と同様に、grunt shell:cucumberを実行してテストを実行できます。

gulp

gulpは、既存のプラグインが時代遅れであり、古いバージョンのキュウリツールを使用するため、Gruntとまったく同じです。繰り返しますが、ここでは、Gulp-Shellモジュールを使用して、他のシナリオと同様にCucumber.jsコマンドを実行できます。セットアップはシンプルです：

<code class="language-gherkin">Given I have opened a Web Browser
When I load the Wikipedia article on "Wiki"
Then I have "19" Wiki Links</code>

さて、以前と同様に、gulp cucumberを実行してテストを実行できます。

あなたの最初のキュウリテスト

この記事のすべてのコード例は、GitHubで見つけることができることに注意してください。

キュウリの実行方法がわかったので、実際にテストを書きましょう。この例では、システムがどのように機能するかを示すために、非常に人工的なことを行います。実際、テストしているコードを直接呼び出す、HTTP API通話を実行しているサービスへのHTTP API呼び出し、セレンの制御してWebブラウザーを駆動してアプリケーションをテストするなど、より複雑なことを行います。私たちの簡単な例は、数学がまだ有効であることを証明します。追加と乗算の2つの特性があります。まず、セットアップしましょう。

<code class="language-gherkin">Given I have loaded Google
When I search for "cucumber.js"
Then the first result is "GitHub - cucumber/cucumber-js: Cucumber for JavaScript"</code>

テストの実行方法は完全にあなた次第です。この例では、簡単にするために手動でそれを行います。実際のプロジェクトでは、上記のオプションのいずれかを使用してビルドに統合します。

<code class="language-javascript">Given('I have loaded Google', function() {});
When('I search for {stringInDoubleQuotes}', function() {});
Then('the first result is {stringInDoubleQuotes}', function() {});</code>

さあ、最初の実際の機能を書きましょう。これはfeatures/addition.feature：

に配置されます

<code class="language-bash">$ npm install --save-dev cucumber</code>

非常にシンプルで読みやすいです。それは私たちがやっていることを正確に教えてくれます。試してみましょう：

（次のコンテンツは基本的に元のテキストと一致しており、流encyさと読みやすさを維持するためにわずかに調整され、一部の文は同義語に取って代わります）

最初のステップファイルを書きましょう。これにより、キュウリの出力が私たちに示すように手順を実装しますが、これは何も役に立たないが、出力を整理する。これはsteps/maths.js：

に配置されます

<code class="language-javascript">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();
});</code>

defineSupportCodeフックは、さまざまな状況に使用されるコードを提供できるCucumber.jsの方法です。これらはすべてカバーされますが、基本的に、キュウリが直接呼び出すコードを書きたいときはいつでも、これらのブロックの1つにある必要があります。ここでのサンプルコードは、いつ、いつ、いつ、いつ、1つはいつ、1つは、3つの異なるステップを定義していることがわかります。各ブロックには、属性ファイルのステップと一致する文字列（または必要な場合は正規式）と、そのステップが一致するときに実行される関数が与えられます。プレースホルダーは、ステップストリングに配置できます（または、正規式を使用している場合は代わりにキャプチャ式を使用します）。これらのプレースホルダーは抽出され、関数の引数として提供されます。これを行うと、実際には何もしないで、よりクリーンな出力が得られます。

（次のコンテンツは基本的に元のテキストと一致しており、流encyさと読みやすさを維持するためにわずかに調整され、一部の文は同義語に取って代わります）

今すぐ機能してみましょう。ステップ定義にコードを実装するだけです。また、読書を簡単にするためにいくつかのソートを行います。これにより、実際には、非同期操作を行っていないため、コールバックパラメーターの必要性が排除されます。その後、私たちの

は次のようになります：steps/maths.js

<code class="language-gherkin">Given I have opened a Web Browser
When I load the Wikipedia article on "Wiki"
Then I have "19" Wiki Links</code>

実行するようになります：

（次のコンテンツは基本的に元のテキストと一致しており、流encyさと読みやすさを維持するためにわずかに調整され、一部の文は同義語に取って代わります）

それだけです。数学が正しいことを証明するテストスイートを非常に簡単に拡張できました。演習として、減算をサポートするために拡張してみませんか？問題がある場合は、コメントで助けを求めることができます。

（以下のコンテンツは基本的に元のテキストと一致しており、流encyさと読みやすさを維持するためにわずかに調整され、一部の文は同義語に取って代わり、一部の章はマージされて簡素化されます） より高度なcucumber.jsのヒント

それはすべて良いですが、キュウリは私たちの生活を楽にするためにより高度なことをすることができます。

asyncステップ定義

これまでのところ、同期ステップ定義のみを書きました。ただし、JavaScriptの世界では、これは通常十分ではありません。 JavaScriptの多くのことは非同期である必要があるため、それを処理する方法が必要です。ありがたいことに、Cucumber.jsには、好みに応じて、これに対処するためのいくつかの組み込みの方法があります。上記の方法は、非同期の手順を処理するより伝統的なJavaScriptメソッドであり、コールバック関数を使用しています。ステップ定義にコールバック関数が最後のパラメーターとして機能する必要があることを指定すると、このコールバックがトリガーされた後にのみステップが完了すると見なされます。この場合、コールバックが引数でトリガーされた場合、これはエラーと見なされ、ステップは失敗します。パラメーターなしでトリガーされている場合、ステップは成功したと見なされます。ただし、コールバックがまったくトリガーされていない場合、フレームワークは最終的にタイムアウトし、ステップに失敗します。物語の意味？コールバックパラメーターを受け入れる場合は、必ず電話してください。たとえば、コールバックを使用したHTTP API呼び出しのステップ定義は次のとおりです。これは、応答にコールバックを使用するため、リクエストを使用して記述されます。

（次のコンテンツは基本的に元のテキストと一致しており、流encyさと読みやすさを維持するためにわずかに調整され、一部の文は同義語に取って代わります）

別の、より好ましい方法は、タイプを返すことです。ステップから約束を返す場合、ステップは約束が完了したときにのみ完了したと見なされます。約束が拒否された場合、ステップが失敗します。あるいは、返品したコンテンツが約束ではない場合、ステップはすぐに成功したと見なされます。これには、未定義またはnullの返却が含まれます。これは、ステップ実行中に約束を返す必要があるかどうかを選択できることを意味し、必要に応じてフレームワークが調整されます。たとえば、約束を使用してHTTP API呼び出しを作成するためのステップ定義は次のとおりです。これは、回答の約束を返すため、Fetch APIを使用して記述されます。

（以下のコンテンツは基本的に元のテキストと一致しており、流encyさと読みやすさを維持するためにわずかに調整され、一部の文は同義語に取って代わり、一部の章はマージされて簡素化されます）

機能の背景、シーンアウトライン、データテーブル、フック、イベント、世界

機能の背景、シーンのアウトライン、データテーブル、フック関数（前、後、beforestep、afterstep、afterstepなど）やイベント処理メカニズムなど、これらの高度な機能は、テスト効率と読みやすさを大幅に向上させることができます。これらの機能を合理的に使用することにより、BDDテストをより簡潔かつ容易に書くことができます。

オブジェクトは、異なるステップ定義間でデータと状態を共有することを可能にし、テストロジックを簡素化します。

World

（次のコンテンツは基本的に元のテキストと一致しており、流encyさと読みやすさを維持するためにわずかに調整され、一部の文は同義語に取って代わります）

概要

行動駆動型開発は、製品が適切な動作を持っていることを保証する優れた方法であり、キュウリはツールとしてこれを達成するための非常に強力な方法であり、製品のすべての利害関係者が読み、理解し、さらには書くことさえできるようにするための非常に強力な方法です行動テスト。この記事では、キュウリができることの肌に触れているので、その力を理解するために自分で試してみることをお勧めします。 Cucumberには非常に活発なコミュニティがあり、メーリングリストとGitterチャンネルは、必要に応じてサポートを得るための素晴らしい方法です。すでにキュウリを使用していますか？この記事はあなたがそれを試すことを奨励していますか？いずれにせよ、私は以下のコメントであなたを聞きたいです。 この記事は、Jani Hartikainenによって査読されました。 SitePointコンテンツを最高の状態にしてくれたすべてのSitePointピアレビューアに感謝します！

（次のコンテンツは基本的に元のテキストと一致しており、流encyさと読みやすさを維持するためにわずかに調整され、一部の文は同義語に取って代わります）

キュウリとガーキンを使用したJavaScriptのBDDに関する

FAQ

（次のコンテンツは基本的に元のテキストと一致しており、流encyさと読みやすさを維持するためにわずかに調整され、一部の文は同義語に取って代わります）

以上がJavaScriptのBDD：キュウリとガーキンを始めましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。