Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

JSでテストコードを書く その0003-01 karma+mocha+chaiの組み合わせでCircleCI上でユニットテストを実行する

参考にさせて頂いたページ

全体的なこと

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"
  }
}