ローディング中

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

こんな感じになります。

Screen Shot 2016 11 02 at 16 45 04

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

終わりに

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

次回

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

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.