こんにちは！ SmartHRのエンジニア、溝上といいます。
今回は通常の業務と合わせて行っている開発環境の改善、その一部である Sprockets 絶ちを紹介していけたらと思います。
前回やったことまとめ
- CoffeeScript & Babelの開発環境を用意
- Karmaを利用したテスト環境を作成
- ESLint, Flowも導入
- decafjsを使ってトランスパイルしていける状態を作成
今回はCircleCIでのテストについて
SmartHR では CircleCI を使った テストを行っています。 せっかくフロントエンド用のテスト環境を作ったのですからこれらも CI に含めたいですよね？
設定してしまいましょう。
(CircleCI の 導入自体については他ブログが詳しいのでそちらをご参考いただくとして) 設定は circle.ymlというファイルを設定することで行なえます。
設定
CircleCI は特に設定を行わなくても、テストを行う repository に package.json が存在していれば自動的に npm install を実行してくれます。 node, npm の version を指定する必要がある場合、この自動install より先に設定する必要があります。
# circle.yml例
...
machine:
node:
version: 4.4.5
post:
- npm install -g npm@4.0.2
...
この例通りに設定を行えば、 node の version を 4.4.5 に、そしてCI環境作成時の最後に npm ver4.0.2 が設定されます。
ここまでくればあとはテストを実行させるだけです。 circle.yml の test にコマンドを記述していきます。
# circle.yml例
...
test:
pre:
- npm run eslint
- npm run flow
override:
- npm run spec
...
testに指定したコマンドの終了ステータスが 1の場合、 CircleCI がエラーと判定してくれるので各テストの設定などは合わせて変えると良いですね。
ここまで設定できればあとは github などに push するだけで自動的にフロントエンドのテストを実行してくれるようになります。 めちゃくちゃ便利で思わずテストを書く手が捗ります。
次回
次回は Gem で install している フロントエンドのライブラリを npm に移行していく話をします！（予定）
