vaguely

和歌山に戻りました。ふらふらと色々なものに手を出す毎日。

【Ruby Gem】JasmineでJSテスト 準備編

JavaScript Jasmine SoftwareTesting Sinatra

Javascriptのテストをしたい、と思い立って調べたところ、Backboneの本で紹介されていたJasmineが良さそうだったため、試してみることにしました。

やりたいこと

  • 前回まで作成していたTabを非同期で切り替えるSinatraプロジェクトで、Jasmineを使ってテストを実行する

準備

まずはJasmineのインストールです。

公式ページからダウンロードできたり、スタンドアローン版やNode.js版があるようですが、せっかくSinatraを使っているのでRuby Gem版を使用しました。

インストール

  1. Gemfileに「gem 'jasmine'」を追加して、「bundle update」します。
  2. プロジェクト内にGemをインストールしているので「bundle exec jasmine init」を（そうでない場合は「jasmine init」を）実行します。

正しくインストールされると、プロジェクト直下にspecというフォルダが作成されます。
テストではこのフォルダを使用することになります。

設定ファイル

テスト対象のパスや、テストを記述するSpecファイルなどのパスは、spec＞support＞jasmine.ymlを使用します。

テスト対象のJavascriptのパスを指定する

jasmine.yml内の、src_files:の部分に書けば良さそうです。

依存ファイルの読み込み

テスト対象のファイルでは、jQueryやBackboneに依存しており、単純に以下のように記述すると、backboneで「TypeError i is undefined」と怒られてしまいます。

jasmine.yml

〜省略〜
src_files:
  - public/js/*.js
〜省略〜

依存ファイルが順番通り読み込まれるよう指定する必要があります。

jasmine.yml

〜省略〜
src_files:
  - public/js/jquery-2.1.3.min.js
  - public/js/underscore-min.js
  - public/js/backbone-min.js
  - public/js/*.js
〜省略〜

Specファイルのパス指定

テストを記述するファイルのパスは、jasmine.yml内の、spec_files:の部分に記述します。

注意点として、「src_files」の相対パスはプロジェクト直下から始まっているのに対し、何故か「spec_files」と「helpers」はspec＞javascriptsから始まっているようで、他と同じように書くとSpecファイルが見つからない旨のメッセージが表示されます。

※2015/02/14修正
「spec_files」の下に「src_dir」という項目があり、デフォルトのパスがspec＞javascriptsになっているようです(jasmine.ymlのコメントより)。
ファイルを別の場所に置きたい場合は、「src_dir」で指定すれば良さそうです。

テストの実行

「bundle exec rake jasmine」をターミナルで実行すると、WEBrickが起動してブラウザで動作できるようになります。
また、「bundle exec rake jasmine:ci」とすれば、初回はファイルが自動でインストールされ、その後テストが自動で実行されます。

Specファイル

テストを実行するSpecファイルもjavascriptで記述します。

ファイル名は、RailsにおけるRSpecほど厳格ではないようですが、テスト対象のファイル名やfunction名+spec.jsとするのが良いかと。

内容としては、以下のように記述して、it()の部分に実行したいテストコードを書く、ということになります。

describe('Specの説明文', function() {
  it('実行するテストコードの説明文', function() {
    // 実行するテストコード
  });
});

というわけで次回は実際にテストを作成＋実行してみます。

参考