SAP CF環境でMock Serverの設定をしてみる

13144 ワード
KYOSO SAP SAPUI5 Fiori SAP テキストリンク

はじめに

どうもこんにちは！
SAP CF環境でMock Serverの実装を行う機会があったのでその手順を備忘録として記事を書かせていただきます。
作成手順は以下の記事を参考にしています。
【SAPUI5】Mock Serverの設定を一からやってみる

前提

oDataの呼び出しを行っているSAPUI5 Fiori画面が作成されていることを前提として話を進めます。

metadataファイル作成

Mock Serverを立てたい画面モジュールのwebapp配下にlocalServiceというフォルダを作成します。
その後作成したlocalService配下に画面で呼び出しているAPIのmetadataをダウンロードし、先ほど作成したlocalService配下にmetadata.xmlという名前で保存します。
（metadataは取得したいAPIのサービスURLの配下に/$metadataを付与してアクセスすることでmetadata内容を確認できます。）

mockserver.jsファイル作成

先ほど作成したlocalService配下にmockserver.jsファイルを作成し、以下のソースコードを自身のプロジェクトに合うよう変更し保存する。

mockserver.js
sap.ui.define(
    ["sap/ui/core/util/MockServer"],
    function(MockServer) {
        var oMockServer;
        return {
            init: function() {
                oMockServer = new MockServer({
                    //manifest.jsonで定義したdataSourcesのuriと同じ
                    rootUri: "/TEST/odata/v2/"
                });

                //自動的にレスポンスを返すための設定
                MockServer.config({
                    autoRespond: true,
                    autoRespondAfter: 1000
                });

                //metadata.xmlへのパス
                var sPath = jQuery.sap.getModulePath("developBase.demo.localService");
                var sMetaPath = sPath + "/metadata.xml";

                oMockServer.simulate(sMetaPath, {
                    //モックデータのパス
                    sMockdataBaseUrl: sPath + "/mockdata",
                    //データがなかったら自動生成する
                    bGenerateMissingMockData: true
                });
                //Mockサーバーを起動
                oMockServer.start();
            }
        };
    }
);

MockServerを定義する際に指定するrootUriにはmanifest.jsonのdataSourceにて指定している
Mock Serverに置き換えたいサービスのURIを指定してください。
この時rootUriに指定するURIの末尾に必ず"/"を付けるよう注意してください。
（末尾が"/"じゃないと正しくMock ServerがURIに設定されない）

flpSandboxMockserver.html作成

webapp/testフォルダの配下にflpSandboxMockserver.htmlを作成し、以下のソースコードを自身のプロジェクトに合うよう変更し保存します。

flpSandboxMockserver.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MockServer_Test</title>
    <script>
        window["sap-ushell-config"] = {
            defaultRenderer: "fiori2",
            renderers: {
                fiori2: {
                    componentData: {
                        config: {
                            search: "hidden"
                        }
                    }
                }
            },
            applications: {
                "demo": {
                    additionalInformation: "SAPUI5.Component=developBase.demo",
                    applicationType: "URL",
                    "url": "../",
                    description: "Mock Server demo",
                    title: "demo"
                }
            }
        };
    </script>
    <script src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js">
    </script>
    <script id="sap-ui-bootstrap" 
            src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
            data-sap-ui-libs="sap.ushell, sap.collaboration, sap.m, sap.ui.layout, sap.f" 
            data-sap-ui-theme="sap_belize" 
            data-sap-ui-preload="async" 
            data-sap-ui-compatVersion="edge"
            data-sap-ui-resourceroots='{"developBase.demo": "../"}' 
            data-sap-ui-frameOptions='allow'>
    </script>
    <script>
        sap.ui.getCore().attachInit(function() {
            sap.ui.define(["developBase/demo/localService/mockserver"],
                function(mockserver) {
                    mockserver.init();
                });
            sap.ushell.Container.createRenderer().placeAt("content");
        });
    </script>
</head>

<body class="sapUiBody" id="content">
</body>

</html>

このファイルはindex.htmlよりも1階層下であるlocalServiceの下に置かれるため
data-sap-ui-resourcerootsで指定するPathも一段下にするよう注意してください。

この時点でMock Serverはすでに起動している段階です。
実際にデータを取ってみるとランダムなデータが取得してこれます。

テストデータの作成

Mock Serverができたので実際にテストデータを作成していきます。
localService配下にmockdataというフォルダを作成します。
その後作成したmockdata配下に対応するEntity Set名に合わせたjsonファイルを作成します。
（ブラウザなどでEntity Setを取得するクエリを実行して結果を保存したものをファイルで保存）

画面を起動し、データを確認する

Run Configurationsを開きます

+ボタンを押下し,Run as Web Applicationを選択します。

File NameでflpSandboxMockserver.htmlを指定し、Save and Runを押して画面を実行しデータ部分を確認します。

終わりに

参考にした記事（【SAPUI5】Mock Serverの設定を一からやってみる）ではNeo環境での実装だったためneo-app.jsonに接続先設定などを行っていましたが、CF環境ではneo-app.jsonを参照しないため、その部分の手順を行わなくても実装が可能でした。