PhpStormでPhantomJS + QUnitを使ったテスト(Windows) : JavaScript

Tweet

Pocket

PhantomJS + QUnitを使いPhpStormでJavaScriptのテストをするメモ。

環境はWindowsの場合を書いているがMacも同じように実行できる。

ファイル構成

この記事は下記のようなファイル構成を例にして書いている。

C:
|
|-- phantomjs-1.7.0-windows
|   |-- phantomjs.exe
|
|-- example
    |-- validation
        |-- validation.js ← テスト対象
    |-- test
        |-- qunit.js
        |-- qunit.css
        |-- run-qunit.js
        |-- test ← テストコード
        |-- validation-test.html  ← テストハーネス

PhantomJSのインストール

下記はPhantomJSは1.7.0を前提にする。

PhantomJSからzipファイル(phantomjs-1.7.0-windows.zip)をダウンロードして任意の場所に展開する。
本記事の例ではCの直下に配置した。
» PhantomJS

C:\phantomjs-1.7.0-windows

PhantomJSインストールディレクトリを環境変数Pathに追加すればどこからでもphantomjsコマンドが使える¹。

インストールの確認

正常にPhantomJSがインストールされたかを確認する。バージョンが表示されれば良い。

$ phantomjs.exe --version
1.7.0

PhantomJSの基本サンプル

PhantomJSの基本サンプルは下記にある。
» Quick Start · ariya/phantomjs Wiki

QUnitをPhantomJSで使う

PhantomJSでQUnitのテストを行うには下記リンクからrun-qunit.jsをダウンロードし実行時に指定する。
» run-qunit.js

本記事のファイル構成のときは下記のように実行する。

$ phantomjs.exe run-qunit.js ../example-test.html

PhpStormの設定

テストの登録

外部ツールにテストを追加する。

Settings(Ctrl + Alt + S) > IDE Settings > External Toolsに追加する²。

Program C:\phantomjs-1.7.0-windows\phonetomjs.exe

Parameters $FileDir$\run-qunit.js $FileName$

Working Directory $FileDir$

テストの実行

Toolsから登録したテストを実行する。

» Gist