Test Drivenでフォーマッターの実装

今回はTest Driven（テストを先に書く方式）でフォーマッターの機能を実装します。フォーマッターとは、データを所定の表示形式になるように整形する機能です。
以下のチュートリアルを参照します。
Step 2: A First Unit Test
Step 3: Adding the Price Formatter

「チュートリアルを見ながらTest Driven Developmentを体験する」シリーズの目次はこちら

QUnitテスト用の設定を確認

今回のテストで使うファイルは、test/unitフォルダの配下に格納されています。

QUnitテストを実行するときはunitTests.qunit.htmlを実行します。
ここからunitTests.qunit.jsが呼ばれ、さらにAllTests.jsが呼ばれるという構成になっています。テンプレートからアプリを作った場合も同じ構成となります。（ベストプラクティス）

各ファイルの中身を見てみます。
unitTests.qunit.js
QUnitを開始しています。

AllTests.js
テスト対象の機能（formatterなど）を呼ぶjsファイルをdependencyに設定しています。

model/formatter.js
Number unitのテストケースが入っています。

model/models.js
デバイスモデル作成のテストケースが入っています。

お気づきのように、テスト用のフォルダ、ファイルは、テスト対象機能と同じ構成になっています。これが慣例だそうです。

どこに手を入れればいいの？

AllTests.jsとテスト対象の機能を呼ぶjsファイルに手を入れます。
AllTests.jsはテスト対象のjsファイルを追加した場合だけ変更が必要で、今回は変更しません。

Test Driven Developmentのステップ

Test Driven Developmentは以下の順序で進みます。

テストを書く
機能を実装する
テストを実行する
機能をアプリに組み込む

実装する機能

Priceの色が、金額に応じて変わるようにします。

条件

1. テストを書く

仕様が決まったところで早速テストを書きます。

フォーマッターのガラだけ作成

テスト実行用jsから呼べるように、フォーマッターのガラだけ先に作っておきます。
webapp/model/formatter.js

		priceState: function(){
		}

QUnitテストを書く

PriceState用のモジュール（テストの単位）と、priceStateを呼ぶミニ関数を定義します。この関数はこの後、色々な値でテストを実行するときに使います。
assertionでPriceStateから返された値と想定結果を比較し、一致すればOKとなります。

webapp/test/unit/model/formatter.js

	QUnit.module("Price State");
	function priceStateTestCase(oOptions){
		// Act
		var sState = formatter.priceState(oOptions.price);
		// Assert
		oOptions.assert.strictEqual(sState, oOptions.expected, "The price state was correct");
	}

次に、上記の関数を呼び出してテストを実行します。テストすべき条件をコメントで先に書いておくと良いと思います。

	//price < 50: Status is green (Success)
	//price >= 50 and price < 250: Status is normal (None)
	//price >= 250 and price < 2000: Status is orange (Warning)
	//price >= 2000: Status is red (Error)

コメントの下にテストを書きます。

	//price < 50: Status is green (Success)
	QUnit.test("Should format the products with a price lower than 50 to Success", function(assert){
		priceStateTestCase.call(this, {
			assert: assert,
			price: 42,
			expected: "Success"
		});
	});

残りのケースも同様に、目的に合ったpriceと想定結果の組を与えます。

	//price >= 50 and price < 250: Status is normal (None)
	QUnit.test("Should format the products with a price of 50 to Normal", function(assert){
		priceStateTestCase.call(this, {
			assert: assert,
			price: 50,
			expected: "None"
		});
	});	

	QUnit.test("Should format the products with a price betweenn 50 and 250 to Normal", function(assert){
		priceStateTestCase.call(this, {
			assert: assert,
			price: 112,
			expected: "None"
		});
	});	
	
	//price >= 250 and price < 2000: Status is orange (Warning)
	QUnit.test("Should format the products with a price betweenn 250 and 2000 to Warning", function(assert){
		priceStateTestCase.call(this, {
			assert: assert,
			price: 798,
			expected: "Warning"
		});
	});	
	
	//price >= 2000: Status is red (Error)
	QUnit.test("Should format the products with a price higher than 2000 to Error", function(assert){
		priceStateTestCase.call(this, {
			assert: assert,
			price: 2001,
			expected: "Error"
		});
	});

実行結果

PriceSateのテスト結果は全てエラーになりました。まだ機能を実装していないので想定通りです。

2. 機能を実装する

フォーマッターを実装します。

		priceState: function(iPrice){
			if(iPrice < 50){
				return "Success";
			}else if(iPrice >= 50 && iPrice < 250){
				return "None";
			}else if(iPrice >= 250 && iPrice < 2000){
				return "Warning";
			}else{
				return "Error";
			}
		}

3. テストを実行する

実装後に改めてテストします。今回は正常終了します。
これで機能が正しく実装できていることが確認できました。

4. 機能をアプリに組み込む

ObjectNumberのコントロール（priceを出しているところ）に、stateという属性を追加します。ここにpriceStateを設定します。
view/Worklist.view.xml

							<ObjectNumber
								number="{
									path: 'Price',
									formatter: '.formatter.numberUnit'
								}"
								state="{
									path: 'Price',
									formatter: '.formatter.priceState'
								}"
								unit="{Currency}"
								/>

実行結果

Priceの色が金額に応じて変わりました。実装と同時にテストも終わりました！

関連記事

チュートリアルを見ながらTest Driven Developmentを体験する (1) 概要
 チュートリアルを見ながらTest Driven Developmentを体験する (3) OPA5