OPA5で検索機能のテスト

リストの上にSearch Fieldを追加し、入力した内容に一致する結果が表示されることをテストします。今回のポイントはOPA5で入力操作をするところです。

参考にするチュートリアル
Step 11: Testing User Input
Step 12: Adding a Search

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

User Journey

リストの中から特定の単語("Bear")を検索する
リストに1件だけ表示される（絞り込まれた結果）

テスト用の構成

今回はWorklistJourney.jsとWorklist.jsにコードを追加します。

test/integration/WorklistJourney.js

以下のテストを追加します。

	opaTest("Should be able to search for items", function (Given, When, Then){
		// Actions: "Bear"を検索
		When.onTheWorklistPage.iSearchFor("Bear");
		
		// Assertions: リストに1行だけ表示される
		Then.onTheWorklistPage.theTableHasOneItem();
		
		// Cleanup
		Then.iTeardownMyApp();		
	});

アプリを閉じる処理であるThen.iTeardownMyApp();はもともと一つ前のテストの最後にありましたが、追加したテストの最後へ移動します。

test/integration/pages/Worklist.js

検索欄へ入力するため、EnterTextをdependencyに追加します。

sap.ui.define([
		'sap/ui/test/Opa5',
		'sap/ui/test/matchers/AggregationLengthEquals',
		'sap/ui/test/matchers/I18NText',
		'sap/ui/test/matchers/BindingPath',
		'sap/ui/test/actions/Press',
		'sap/ui/test/actions/EnterText' ←追加
	],
	function (Opa5,
			  AggregationLengthEquals,
			  I18NText,
			  BindingPath,
			  Press,
			  EnterText) ←追加{

アクションを追加します。

					iSearchFor: function(sSearchString) {
						return this.waitFor({
							id: "searchField",
							viewName: sViewName,
							actions: new EnterText({
								text: sSearchString
							}),
							errorMessage: "SearchField was not found."
						});
					}

アサーションを追加します。

					theTableHasOneItem: function () {
						return this.waitFor({
							id: sTableId,
							viewName: sViewName,
							matchers: new AggregationLengthEquals({
								name: "items",
								length: 1
							}),
							success: function() {
								Opa5.assert.ok(true, "The table contains one corresponding entry");
							},
							errorMessage: "The table does not contain one item"
						});
					}

実行してみる

実行すると、SearchFieldが見つからなかったというエラーになります。

検索機能を実装する

webapp/view/Worklist.view.xml

ヘッダに検索窓を追加します。

				<headerToolbar>
					<Toolbar>
						<Label id="tableHeader" text="{worklistView>/worklistTableTitle}"/>
						<ToolbarSpacer /> ←追加
						<SearchField id="searchField" width="auto" search=".onFilterPosts" /> ←追加
					</Toolbar>
				</headerToolbar>

<ToolbarSpacer />は、検索窓を右寄せにするために入れているスペーサーです。
実行すると、以下のようになります。

webapp/controller/Worklist.controller.js

検索ボタンを押したときに呼ばれる機能を実行します。
まずはdependencyとして、FilterおよびFilterOperatorを追加します。

検索用のファンクションは以下のように実装します。ここでは、Titleという項目が検索窓に入力した文字列を含むものを抽出します。

		onFilterPosts: function (oEvent) {
			//buld filter array
			var aFilter = [];
			var sQuery = oEvent.getParameter("query");
			if(sQuery) {
				aFilter.push(new Filter("Title", FilterOperator.Contains, sQuery));
			}
			
			// filter binding
			var oTable = this.byId("table");
			var oBinding = oTable.getBinding("items");
			oBinding.filter(aFilter);
		},

動作確認

フィルタに入力すると、Nameの項目で出力レコードが絞られました。（Titleという項目にバインドされているが、表示上はName）

テストを実行

検索機能に関するテストが正常終了しました。

感想

「チュートリアルを見ながらTest Driven Developmentを体験する」と題して、QUnitテスト、OPA5テスト実行の流れについて書いてきました。
QUnitに関しては、テスト書き方が比較的シンプルで、機能を実装する前にテストを書くということの有効性が実感できました。
一方OPA5は、テストがちゃんと動くところまで持っていくところで苦労しそうだと感じました。そこに労力を割くのであれば、人がテストしたほうが早いのではと思ったり。
「こういう操作の場合はこういう書き方をする」ということがある程度定型化されて、あまり考えなくてもテストが書ける状態であればOPA5も有効なのかもしれません。

関連記事

チュートリアルを見ながらTest Driven Developmentを体験する (4) ナビゲーション