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

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

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

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

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

準備

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

mocha

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

こんな感じになります。

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

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

終わりに

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

次回

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

Instagram Feed

Load More

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →