Contents
. ├── spec │   ├── main_spec.js │   └── spec_runner.html └── src └── main.js 2 directories, 3 files
この関数に対するテストコードはBDDスタイルで下記のように書ける。function double(n) { if(!n) { throw new Error("no param"); } else { return n * n; } }
ブラウザで単体テストを実行させるにはspec_runnerというHTMLファイルを作成する必要がある。describe('SampleTest', function(){ describe('Test Double Func', function(){ it('should return double value', function(){ expect(double(2)).to.equal(4); //except assertion double(3).should.equal(9); //should assertion }); it('should throw error undefined without param', function(){ expect(function() { double() }).to.throw("no param"); }); }); });
main.js、main_spec.js、spec_runner.htmlの3つのファイルが作成できたら、<html> <head> <meta charset="utf-8"> <title>Mocha Tests</title> <link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" /> </head> <body> <div id="mocha"></div> <script type="text/javascript" src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.1.0/chai.js"></script> <script> mocha.setup('bdd') var assert = chai.assert; var expect = chai.expect; chai.Should(); </script> <script src="../src/main.js"></script> <script src="./main_spec.js"></script> <script> mocha.checkLeaks(); mocha.run(); </script> </body> </html>
function doubleAsync(n, callback) { setTimeout(function(){ callback(n * n); }, 100); }
非同期処理に対するテストコードではdoneが必須である。describe('Test DoubleAsync Func', function(){ it('should return double value', function(done){ doubleAsync(2, function(result){ result.should.equal(4); done(); }); }); });
これは楽天商品検索APIの結果を取得するコードである。この関数をテストする場合は以下のようにalwaysを使えば良い。function api_data() { var deferred = jQuery.ajax({ url: "https://app.rakuten.co.jp/services/api/IchibaItem/Search/20140222?format=json&keyword=%E6%A5%BD%E5%A4%A9&genreId=559887&shopCode=rakuten24&applicationId=#{Please input your id}", dataType: "jsonp" }) .done(function(items) {}) .fail(function(error) {}) return deferred; }
jQueryを読み込む必要があるため、spec_runner.htmlを以下のように変更する。describe('SampleTest', function(){ describe('API Data Func', function(){ it('should return correct dada', function(done){ api_data().always(function(result) { expect(result['page']).to.equal(1); done(); }); }); }); });
mocha.globalsの”jQuery*”がポイント。これがないとたとえば以下のようなエラーが出てしまう。 Mochaに対してグローバル変数名をあらかじめ提示しないとエラーになってしまう。<html> <head> <meta charset="utf-8"> <title>Mocha Tests</title> <link href="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" /> </head> <body> <div id="mocha"></div> <script src="https://cdn.rawgit.com/jquery/jquery/2.1.4/dist/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.1.0/chai.js"></script> <script> mocha.setup('bdd') var assert = chai.assert; var expect = chai.expect; chai.Should(); </script> <script src="../src/main3.js"></script> <script src="./main_spec3.js"></script> <script> mocha.checkLeaks(); mocha.globals(['jQuery*']); mocha.run(); </script> </body> </html>