参考にさせて頂いたページ
全体的なこと
karmaのこと
はじめに
Railsで生成されるapplication-xxxxxxxx.jsみたいなのをテストしたい目的があり、テスト対象のファイル名がapplication-xxx.jsですが、色々応用が利くかと思います。
リモートとローカルのリポジトリを作成する
package.jsonを作成していくつかのパッケージをインストールする
npm init
して、今回はデフォルトのままenterしていって、yesで大丈夫。npm install --save-dev phantomjs karma karma-cli karma-mocha karma-phantomjs-launcher karma-mocha-reporter mocha chai
.gitにnode_modulesディレクトリをpushしないようにする
- .gitignoreファイルが無かったら作成する。
- .gitignoreファイルに
/node_modules
を追記する。
js/application-xxx.jsを作成する
自分が作っているwebアプリケーションのjsファイルを想定しています。
window.addNumbers = function(a, b) { return a + b; };
spec/application.spec.jsを作成する
自分が作っているwebアプリケーションの関数を検証するためのソースコードです。
describe('addNumbers', function() { it('2 つの数値が加算できる', function() { chai.assert.strictEqual(window.addNumbers(1, 2), 3); }); });
karma.conf.jsを作成する
./node_modules/karma/bin/karma init karma.conf.js
を実行して対話形式で作成するか、手で作成する
module.exports = function(config) { config.set({ frameworks: ['mocha'], browsers: ['PhantomJS'], files: [ 'js/application*.js', 'node_modules/chai/chai.js', 'spec/**/*.spec.js', ], reporters: ['mocha'], }); };
以下のことを設定しています。
- フレームワークはmocha
- ブラウザはPhantomJS
- filesでテスト対象ファイルと、テストで使用するファイルを読み込み
- reportersでコンソールのテスト結果出力フォーマットを指定
package.jsonのscriptsのtestを編集する
"scripts": { "test": "./node_modules/karma/bin/karma start --single-run" },
コマンドでテストを実行してみる
./node_modules/karma/bin/karma start --single-run
でユニットテストが実行できます。- package.jsonの設定によって
npm run test
でも同じように実行できるはずですが、windowsだとエラーが出ました。CircleCIはこのコマンドを自動で実行してくれます。
pushしてCircleCIによるビルドを実行する
リポジトリにpushすることでCircleCIによるビルドが始まります。
CircleCIはnpm install
を自動でやってくれるので、package.jsonに書いてあるdevDependenciesが予めインストールしたうえで、npm run test
コマンドが実行されます。
ユニットテストが全て成功して、CircleCIのステータスが「SUCCESS」になったら自動テストの設定は成功ですね。
pushする前には./node_modules/karma/bin/karma start --single-run
を一度実行して、ローカルでユニットテストが成功してからpushするのが良いですね。
まとめ
今回の最終的なディレクトリ構造
practice_circle_ci_karma/ ├─.gitignore ├─karma.conf.js ├─package.json ├─README.md ├─.git/ │ └─(略) ├─js/ │ └─application-xxx.js ├─node_modules/ │ └─(略) └─spec/ └─application.spec.js
karma.conf.jsの記述内容
module.exports = function(config) { config.set({ frameworks: ['mocha'], browsers: ['PhantomJS'], files: [ 'js/application*.js', 'node_modules/chai/chai.js', 'spec/**/*.spec.js', ], reporters: ['mocha'], }); };
package.jsonの記述内容
{ "name": "practice_circle_ci_karma", "version": "1.0.0", "description": "karmaを導入して、CircleCIで実行するサンプルを作成してみます。", "main": "index.js", "scripts": { "test": "./node_modules/karma/bin/karma start --single-run" }, "repository": { "type": "git", "url": "xxxxxx/practice_circle_ci_karma.git" }, "author": "", "license": "ISC", "bugs": { "url": "xxxxxx/practice_circle_ci_karma/issues" }, "homepage": "xxxxxx/practice_circle_ci_karma#readme", "devDependencies": { "chai": "^4.0.1", "karma": "^1.7.0", "karma-cli": "^1.0.1", "karma-mocha": "^1.3.0", "karma-mocha-reporter": "^2.2.3", "karma-phantomjs-launcher": "^1.0.4", "mocha": "^3.4.2", "phantomjs": "^2.1.7" } }