mochaとphantomjsでブラウザテストを書いてみよう１回目〜ローカルでテスト〜

みなさんこんにちは、個別指導塾コミット塾長、AWESOMEの開発担当の船津です。
今回はこちらの

JavaScript Promiseの本を読んでいたときにjsテストについての記述があったのでjsでのテストについてまとめてみます。

今回はローカルでテスト！

Macでのテストを想定しています。
ローカルで最低限の環境を作りましょう。
ちょっとずつ、丁寧に、がモットーです。

準備

• 動かすにはnodejsが必要なので、環境を作ってください。

mocha

• 公式サイト
• npm install -g mocha

phantomjs

• 公式サイト
• brew update; brew install phantomjs

mochaのテスト

テストしたいコードを準備

とりあえずBMIとシンデレラ体重計算用のメソッドを用意しましょう。

calc.js

var calc = {
  bmi: function (w,h) {
    var result =  w/(h*h)
    return Math.floor(result)
  },
  cinderella: function (h) {
    var result = h * h * 20 * 0.9
    return Math.floor(result)
  }
}

module.exports = calc

次にテスト用のファイルを作成します。

mochatest.js

var assert = require('assert')
var calc = require('./calc.js')


describe('calc method', function () {
    it('can calculate bmi', function() {
        assert.equal( 23, calc.bmi( 60, 1.6 ) );
    });

    it('can calculate cindellea weight', function () {
        assert.equal( 46, calc.cinderella( 1.6 ));
    });
});

実行

ここまでファイルを作成してターミナルで実行すると…
$ mocha mochatest.js

こんな感じになります。

assert.equalでcalcメソッドの計算結果を検証しています。

終わりに

WordPress案件が多いのですが、品質を担保するためにはテーマテスト、プラグインテスト、フロントのjsテストを出来る限り行っていきたいですね。ビビらず、めんどくさがらずドンドンテストしましょう。

次回

次回はjqueryで動くページを作成してからブラウザベースのテストを行います。