REST APIのテストをFrisbyで自動化する
どうも、中本（特に冷やし五目味噌タンメン+バター）にハマっている高橋です！
最近のアプリケーション開発といえば、フロントエンドはサーバサイドが準備したAPI経由でデータを取得したり保存したりという構成が人気のようです。そこで「API、ちゃんと動いてるんかなぁ？」というテストを書いて、実際にリクエスト＆レスポンスで検証してみようと思います。
今回テスティングフレームワークとして使用する Frisby（フリスビー） は簡単に書けて高速に動作するというのが持ち味の REST API のテスティングフレームワークです。投げて返ってくるFrisbeeと掛けているのでしょうか？これドヤ顔で言われるとちょっと腹立ちますが、こういうネーミングセンスには関心させられます。笑
◯インストール
今回は「frisbytest」というディレクトリ内で作業をしていきたいと思います。
コンソールを起動したら以下のコマンドを実行してFrisbyを扱う準備を進めます。
mkdir frisbytest
cd frisbytest
npm install frisby
npm install -g jasmine-node
jasmine-nodeもインストールしておきました。
これで「*spec.js」にマッチするファイルをテストしてくれます。
詳しくは https://github.com/mhevery/jasmine-node#usage
◯テストをする
次はテストするために「first_spec.js」というファイルにテストを書いていきたいと思います。またテストコードは「spec」というディレクトリ以下に作っていくのが慣習になので、それに倣って進めます。テスト対象は偶然見つけたアニメマップ（http://animemap.net/pages/api/）という公開APIを使ってみます。
mkdir spec
cd spec
vim first_spec.js
first_spec.js
var frisby = require('frisby');
frisby.create('GET 東京都の番組データ')
.get('http://animemap.net/api/table/tokyo.json')
.expectJSON({
response: {
item: [
{
title: 'pupa(ピューパ)'
}
]
}
})
.toss();
(コピペしても行番号はコピーされません^^/)
さっそく実行してみましょう！
jasmine-node .
yuya[/Users/yuya/work/frisbytest/spec]% jasmine-node .
F
Failures:
1) Frisby Test: GET 東京都の番組データ
[ GET http://animemap.net/api/table/tokyo.json ]
Message:
Error: Expected string 'とある飛空士への恋歌' to match string 'pupa(ピューパ)' on key 'title'
Stacktrace:
Error: Expected string 'とある飛空士への恋歌' to match string 'pupa(ピューパ)' on key 'title'
at _jsonContains (/Users/yuya/work/frisbytest/node_modules/frisby/lib/frisby.js:1209:17)
at _jsonContains (/Users/yuya/work/frisbytest/node_modules/frisby/lib/frisby.js:1188:9)
at _jsonContains (/Users/yuya/work/frisbytest/node_modules/frisby/lib/frisby.js:1188:9)
at _jsonContains (/Users/yuya/work/frisbytest/node_modules/frisby/lib/frisby.js:1188:9)
at jasmine.Matchers.toContainJson (/Users/yuya/work/frisbytest/node_modules/frisby/lib/frisby.js:1124:12)
at null.<anonymous> (/Users/yuya/work/frisbytest/node_modules/frisby/lib/frisby.js:676:24)
at null.<anonymous> (/Users/yuya/work/frisbytest/node_modules/frisby/lib/frisby.js:1033:43)
Finished in 0.276 seconds
1 test, 1 assertion, 1 failure, 0 skipped
あれ、テストがこけてしまいましたね…..と見せかけてこれで正解です！
基本的にテストは赤（失敗）で始めるのが鉄則ですのでこれでOK！大丈夫！安心して！間違いない！一切問題なし！心配ご無用なのです！！
「Error: Expected string ‘とある飛空士への恋歌’ to match string ‘pupa(ピューパ)’ on key ‘title’」というメッセージがありますの で、改めて期待値を修正します。
var frisby = require('frisby');
frisby.create('GET 東京都の番組データ')
.get('http://animemap.net/api/table/tokyo.json')
.expectJSON({
response: {
item: [
{
title: 'とある飛空士への恋歌'
}
]
}
})
.toss();
さて、これでもう一度 「jasmine-node .」 を実行してみましょう！
yuya[/Users/yuya/work/frisbytest/spec]% jasmine-node .
.
Finished in 0.886 seconds
1 test, 2 assertions, 0 failures, 0 skipped
よし！緑（成功）になりましたね！おめでとうございます！！
というようにたったのこれだけでWebAPIのテストが出来ました。
この要領で全APIのテストケースを作成すれば、サーバ側でなんかしらの修正をしても、いつでも全てのAPIの動作チェックが出来ますので、これはもうなんだか幸せになれそうな気がしてきますね！
◯学習
基本的な使い方を覚えたら、次はFrisbyを効率的に学習する方法についてです。
Frisbyをインストールした時にサンプルコード（node_modules/frisby/examples/）が付いてきますので、そのコードを眺めるのが手っ取り早いかと思います。
また、Frisbyのソースコード（node_modules/frisby/lib/frisby.js）は1300行程度ですので、これを読んでしまうのもオススメです。というのも、まだドキュメント化されていないメソッドがあったりで情報が少ないためです。でもなんにせよソース読んだほうがスッキリしますよね。
◯Frisbyでテストを書くコツ
コツというか経験をユースケースにして重要な機能を紹介します。これを覚えたらFrisbyでテストを書くのは困らないかなぁと思います。
・リクエストヘッダの一括設定と個別追加＆除去
frisby.globalSetup({
request: {
headers: {'X-CUSTOM-HEADER-VALUE': 'カスタムヘッダです'}
}
});
frisby.create('カスタムヘッダありで実行A')
.... // いろんな処理
.toss();
frisby.create('カスタムヘッダありで実行B')
.... // いろんな処理
.toss();
frisby.create('カスタムヘッダあり + 追加で実行')
.addHeader('X-CUSTOM-HEADER-MORE-VALUE', 'さらに追加')
.... // いろんな処理
.toss();
frisby.create('カスタムヘッダなしで実行')
.removeHeader('X-CUSTOM-HEADER-VALUE')
.... // いろんな処理
.toss();
・GET以外のメソッド（POST、PUT、DELETE）を使う
frisby.create('POSTメソッドで実行')
.post('http://localhost/something', {hoge: 'huga'})
.... // いろんな処理
.toss();
frisby.create('PUTメソッドで実行')
.put('http://localhost/something/10', {hoge: 'hugahuga'})
.... // いろんな処理
.toss();
frisby.create('DELETEメソッドで実行')
.delete('http://localhost/something/10')
.... // いろんな処理
.toss();
frisby.create('HEADメソッドも対応してる')
.head('http://localhost/something/10')
.... // いろんな処理
.toss();
frisby.create('PATCHメソッドも対応してる')
.patch('http://localhost/something/10', {hoge: 'hugahuga'})
.... // いろんな処理
.toss();
・404ページかどうか（ステータスコード）をチェックする
frisby.create('404 ページかどうか')
.get('https://www.google.co.jp/hogehoge')
.expectStatus(404)
.toss();
・ヘッダーを検証する（完全一致）
frisby.create('ヘッダーを検証する')
.get('https://www.google.co.jp')
.expectHeader('content-type', 'text/html; charset=Shift_JIS')
.toss();
・ヘッダーを検証する（部分一致）
frisby.create('ヘッダーを検証する')
.get('https://www.google.co.jp')
.expectHeaderContains('content-type', 'text/html')
.toss();
・依存性のあるテストの対応（レスポンスがJSONのみ対応）
frisby.create('テストA')
.get('http://animemap.net/api/table/tokyo.json')
.afterJSON(function (data)
{
frisby.create('テストAの結果に依存するテストB')
.get('http://localhost/something', {data: data})
.... // いろんな処理
.toss();
})
.toss();
・レスポンスヘッダやレスポンスボディを確認する
frisby.create('他にも色々と確認できるメソッド')
.get('http://animemap.net/api/table/tokyo.json')
.inspectHeaders()
.inspectBody()
.inspectJSON() // inspectBody()をJSONパースしたもの
.inspectStatus()
.inspectRequest()
.inspectResponse()
.toss();
・タイムアウトの制限時間を設定する
frisby.create('タイムアウトを10秒に設定（デフォルトは5000ミリ秒）')
.timeout(10000)
.get('http://animemap.net/api/table/tokyo.json')
.toss();
・Basic認証がある場合
frisby.create('Basic認証を突破！')
.auth('authname', 'authpassword')
.get('http://animemap.net/api/table/tokyo.json')
.toss();
◯まとめ
今回のサンプルソースではGETメソッドしか試していませんが、実際のアプリケーションではPUTメソッドやDELETEメッドも当然実装されますから、これらをテストするために毎回cURL等で確認するのは手間だと思います。状況にもよるでしょうが、何回か実行する可能性があるのなら自動化しておいて損はないでしょう。
最後に、これらは成果物にはならないかもしれませんが、心の健康と変更に対する勇気を得るためにもテストコードを書いてみてはいかがでしょうか？
それでは！
