testem ってなに

testem

• testem via GitHub : airportyh/testem

Unit testing in Javascript can be tedious and painful, but Testem makes it so easy that you will actually want to write tests.

要するに、面倒なJSのユニットテストをより快適にしてみんなでハッピーにテスト書こうよ！というツールです。 testem自体はnode.jsベースで動作し、Jasmine/QUnit/Mochaに対応しています。（デフォルトはJasmine）

test’em は“Test them”の省略形でしょう。 どんなテストもまとめて引き受けますよ！という事だと思います。

具体的になにしてくれるの

例えばJasmineで「基礎的で面倒なテストの開始の仕方」をした場合、

1. Jasmineのコードをとってきて設置し、
2. SpecRunner.html を編集し、
3. ブラウザでそのHTMLを開き、
4. テストを書いてブラウザをリフレッシュする

と、こんな感じの作業をプロジェクトの度に繰り返す事になります。

これが、testemでは

1. 設定ファイルを書く
2. testem コマンドを叩く

だけでテストが始まります。

インストール

もしnode.jsが既にインストールされている環境ならば、npmコマンドだけで簡単に導入できます。 （node.jsがまだ入っていないのであれば、まずそちらを先にインストールしましょう）

$ npm install -g testem

正常にインストールできませんでしたか？ 環境によってはsudoが必要になるかもしれません。

$ sudo npm install -g testem

これでtestemコマンドが使えるようになったはずです。 ヘルプでも覗いてみましょう。

$ testem -h

テストをしてみよう

早速テストをしてみようと思います。仮に、次のようなディレクトリ構造にしてみましょう。 scripts/.js がテスト対象のライブラリ、tests/.js がテストです。 testem.json が設定ファイルになります。

./
├ scripts/
│   └ foobar.js
├ tests/
│   └ test-foobar.js
└ testem.json （設定ファイル）

設定ファイルを書く

設定ファイルはJSONで記述します。必要最低限の設定は、こんな感じになります。

{
    "framework" : "jasmine",
    "src_files" : [
        "scripts/foobar.js",
        "tests/test-foobar.js"
    ]
}

• 
  

  framework
  
  使いたいテストフレームワークを書きます。デフォルトはJasmineなので、Jasmineを使う場合は省略できます。

  
  
• 
  

  src_files
  
  読み込むソースファイルを配列で記述しておきます。

  
  

テストを開始する

testemコマンドを叩けばテストは開始されます。

$ testem

実行すると次のような画面が表示されます。

表示されたURL（http://localhost:7357）を、テストしたいブラウザで開きます。すると…

ブラウザにはJasmineのテスト結果が。

ターミナルにもテスト結果が表示されます。

ファイル更新を検知してくれる

ソースファイルあるいはtestem.jsonを編集すると、更新を検知してブラウザとターミナルを自動的にリフレッシュしてくれます。 わざわざブラウザをアクティブにして更新する必要はありません。後はひたすらテストを書いていくのみです。

実行時に自動的にブラウザを開く

わざわざURLをコピーしてブラウザのアドレスバーに貼り付けるのが面倒！ そんな人の為に、“launch_in_dev”という設定項目があります。 設定ファイルにこれを追記する事で、testemコマンド実行時に自動的に、指定したブラウザでURLを開いてくれます。

{
    "launch_in_dev" : [
        "Chrome"
    ],
    ...
}

使えるブラウザのリストは、次のコマンドで知ることができます。

$ testem launchers

Windows環境ならIE7,IE8,IE9等も表示されますね。 公式のREADMEによれば、IE9のモード切り替えでのテストだそうです。

ただし、この設定はテスト開始時に新しいウィンドウを開いてしまいます。 その開き方が好きでない方は、大人しくブックマークに登録しておきましょう。 （私はそうしました）

Nettuts+ のチュートリアル

基本的な部分は上で紹介していますが、CofeeScriptのコンパイルを挟んだりなど、 もう少し突っ込んだ使い方はNettuts+のチュートリアル動画でわかりやすく解説されていました。 英語ですが、作業画面見ているだけでも参考になると思います。

Make JavaScript Testing Fun With Testem – YouTube

cf) Make JavaScript Testing Fun With Testem | Nettuts+

まとめ

面倒な部分を全部任せられるので、快適にテストをはじめられますね。 テストフレームワークだけでも有難いのに、至れり尽くせりで幸せです。

※2010/08/07 セッションエンコーディングの項で、キー文字列を入力した例を追記

CodeIgniter from Scratch: Security | Nettuts+

こちらがそのチュートリアルビデオなのですが…
35分と大変長いので、要点だけ下にまとめておきます。
ビデオではスクラッチから書いていて大変わかりやすいので、
時間がある時に見ておくと良いと思います！
英語ですが、コードだけ見ていても参考になります。

