参考にさせて頂いたページ
全体的なこと
karmaのこと
はじめに
Railsで生成されるapplication-xxxxxxxx.jsみたいなのをテストしたい目的があり、テスト対象のファイル名がapplication-xxx.jsですが、色々応用が利くかと思います。
リモートとローカルのリポジトリを作成する
- practice_circle_ci_karmaリポジトリをGitHubにREADME.mdと一緒に作成する。
- git cloneして、ローカルにリポジトリを持ってくる。
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"
}
}