ブラウザでのテストの記述方法
では、実際にどのようにテストを記述するか、コードを見ていきましょう。FizzBuzz問題を例に作っていきます。FizzBuzz問題の仕様は以下のとおりです。
- 1から始まる整数を変換する
- 3の倍数のときはFizzを表示
- 5の倍数のときはBuzzを表示
- 3の倍数かつ5の倍数のときはFizzBuzzを表示
- 3と5の倍数以外はその数字を表示する
この仕様のメソッドを以下のように作ってみました。このテストコードを例に、TDDおよびBDDのテスト記述方法について説明していきます。
テスト対象の関数（mochatdd.html）
// テスト対象のメソッド
var fizzbuzz = function(n) {
if (n % 3 === 0 && n % 5 === 0)
return "Fizz,Buzz";
else if (n % 3 === 0)
return "Fizz";
else if (n % 5 === 0)
return "Buzz";
else
return n;
}
TDDでのテストの記述
では、Mochaとchai.jsを使ってTDD形式のテストを書いてみましょう。suite関数を実行し、まずはテストのタイトルを付けます。この例では、テスト対象のメソッドがfizzbuzzのため、メソッド名を記述しています。実際にテストを行う部分は、test関数を使用し、テスト内容の説明と、コールバック関数の中で実際のテストを記述します。
TDD形式でのFizzBuzzのテスト（mochatdd.html）
suite('#fizzbuzz()', function() {
test("3の場合はFizzが返ってくる", function() {
assert.equal("Fizz", fizzbuzz(3), '3の場合はFizzが返ってくる');
});
test("5の場合はBuzzが返ってくる", function() {
assert.equal("Buzz", fizzbuzz(5), '3の場合はFizzが返ってくる');
});
test("15の場合はFizz,Buzzが返ってくる", function() {
assert.equal("Fizz,Buzz", fizzbuzz(15), '3の場合はFizzが返ってくる');
});
test("3と5の倍数以外は、数字が返ってくる", function() {
assert.notEqual("Fizz", fizzbuzz(1), '1の場合はFizzが返ってこない');
assert.notEqual("Buzz", fizzbuzz(1), '1の場合はBuzzが返ってこない');
assert.equal("1", fizzbuzz(1), '1の場合は数字がそのまま返ってくる');
assert.equal("7", fizzbuzz(7), '7の場合は数字がそのまま返ってくる');
assert.equal("13", fizzbuzz(13), '13の場合は数字がそのまま返ってくる');
});
});
BDD
続いて、BDDのテストを書いてみます。関数の実行結果をexpect関数の引数に渡した上で、その後プロパティで変数をつないでテスト内容を記述します。
BDD形式でのFizzBuzzのテスト（mochabdd.html）
describe('1から始まる整数を変換する', function() {
it("3の倍数のときはFizzを表示する", function() {
expect(fizzbuzz(3)).to.eql("Fizz");
});
it("5の倍数のときはBuzzを表示する", function() {
expect(fizzbuzz(5)).to.eql("Buzz");
});
it("3の倍数かつ5の倍数のときはFizzBuzzを表示する", function() {
expect(fizzbuzz(15)).to.eql("Fizz,Buzz");
});
it("3と5の倍数以外はその数字を表示する", function() {
expect(fizzbuzz(2)).not.to.eql("Fizz");
expect(fizzbuzz(2)).not.to.eql("Buzz");
expect(fizzbuzz(1)).to.eql(1);
expect(fizzbuzz(7)).to.eql(7);
expect(fizzbuzz(13)).to.eql(13);
});
});
テストを実行してみよう
上記のテストが書かれたHTMLを表示すると、以下のように実行結果が表示されます。エラーとなった場合は、エラーに成ったテストの部分が赤く表示されます。このようなUIによって、テスト結果をひと目で確認することができます。
FizzBuzzテスト実行結果
エラーになるテスト（mochaerror.html）
describe('1から始まる整数を変換する', function() {
it("3の倍数のときはFizzを表示する", function() {
expect(fizzbuzz(3)).to.eql("Fizz");
});
it("5の倍数のときはBuzzを表示する", function() {
// このテストがエラー
expect(fizzbuzz(6)).to.eql("Buzz");
});
it("3の倍数かつ5の倍数のときはFizzBuzzを表示する", function() {
expect(fizzbuzz(15)).to.eql("Fizz,Buzz");
});
it("3と5の倍数以外はその数字を表示する", function() {
expect(fizzbuzz(2)).not.to.eql("Fizz");
expect(fizzbuzz(2)).not.to.eql("Buzz");
expect(fizzbuzz(1)).to.eql(1);
expect(fizzbuzz(7)).to.eql(7);
expect(fizzbuzz(13)).to.eql(13);
});
});
エラー表示結果
最後に
今回は、Mochaとexpectの基本的な考え方と、ブラウザでのテストの記述方法を説明しました。次回は、node.jsでどのように実行するかを説明していきます。
