やりたいこと
以下のように、ロジックとUIが一体になったコンポーネントをライブラリに定義しています。
コンポーネントはアプリに組み込む部品として使うのですが、組み込む前に動作確認できるようにしたいです。そのためには、ライブラリの中でコンポーネントを呼び出してテストできることが望ましいです。
簡単な例として、ボタンを表示するだけのコンポーネントをテストしてみます。
ボタンを押すとダイアログが出ます。
最初に考えたこと：QUnitやOPA5の仕組みは使えないか？
QUnit
QUnitはロジックのテスト向けなので、コンポーネントの動きを確認する今回の用途には不向きと思われました。ただし、標準ライブラリ（sap.mなど）ではコントロールで定義されたメソッドの動作確認のためにQUnitが使われていたので、これは別の機会にトライしてみます。
OPA5
OPA5を使ってライブラリのテストをしている例が見当たりませんでした。また、コンポーネントを組み込んだアプリ側でOPA5を使用してみたところ、なぜかコンポーネントを認識しなかったので断念しました。
方針
自動テストはあきらめ、ブラウザで動作確認することにとどめました。
参考にしたのは、以下のブログです。
Create your own UI5 Library for UI5Lab
※実行環境:WebIDE
ステップ
- ライブラリの中にテスト用のフォルダを作成する
- library.jsonファイルを作成する
- テスト用のhtmlを作成する
1. ライブラリの中にテスト用のフォルダを作成する
テスト用のフォルダはtestフォルダ配下に、ライブラリのフォルダ構成と同じパスになるように作成します。
2. library.jsonファイルを作成する
library.jsonファイルには、ライブラリの名前を入れます。
{
"libraries": [
"demo.library.zdemolibrary"
]
}
3. テスト用のhtmlを作成する
参考にしたブログに倣い、テスト用ファイルはsampleフォルダ配下に置きました。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Example - demo.library.zdemolibrary.myButton</title>
<script id="sap-ui-bootstrap"
type="text/javascript"
data-sap-ui-libs="demo.library.zdemolibrary"
src="../../../../../resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
>
</script>
<script type="text/javascript">
sap.ui.getCore().attachInit(function () {
sap.ui.component({
name: "demo.library.zdemolibrary.myButton",
settings: {},
componentData: {},
async: true,
manifest : true
}).then(function(oComp){
var oContainer = new sap.ui.core.ComponentContainer({
component: oComp
});
oContainer.placeAt("content");
}.bind(this)).catch(function(oError) {
jQuery.sap.log.error(oError);
});
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
src="../../../../../resources/sap-ui-core.js"の../../../../../部分は、htmlファイルが置かれている場所からtestフォルダまでの相対パスになっています。
中央のscriptの中で、通常コントローラーでやるのと同じ方法でコンポーネントを生成してbodyに配置します。
実行結果
myButton.htmlを実行すると以下のようになります。これでライブラリの中で動作確認ができるようになりました。
ボタン押下後
参考
ライブラリのソース
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/m/Button",
"sap/m/MessageBox"
], function (UIComponent, Button, MessageBox) {
"use strict";
return UIComponent.extend("demo.library.zdemolibrary.myButton.Component", {
metadata: {
manifest: "json"
},
init: function () {
UIComponent.prototype.init.apply(this, arguments);
},
destroy: function () {
UIComponent.prototype.destroy.apply(this, arguments);
},
createContent: function () {
var oButton = this._getButton();
return oButton;
},
onPress: function () {
MessageBox.alert("Component Button pressed!");
},
_getButton: function () {
if (!this.oButton) {
this._oButton = new Button("button123", {
text: "myButton",
type: "Emphasized",
press: this.onPress
});
}
return this._oButton;
}
});
});