OPA5でナビゲーションのテスト

リストの行を選択したときに詳細画面に遷移するナビゲーションを作ってテストします。

参考にするチュートリアル
Step 8: Testing Navigation
Step 9: Adding the Post Page

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

User Journey

OPA5テストでは、最初にUser Journeyを考えるのが定石でした。以下が今回のUser Journeyです。

リストの行を選択して詳細を見る
詳細画面から「戻る」ボタンを押してリストに戻る
リスト画面から「進む」ボタンを押して詳細画面を再表示する

テスト用の構成

新規にPostJourney.jsとPost.jsというファイルを作ってナビゲーションをテストします。PostJourney.jsと、テスト用jsファイルの関係は以下のようになります。このように一つのJourneyから複数のpage objectを使うこともできます。

webapp/test/integration/PostJourney.js

User Journeyをベースにテストを配置します。

sap.ui.define([
	"sap/ui/test/opaQunit",
	"./pages/Worklist",
	"./pages/Browser",
	"./pages/Post"
], function (opaTest) {
	"use strict";
	
	QUnit.module("Post");
	
	//1. 行選択して詳細画面に移動
	opaTest("Should see the post page when a user clicks on an entry of the list", function (Given, When, Then) {
		// Arrangements
		Given.iStartMyApp();
		
		// Actions
		When.onTheWorklistPage.iPressOnTheItemWithTheID("PostID_15");
		
		// Assertions
		Then.onThePostPage.theTitleShouldDisplayTheName("Jeans");
	});
	
	//2. 「戻る」を押して一覧画面に戻る
	opaTest("Should go back to the TablePage", function (Given, When, Then) {
		// Actions
		When.onThePostPage.iPressTheBackButton();
		
		// Assertions
		Then.onTheWorklistPage.iShouldSeeTheTable();
	});
	
	//3. 「進む」を押して詳細画面を再表示
	opaTest("Should be on the post page again when the browser's forward button is pressed", function (Given, When, Then) {
		// Actions
		When.onTheBrowser.iPressOnTheForwardButton();
		
		// Assertions
		Then.onThePostPage.theTitleShouldDisplayTheName("Jeans");
		
		// Cleanup
		Then.iTeardownMyApp();
	});

});

webapp/test/integration/pages/Worklist.js

リストの行をクリックするアクションをWorklistに追加します。BindingPathというタイプのmatcherを使って、指定したIDを持つbinding pathがリストに存在するかどうかをチェックし、存在したらその行をクリックします。

①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'
	],

