読者です 読者をやめる 読者になる 読者になる

わくわくじぇいはっく!

株式会社J-hack公式ブログです。主にMeteor関連の技術情報やイベントについて発信していきます。

Chimp と Cucumber.js で始める受け入れテスト

はじめに

J-hack開発部の大城です。1/23にギークオフィス恵比寿で開催されましたJavaScriptフレームワークMeteor勉強会(終了後に有志で懇親会) - connpassの一般発表枠で、Chimp というテスティングフレームワークで Meteor の受け入れテストをする方法について、発表いたしました。

この記事では Chimp と Cucumber.js を用いた受け入れテストのチュートリアルを紹介します。

アジェンダ

  • Chimp について
  • Cucumber.js について
  • Chimp + Cucumber.js のチュートリアル
  • Meteor と Chimp を一緒に使用する

Chimp について

f:id:n-oshiro:20160126115740p:plain

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 ファイルの2種類を用意
  • 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 が自動的に起動します。

f:id:n-oshiro:20160126115838p:plain

また、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 のトップページが自動的に表示されます。

f:id:n-oshiro:20160126115904p:plain

[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 ライフを!

参考

広告を非表示にする