1. パラメータに使用される文字を制限する
2. パスワードエンコーディング
3. SQLインジェクション対策
4. クロスサイトスクリプティング対策
5. セッションエンコーディング
6. PHPのエラー表示を消す
7. プライベートメソッドを使う

1. パラメータに使用される文字を制限する

CodeIgniterはURLの一部をメソッドの引数として受け取りますが、
そこで使用可能な文字をconfig.phpで厳しく管理しています。

$config['permitted_uri_chars'] = 'a-z 0-9~%.:_-';

正規表現の書式で指定されているここの値を、より厳格にする事で
クライアント側からの予期せぬインプットを防ぐ事が出来ます。
制作するアプリケーションによって中身を精査すると良いでしょう。

2. パスワードエンコーディング

sha1やmd5等のPHPに既存の関数ではなく、
よりセキュアにエンコーディング出来るencryptライブラリの使用が推奨されています。

$this->load->library("encrypt");
$this->encrypt->encode($mypassword);

encryptライブラリは、キーとなる文字列を第二引数に指定する事で、
可逆エンコードする事も出来ます。

$key = "this is private key string";

$encoded_password = $this->encrypt->encode($mypassword, $key); // エンコード
$decoded_password = $this->encrypt->decode($encoded_password, $key); //デコード

cf) 暗号化クラス : CodeIgniter ユーザガイド 日本語版

3. SQLインジェクション対策

SQLインジェクション攻撃に備えて、
クライアント側からインプットされた値をDBに渡す前に消毒してやります。

$this->load->database();
$query = $this->db->query("SELECT * FROM users WHERE name = {$this->db->escape($name)}");

また、ActiveRecordクラスを使用する事で
最小限のスクリプティングでDBへアクセスする事が出来ます。
この場合、入力された値のエスケープは自動で行わるので、意識する必要がありません。

$this->load->database();
$query = $this->db->select("*")->from("users")->where("name",$name);

cf) Active Record クラス : CodeIgniter ユーザガイド 日本語版

4. クロスサイトスクリプティング対策

いわゆるXSSという奴です。
この攻撃に備えて、値のインプットとアウトプット両方において
フィルタをかけてやる必要があります。

■インプット

インプットは、$_POSTを使わずに入力クラスを用いて値を受け取りましょう。

$this->input->post("comment", true);

第二引数にtrueを渡す事で、XSSフィルタを入力された値に適用できます。
また、config.phpでの設定で、XSSフィルタリングをデフォルトでかける事が出来ます。

// /system/application/config/config.php
$config['global_xss_filtering'] = TRUE;

これで第二引数がなくともXSSフィルタがかかるようになりました。

単独でフィルタが使いたい場合は、xss_cleanメソッドを使いましょう。

$clean_string = $this->input->xss_clean($string);

■アウトプット

アウトプット時は、PHP組み込みのhtmlspecialcharsを用いるか、

htmlspecialchars($string);

または、CodeIgniterのヘルパ関数による出力をする事で
自動的にフィルタリングがかけられます。

$this->load->helper("url");
echo anchor($url);

5. セッションエンコーディング

CodeIgniterのセッションはPHP組み込みのセッションを使用せず、
独自のセッションデータを生成して利用します。

$this->load->library("session");
$this->session->set_userdata("user_id", 2); //セッションデータの入力
$this->session->userdata("user_id"); //セッションデータの取得

上のように、ログイン状態を保持する場合等に頻繁に使われますが、
cookieを覗いて見ると、user_idの値が丸見えになっていて大変危険です。
これを保護する為に、セッションエンコード用のキー文字列を
config.phpで設定してやりましょう。

// /system/application/config/config.php :
$config['encryption_key'] = "";

デフォルトでは空白なので、なんらかの文字列を入れてあげましょう。

$config['encryption_key'] = "QEE3Ka2A9ABYhY4dU2VIQau8";

» セッションクラス : CodeIgniter ユーザガイド 日本語版

6. PHPのエラー表示を消す

デフォルトがE_ALLになっているので0を入れてあげましょう。

// /index.php :
error_reporting(0);

7. プライベートメソッドを使う

コントローラ内のメソッドは基本的に全てアクセス可能ですが、
プライベートな物としてコントローラの中でのみ使いたい、
そんな時はメソッドの頭にアンダースコアをつけてあげると、
外部からのアクセスが出来なくなり、ブラウザでアクセスしても404となります。

class Hoge extends Controller {
    /* 中略 */
    function public_method (){ // アクセス可能
    }
    function _secret_method (){ // アクセス不可（404）
    }
}

アクセスされる事が好ましくないメソッドは、
プライベートメソッドとして宣言しておきましょう。

以上です。
日々注意しつつ、安全なアプリケーション制作をこころがけましょう！
（と、主に自分に言い聞かせる）