②actionを実装

				actions: {
					//・・・
					iPressOnTheItemWithTheID: function (sId) {
						return this.waitFor({
							controlType: "sap.m.ColumnListItem",
							viewName: sViewName,
							matchers: new BindingPath({
								path: "/Posts('" + sId + "')"
							}),
							actions: new Press(),
							errorMessage: "No list itme with the id" + sId + " was found."
						});
					}

③assertionを追加
「戻る」ボタンを押た後、一覧に戻ったことを確認するためのassertionを追加します。テーブルが見えているかどうかで判定します。

					iShouldSeeTheTable: function () {
						return this.waitFor({
							id: sTableId,
							viewName: sViewName,
							success: function() {
								Opa5.assert.ok(true, "The table is visible");
							},
							errorMessage: "Was not able to see the table"
						});
					}

webapp/test/integration/pages/Post.js

詳細画面での操作に関するテスト用jsファイルを新規に作成します。

sap.ui.define([
	'sap/ui/test/Opa5',
	'sap/ui/test/matchers/Properties',
	'sap/ui/test/actions/Press'
], function(Opa5, Properties, Press){
	"use strict";
	var sViewName = "Post";
	Opa5.createPageObjects({
		onThePostPage: {
			//baseClass: Common,
			actions: {
				//詳細画面で戻るボタンを押す
				iPressTheBackButton: function (){
					return this.waitFor({
						id: "page",
						viewName: sViewName,
						actions: new Press(),
						errorMessage: "Did not find the nav button on object page"
					});
				}
			},
			assertions: {
				//詳細画面が表示されることを確認
				theTitleShouldDisplayTheName: function (sName){
					return this.waitFor({
						success: function () {
							return this.waitFor({
								id: "objectHeader",
								viewName: sViewName,
								matchers: new Properties({
									title: sName
								}),
								success: function (oPage) {
									Opa5.assert.ok(true, "was on the remembered detail page");
								},
								errorMessage: "The Post " + sName + " is not shown"
							});
						}
					});
				}
			}
		}
	});
});

上記のソースは冒頭に記載したチュートリアルからのコピーですが、ここで気になったのは、theTitleShouldDisplayTheNameメソッドです。
waitForが入れ子になっていますが、何のためなのでしょうか？現時点では理由はわかりません。試しに外側のwaitForをコメントアウトしてみましたが、結果は同じでした。

webapp/test/integration/pages/Browser.js

ブラウザの「進む」ボタンを押すアクションを追加します。ブラウザ関係の操作は共通で使うものなので、独立したファイルにします。

sap.ui.define([
	'sap/ui/test/Opa5'
], function(Opa5){
	"use strict";
		Opa5.createPageObjects({
			onTheBrowser: {
				//baseClass: Common,
				actions: {
					iPressOnTheForwardButton: function () {
						return this.waitFor({
							success: function () {
								Opa5.getWindow().history.forward();
							}
						});
					}
				},
				assertions: {}
			}	
		});
});

webapp/test/integration/AllJourneys.js

最後に、AllJourneys.jsに新しく追加したPostJourneyを追加します。

sap.ui.define([
	"sap/ui/test/Opa5",
	"./arrangements/Startup",
	"./WorklistJourney",
	"./PostJourney" ←追加

実行してみる

一つ目のテストでエラーになりました。エラーメッセージから、詳細画面が表示されないためエラーになったことがわかります。

Routingを実装する

ナビゲーションができるように詳細画面用のビュー(Post.view.xml)とRoutingを実装します。
※Routingの仕組みについては以下の記事をご参照ください。
【SAPUI5】Routingでナビゲーション

webapp/manifest.json

Routingの設定を追加します。

webapp/view/Worklist.view.xml

リストの行を選択したときのアクションを追加します。

この時点では行選択しても何も起きませんが、矢印が表示されるようになります。

webapp/controller/Worklist.controller.js

行選択したときに呼ばれるメソッドを実装します。

webapp/view/Post.view.xml

詳細画面用のビューを新規に作成します。

<mvc:View
	controllerName="sap.ui.demo.bulletinboard.controller.Post"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:semantic="sap.m.semantic">
	<semantic:FullscreenPage
		id="page"
		busy="{postView/busy}"
		busyIndicatorDelay="0"
		navButtonPress=".onNavBack"
		showNavButton="true"
		title="{i18n>objectTitle}">
		<semantic:content>
			<ObjectHeader
				id="objectHeader"
				title="{Title}"
				number="{
					path: 'Price',
					formatter: '.formatter.numberUnit'
				}"
				numberUnit="{Currency}"
				backgroundDesign="Translucent"
				>
			</ObjectHeader>
		</semantic:content>
	</semantic:FullscreenPage>
</mvc:View>

webapp/controller/Post.controller.js

詳細画面用のコントローラーを実装します。

sap.ui.define([
    './BaseController',
    'sap/ui/model/json/JSONModel',
    '../model/formatter'
], function(BaseController, JSONModel, formatter) {
    "use strict";

	return BaseController.extend("sap.ui.demo.bulletinboard.controller.Post", {

		formatter: formatter,

		/* =========================================================== */
		/* lifecycle methods                                           */
		/* =========================================================== */

		/**
		 * Called when the worklist controller is instantiated.
		 * @public
		 */
		onInit: function () {
			// ビューのbusyプロパティに設定する値
			var oViewModel = new JSONModel({
				busy: false
			});
			this.getRouter().getRoute("post").attachPatternMatched(this._onPostMatched, this);
			this.setModel(oViewModel, "postView");
		},

		/* =========================================================== */
		/* event handlers                                              */
		/* =========================================================== */
		onNavBack: function () {
			//BaseControllerのメソッド
			this.myNavBack("worklist");
		},

		/* =========================================================== */
		/* internal methods                                            */
		/* =========================================================== */
		/**
		 * Binds the view to the post path.
		 *
		 * @function
		 * @param {sap.ui.base.Event} oEvent pattern match event in route 'object'
		 * @private
		 */
		 _onPostMatched: function (oEvent) {
		 	var oViewModel = this.getModel("postView"),
		 		oDataModel = this.getModel();
			this.getView().bindElement({
				path: "/Posts('" + oEvent.getParameter("arguments").postId + "')",
				events: {
					dataRequested: function () {
						oDataModel.metadataLoaded().then(function () {
							// metadataがロードされてからbusy属性をセットしないと、
							// busy indicatorが2つ表示されてしまう							
							oViewModel.setProperty("/busy", true);
						});
					},
					dataRecieved: function () {
						oViewModel.setProperty("/busy", false);
					}
				}
			});
		 }
	});
});

動作確認

一覧画面

行を選択すると、詳細画面に移動します。

戻るボタン（左上の矢印）を押すと、前の画面に戻ります。
ブラウザの「進む」ボタンを押すと、直前に見ていた詳細画面に戻ります。
これで動作確認OKな気もしますが、今回の目的はテストなので、OPAテストを実行します。

テストを実行

正常終了しました。

関連記事

チュートリアルを見ながらTest Driven Developmentを体験する (3) OPA5
チュートリアルを見ながらTest Driven Developmentを体験する (5) 検索機能