はてブロ@ama_chスマートフォン用の表示で見るはてブロ@ama_chhttps://twitter.com/ama_chこの広告は、90日以上更新していないブログに表示しています。巷でAngularJSが盛り上がっているのを横目に、最近は黙々とKarmaを触っていました。Karmaはかなりよくできていて素晴らしいと思うんですが、具体的な使い方はあまり見ないので紹介したいと思います。Karmaについてhttp://karma-runner.github.io/Karmaはいわゆるリモートテストランナーです。リモートテストランナーというと、色んなブラウザでテストを走らせることが目的のように思えますが、そうではありません。主眼が置かれています。コマンドラインでテストを実行するほかにファイルの変更監視CIサーバとの連携デバッグのサポートプラグインによる機能拡張といった機能を持っています。実際に使ってみると、単にテストを実行してくれるだけでなく、ワークフローが劇的に変わることを実感できると思います。個人的にいいなと思うKarmaの特徴について。公式ページのドキュメントが充実しています。ドキュメントをざっと眺めれば使い始めることができますし、CIサーバとの連携方法など使い始めたら気になる所も網羅されていて好感が持てます。あとリポジトリのルートに置いてあるthesis.pdfにはKarmaの設計思想やアーキテクチャがコンパクトにまとまっていて、全体を把握するのに役立ちました。プラグインで拡張できるKarmaはテストフレームワークのサポートやレポーター・プリプロセッサなど機能の多くがプラグインになっています。代表的なものは公式プラグインとして提供されていて、ほかにもユーザーが作成したプラグインが数多く公開されています。おかげで、テストに関する様々な要求に柔軟に対応できます。Growl通知でビルド時はJUnit形式のレポートとカバレッジレポートがほしいなんていう場合にもプラグインの設定をちょいちょい変えるだけでOKです。実績がある実際に現場に投入するとなると、ちゃんと動くかどうかが気がかりです。大規模なプロジェクトはJSファイルが数千になったりするので、安易に乗り換えた結果まともに動かないという事態は絶対に避けないといけません。Karmaはその点GoogleやYoutubeで実際に使われているという実績があり、その安心感はデカイです。KarmaのサンプルプロジェクトそんなKarmaを使うと、「TDDしてCIしてカバレッジを見て...」というワークフローがかなりイケてる感じになります。試しにそのワークフローが体感できるリポジトリを作ってみました。ama-ch/karma-introhttps://github.com/ama-ch/karma-introKarmaのセットアップ方法や基本的な使い方は割愛します。公式ドキュメントや入門エントリを参照してください。karma:devでTDD用の設定でKarmaが起動します。起動した状態でコードを変更すると自動でテストが走って、Growlでポコポコ通知してくれます。Ctrl+Cで終了します。karma:ciでCI用の設定でKarmaが起動します。PhantomJSだけでテストが実行されて、実行後は即終了します。coverageでCoverall用のカバレッジレポートを作成して、Coverallにポストします。手元で直接叩くことはないです。CI設定.travis.ymlはこんなかんじ。coverageするだけです。機能追加ワークフローでは、このリポジトリで何か機能を追加するワークフローを考えてみます。1.フィーチャーブランチを切るまず実装用のブランチを切ります。karma:devでTDDを開始するKarmaが起動してコードの変更を監視します。実装するコードを変更すると自動でテストが走って結果がGrowlで通知されます。デバッグするテストが意図せず失敗したときは、デバッグをします。コンソールを開くとスタックトレースが表示されているので、参考にしましょう。コンソールを見てもよく分からない場合は、Karmaのデバッグ画面(http://localhost:9876/debug.html)を開いてdevtoolsでデバッグします。pushしてプルリクエストを作る実装が一段落したら、ブランチをプッシュしてプルリクエストを作成します。CIのビルドとCoverallsのカバレッジレポートが実行されます。「それKarma使えばWebアプリでもできるよ!」って言いたかっただけです。使ってるプラグインなどgrunt-karma公式のGruntプラグインです。タスクごとにKarmaの設定を書き換えることができるので、これでCI用の設定などを書き分けています。karma-spec-reporterテスト結果をMochaのspecレポーター風に出力してくれるプラグインです。デフォルトのレポーターは通ったテストをほとんど表示してくれないんですよね。一覧で見たい人にはありがたいプラグインです。grunt-karma-coverallsこれはKarmaのプラグインじゃなくてGruntプラグインです。Karmaで作成したカバレッジレポートをCoverallsにポストしてくれます。事前にカバレッジの計測をしておく必要がありますが、Karmaならkarma-coverageで一瞬でできちゃいます。TestemかKarmaかちょっと違う話題になりますが、せっかくなので。提供する機能が大体同じなのでどっちでもいいと思いますが、大規模プロジェクト*1ではKarmaをオススメします。Karmaを触る前はTestemを調べていたんですが、大量のJSを読み込むとファイルディスクリプタの上限に引っかかって動かなかったりwatchでCPUリソースを食い潰して死亡するという現象が発生したため断念しました。いえTestemはレポーターがかっちょいいですし、基本はやっぱり好みで決めて、問題が起きたら他のも検討してみるくらいでちょうど良いんじゃないかと思います。まとめKarmaを使うとテストが自動で動かせるだけじゃなくて、CI連携やカバレッジ計測もできるようになります。ワークフローが変わります。AngularJSも良いけどKarmaもぜひ使ってみてください!*1:読み込むJSのファイル数が数百を超えてくるイメージです。CoverallsなイケてるワークフローTweet広告を非表示にする関連記事2018-01-14RSGT2018を終えて、スクラムを始めた時に読んだ本まとめご無沙汰しております。Vol.74でJavaScriptのメモリリークについて書きました!月別アーカイブはてなブログをはじめよう!ama-chさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。