Chimp と Cucumber.js で始める受け入れテスト
はじめに
J-hack開発部の大城です。1/23にギークオフィス恵比寿で開催されましたJavaScriptフレームワークMeteor勉強会（終了後に有志で懇親会） - connpassの一般発表枠で、Chimp というテスティングフレームワークで Meteor の受け入れテストをする方法について、発表いたしました。
この記事では Chimp と Cucumber.js を用いた受け入れテストのチュートリアルを紹介します。
アジェンダ
- Chimp について
- Cucumber.js について
- Chimp + Cucumber.js のチュートリアル
- Meteor と Chimp を一緒に使用する
Chimp について
An awesome developer-centric experience to writing tests with realtime feedback using Mocha or Cucumber.js (Jasmine soon).
- End-to-End テスト(システムテスト)や受け入れテストを行う Node.js 製のテスティングフレームワーク
- リアルタイムフィードバック
- Mocha と Cucumber.js に対応 (Jasmine も対応予定)
- Meteor をサポート
- WebdriverIO を同梱、ブラウザ操作が簡単に
- Meteor のテストツール Velocity を作った Xolvio.io が開発
Cucumber.js について
- Node.js 上で動く BDD(Behaviour-Driven Development:振る舞い駆動開発)ツール
- Feature ファイルと Step ファイルの２種類を用意
- Feature ファイルは受け入れテストの要件を記述する
- Gherkin という文法を使い英語の用に書く
- Step ファイルは Feature ファイルの記述と、実際に実行するプログラムを記述する
Chimp + Cucumber.js のチュートリアル
参考: https://chimp.readme.io/docs/tutorial
Chimp のセットアップ
まずチュートリアル用のディレクトリを作成します。
mkdir chimp-tutorial cd chimp-tutorial
npm で Chimp をインストールします。
npm install -g chimp
テスト用のディレクトリを作成します。
なお Chimp はデフォルトでは features という名前のディレクトリをテスト用のディレクトリとみなします。
mkdir features
Chimp を起動します。
chimp --watch
すると、Google Chrome が自動的に起動します。
また、Chimp を起動したターミナルで以下のように表示されます。
[chimp] Watching features with tagged with @dev,@watch,@focus [chimp] Running... 0 scenarios 0 steps
これで Chimp の準備ができました。
Feature ファイルの作成
続いて、Chimp に同梱の Cucumber.js を使って受け入れテストを作成していきます。
features/search.feature という名前のファイルを作成し、以下の記述を追加します。
Feature: Search the Web
As a human
I want to search the web
So I can find information
Scenario: Search for J-hack
Given I have visited Google
When I search for "株式会社J-hack"
Then I see "株式会社J-hack"
Cucumber では Feature は機能を表し、Scenario が受け入れテストの単位になります。 また Given / When / Then が書かれた行を Step と呼びます。
search.feature を作成し保存すると、自動的に chimp が再実行されます。
[chimp] Running... 0 scenarios 0 steps
よくみると新しいテストを追加したのに 0 scenarios / 0 steps のままですね。
これは Scenario が Chimp の watch 対象になっていないのが原因です。
特定の Scenario を Chimp の watch 対象にするには、Scenario のすぐ上の行に @watch を追加します。
So I can find information + + @watch Scenario: Search for J-hack
変更して保存したら、ターミナルを見てみましょう。
[chimp] Running...
Feature: Search the Web
As a human
I want to search the web
So I can find information
@watch
Scenario: Search for J-hack # features/search.feature:8
Given I have visited Google # features/search.feature:9
When I search for "株式会社J-hack" # features/search.feature:10
Then I see "株式会社J-hack" # features/search.feature:11
1 scenario (1 undefined)
3 steps (3 undefined)
You can implement step definitions for undefined steps with these snippets:
this.Given(/^I have visited Google$/, function () {
// Write the automation code here
pending();
});
this.When(/^I search for "([^"]*)"$/, function (arg1) {
// Write the automation code here
pending();
});
this.Then(/^I see "([^"]*)"$/, function (arg1) {
// Write the automation code here
pending();
});
@watch をつけた Scenario が Chimp の Cucumber.js 上で実行され、表示が変わりました。
Step が未定義ですと警告がでていますので、今度は各 Step ファイルを作成していきます。
Step ファイルの作成
続いて Cucumber.js の Step ファイルを記述していきます。
features/support/step_defs.js というファイルを作成し、以下のように記述します。
// features/support/step_defs.js
module.exports = function() {
this.Given(/^I have visited Google$/, function () {
// Write the automation code here
pending();
});
this.When(/^I search for "([^"]*)"$/, function (arg1) {
// Write the automation code here
pending();
});
this.Then(/^I see "([^"]*)"$/, function (arg1) {
// Write the automation code here
pending();
});
}
step_defs.js を追加すると、Chimp が再実行されます。
[chimp] Running... Feature: Search the Web ... 1 scenario (1 pending) 3 steps (1 pending, 2 skipped) load: 3.89 cmd: Google Chrome He 31486 waiting 0.14u 0.13s
Scenario の状態が undefined から pending に変わりましたね。
pending (保留中) の各 Step を書き換えていきます。
まず this.Given から。
features/support/step_defs.js
this.Given(/^I have visited Google$/, function () {
- // Write the automation code here
- pending();
+ browser.url('http://google.co.jp');
});
Chimp は WebdriverIO を同梱しており、browser オブジェクトを介してブラウザ操作ができます。
browser.url() を実行するとブラウザで特定のページにアクセスします。
ファイル変更後、ファイルを保存すると Chimp が起動したブラウザの画面で Google のトップページが自動的に表示されます。
[chimp] Running... Feature: Search the Web ... 1 scenario (1 pending) 3 steps (1 pending, 1 skipped, 1 passed)
ターミナルを見ると Step の一つが passed に変わりました。
続いて this.When を書き換えます。
features/support/step_defs.js
- this.When(/^I search for "([^"]*)"$/, function (arg1) { + this.When(/^I search for "([^"]*)"$/, function (searchTerm) { - // Write the automation code here - pending(); + browser.setValue('input[name="q"]', searchTerm); + browser.keys(['Enter']); });
変更を保存すると自動的に Chimp が再実行されます。
[chimp] Running... Feature: Search the Web ... 1 scenario (1 pending) 3 steps (1 pending, 2 passed)
Step が 2 passed に変わりました。
最後に this.Then を書き換えます。
features/support/step_defs.js
- this.Then(/^I see "([^"]*)"$/, function (arg1) { + this.Then(/^I see "([^"]*)"$/, function (link) { - // Write the automation code here - pending(); + browser.waitForExist('a=' + link); });
書き換えて保存すると Chimp が再実行されます。
[chimp] Running... Feature: Search the Web ... 1 scenario (1 passed) 3 steps (3 passed)
3つの Step が passed に変わり、無事 Scenario が passed に変わりましたね。
これで受け入れテストの1つの Scenario ができました！
Meteor と Chimp を一緒に使用する
Chimp は Meteor をサポートしているため、Meteor の受け入れテストをするのは簡単です。
Chimp 起動時に --ddp オプションを使って Meteor アプリの URL を指定するだけです。
chimp --watch --ddp=http://localhost:3000
Meteor のテストに関しては Chimp を開発している Xolvio.io が公開している https://github.com/xolvio/automated-testing-best-practices がとても参考になります。
おわりに
この記事では Xolvio.io が開発しているテスティングフレームワーク Chimp のチュートリアルを紹介しました。
これで Meteor の受け入れテストも簡単にできそうですね。
Chimp は受け入れテストツールとして興味深いので今後も動向を追っていきたいと思います。
それではよい Meteor ライフを!
