【jasmine + Karma】 による AngularJs 単体テストをしてみた
で作ったプロジェクトについて、CircleCIを使って、githubにpushされたらkarmaでjasmineの単体テストが実行されるようにしてみました。

CircleCI の 設定

CircleCI の 登録

CircleCIの「Authorize Github」で、githubアカウントでcircleCIの登録を行います。

CircleCI で Buildを行いたいレポジトリを選択

CircleCIのAdd Projectで、ciで回したいリポジトリを追加します。
今回は、リポジトリ「test-circleCI」を追加しようと思いますので、
下記添付画像の ① > ② > ③ の順でクリックしていきます。

build projectをクリックした段階で、対象のリポジトリに対してBuildが行われます。

circleCIの設定を置いていなくてもなんかいい感じにnpm testを実施してうまいこといっている雰囲気なのですが、nodeのversionが古かったりするので、circle.ymlでちゃんと記述してこうかと思います。

circle.yml

node versionの上げ方については、ここを参考にしてます。てゆうかまんまコピペ・・・

依存関係は、「dependencies」で記述するらしい？ので、ここで、npm install を行います。
キャッシュが悪さしてnpm install 失敗するのもいやなので、npmのキャッシュを消してからnpm install しています。

最後に、testとして、package.jsonに記述しているkarma実行scriptを叩いています。

machine:
  timezone:
    Asia/Tokyo
  node:
    version: 6.3.0
  post:
    - npm install -g npm@3

dependencies:
  override:
    - npm cache clean
    - npm install

test:
  override:
    - npm run karma

Coverage

CircleCIのArtifactsにCoverageのhtmlを吐き出したいのですが、ローカルでは、./Coverageに吐き出したい。

ということで、karma.config.jsのcoverageReporterプロパティを追加します。
htmlを吐き出すディレクトリは、
ローカルの時は、 ./coverage/
CircleCIの時は、Artifacts/coverage/
となるようにします。

+  var reportDir = process.env['CIRCLE_TEST_REPORTS'] || '.';

+  coverageReporter: {
+    dir: reportDir + '/coverage/',
+    reporters: [ { type: 'html' } ]
+ },

実際にBranchをpushして、CircleCIが回るか確認する。

ちゃんと、CircleCIでKarmaが実行されて、Artifactsにcoverageが吐き出されてます(^ ^)

因みに、ローカルでテストした場合は、./coverage に吐き出されていました。

折角なので、githubのmasterブランチを保護する

CircleCIでテスト実施の環境が整ったので、githubのmasterブランチについて、テストが通らないとマージできないように保護したいと思います。

保護したいリポジトリのsetting > Branches > Protected branches で mastarを選択し、status checks で、circleciを選択するだけです。

保護した結果

ciが回っている間や、テストに失敗した場合は、マージボタンがdisableとなりマージできなくなりました。

CircleCI Running

CircleCI Test NG

CircleCI Test Success

テストを含めBuildが全て問題なく完了した場合は、マージボタンが活性化しました。

おわりに

CircleCIのど導入は、思っていた以上にあっさりできてしまいました。
CircleCIは、無料プランでもいろいろできるようなので、どんどん使っていきたいですね。

ソースはgithubで公開しています。