March 22, 2014

WindowsでJavascriptをテストするKarma/Jasmineを導入しようとして…

テスト駆動開発をJavascriptでやるには色々ツールがあるみたいなのだけども、パソコン初心者がインストールしようとすると、色々と失敗しでかした、のでメモ。覚書き。

そもそもKarma/Jasmineで何が嬉しいのか

  • 何もない場合:ゴリゴリコードを書いて、走らせてエラーがでたらデバッグ。
  • Jasmineがある場合:テストを先に書いてから、テストしながらコードを書くことが出来る。
  • Karmaがある場合:ソースを入れたフォルダを監視してくれて、自動でJasmineを実行した結果を返してくれる。テスト自体を実行する手間が減る。見た目がコマンドプロンプト。
  • Visual Studio Pro(以上)がある場合:Chutzpah/Jasmineを使えば開発環境と統合してテストが実行できる。 GUI。IDEの中に表示される。
  • 他にもWebstormとか、開発環境があるらしい。
まとめると、Karma/Jasmineは、テキストエディタ※で開発している人がJavascriptのテスト駆動開発に取り組むためのツールということです。

※テキストエディタといってもメモ帳というよりは、こういうソフトを使うと便利です。

Sublime Text: The text editor you'll fall in love with
http://www.sublimetext.com/

以下では、Windows環境へのKarma/Jasmineの導入方法を説明しています。

 

手順

1.Nodejsのインストール
 Nodejsをインストールする。http://nodejs.org/download/からWindows用のインストーラを選んで実行します。
2.Karmaのインストール
 Nodejsをインストールすると、Node Package Manager(npm)をインストールしてくれます。このnpmを使ってKarmaをインストールします。
コマンドプロンプトを管理者権限で立ち上げて、以下の通り実行します(Node.jsのインストール時にパスが通っているはずなので、どのフォルダで実行しても問題ないです)。
なお、以下の例では、3,4行目でInternetExplorerをテスト環境のブラウザに指定しています。
C:\>npm -g install karma
C:\>npm -g install karma-jasmine
C:\>npm -g install karma-ie-launcher
C:\>SET IE_BIN=C:\Program Files\Internet Explorer\iexplorer.exe

3.Karmaの設定
 初期設定を行う。 これも管理者権限のコマンドプロンプトで
C:\Program Files (x86)\...\karma\bin>node karma init

4.Karmaの起動
C:\Program Files (x86)\...\karma\bin>node karma start karma.conf.js

initで作成した設定を読み込んでkarmaを起動します。設定が上手くいっていれば、指定したブラウザ(ここではInternetExplorer)が自動的に起動します。そして、テスト結果がコマンドプロンプトに表示されます。指定したファイル保存フォルダのファイルが変更されるとほぼリアルタイムにテストされ、結果が更新されてコマンドプロンプトに出力されます。

ハマったところ

どうやら、karma/jasmineを使う人たちの環境は色々前提条件があるみたいで、下記の内容は常識なのかして、記載されてなくてずいぶん迷いました。この記事を読まれた方の何かのお役に立つとよいのですが。
  • Program Filesフォルダは既定のパーミッションが厳しいんで、書き込みに不自由するからか色々失敗する。 なので、コマンドプロンプト は管理者権限で立ち上げる(cmd.exeを右クリックして管理者権限で実行)。そもそもnodejsをインストールした場所の選択が間違ってるのか??
  • nodejs でkarmaを実行するときは、C:\Program Files (x86)\...\karma\bin>node karma init。windowsの環境変数pathにc:\...karma\binを追加しても任意のディレクトリでは上記が作動しない、よくわからない… (そんなプログラムありませんとエラーがでる。)。
  • karma initのWhat is the location of your source and test files?のファイル名指定の区切り文字は/(バックスラッシュ)。
  • karma initのDo you want to capture any browsers automatically?でブラウザを選ぶときは、対応するブラウザのランチャーをインストールしておく。npm -g install karma-ie-launcherとか。それと、ブラウザのプログラムへのパスを設定しておく。C:\>SET IE_BIN=C:\Program Files\Internet Explorer\iexplorer.exe。

 

でももっと楽したいなら…

Microsoft Visual Studioと Chutzpah Test Adapter for the Test Explorerを便利なようです。 ただし、無償で入手できるVisual Studio Express Editionではplug-inに対応していないので使えないです。
そんなときは、上記の方法で。

No comments :

Post a Comment