SAPUI 5(23)-mock serverを使ってo Dataプロバイダをシミュレートする

シミュレーションサーバの役割
すべてのアプリケーションはCRUD動作に関連しています。Oneui 5は本当のシーンではoDataと後端SAPシステムを通じて相互作用します。しかし、開発過程では、テストの必要性のために、シミュレーションサーバを使用することができます。openui 5は、シミュレーションサーバをmock serverと呼びます。シミュレーションサーバの基本機能は、エミュレーションoDataデータプロバイダであり、アプリケーションのhttpまたはhttps要求を取得し、シミュレーション要求の応答を返信する。openui 5が開発したこの側からは，実後端との結合を低減できる。
mock server簡単紹介
openui 5は自分のmocke serverモジュールがありますが、ここでは「SAPUI 5 Commprehensive Guide」を参照して、もう一つのフレームを使います。CRUD操作に対応しています。基本的な使い方は以下の通りです。

は、FakeRest.min.jsファイルをwebappのserviceフォルダの下に置く。また、jsファイルへの参照を追加します。

は、mockServerTest.htmlファイルをwebappの のtestフォルダに く。テストコードに します。

ローディングsinonモジュール

jQuery.sap.require("sap.ui.thirdparty.sinon");

データをロードし、フェイクセーバーとsinon server

を する。

var data = {
    'authors': [
        { id: 0, first_name: 'Leo', last_name: 'Tolstoi' },
        { id: 1, first_name: 'Jane', last_name: 'Austen' }
    ],
    'books': [
        { id: 0, author_id: 0, title: 'Anna Karenina' },
        { id: 1, author_id: 0, title: 'War and Peace' },
        { id: 2, author_id: 1, title: 'Pride and Prejudice' },
        { id: 3, author_id: 1, title: 'Sense and Sensibility' }
    ],
    'settings': {
        language: 'english',
        preferred_format: 'hardback',
    }
};
    
// initialize fake REST server
var restServer = new FakeRest.Server();
restServer.init(data);

// use sinon.js to monkey-patch XmlHttpRequest
var server = sinon.fakeServer.create();
server.respondWith(restServer.getHandler());

mock serverで、 の を しました。

//   GET       author
var req = new XMLHttpRequest();
req.open("GET", "/authors", false);
req.send(null);
console.log(req.responseText);

//   GET       book:/books/3
req = new XMLHttpRequest();
req.open("GET", "/books/3", false);
req.send(null);
console.log(req.responseText);

//   POST      
req = new XMLHttpRequest();
req.open("POST", "/books", false);
var updateData = JSON.stringify({
    id: 4, author_id:1, title:'Emma'});
req.send(updateData);
console.log(req.responseText);

//   PUT      
req = new XMLHttpRequest();
req.open("PUT", "/books/2", false);
var modifyData = JSON.stringify({
    title:'     '});
req.send(modifyData);
console.log("  ：");
console.log(req.responseText);

//   GET       books
req = new XMLHttpRequest();
req.open("GET", "/books", false);
req.send(null);
console.log("   ：");
console.log(req.responseText);

// Delete  
req = new XMLHttpRequest();
req.open("DELETE", "/books/4", false);
req.send(null);
console.log("  ：");
console.log(req.responseText);

//   GET       books
req = new XMLHttpRequest();
req.open("GET", "/books", false);
req.send(null);
console.log("   ：");
console.log(req.responseText);

mock serverを むコードフレームを します。
index.
たちが した が えるにつれて、プロジェクトファイルに まれているファイルもますます になりました。 の を にするために、スタートコードのフレームを りたいです。ファイル は の りです。
Project Files
スタートコードは できるはずです。 を する は、できるだけ しないようにします。まずindex.htmlを に ました。

    



    sap.ui.getCore().attachInit(function() {
        sap.ui.require([ 
                "sap/m/Shell",
                "sap/ui/core/ComponentContainer",
                "stonewang/sapui5/demo/Component",
                "sap/ui/thirdparty/sinon" 
        ], 
                
        function(Shell, ComponentContainer, Component) {

            jQuery.ajax({
                url : "service/suppliers.json",
                success : function(oData) {
                    initAppWithFakeRest(oData);
                },
                error : function() {
                    alert("Could not start server");
                }
            });

            var initAppWithFakeRest = function(oData) {
                // initialize fake REST server
                var restServer = new FakeRest.Server();
                restServer.init(oData);

                var server = sinon.fakeServer.create();
                server.xhr.useFilters = true;
                server.autoRespond = true;
                server.autoRespondAfter = 0;

                server.xhr.addFilter(function(method, url) {
                    //whenever the this returns true the request will not faked
                    return !url.match(/Suppliers/);
                });

                // use sinon.js to monkey-patch XmlHttpRequest
                server.respondWith(restServer.getHandler());

                // initialize the UI component
                new Shell({
                    app : new ComponentContainer({
                        height : "100%",
                        component : new Component({
                            id : "mvcAppComponent"
                        })
                    })
                }).placeAt("content");
            }
        });
    });




    

代码说明：

• jQuery.ajax通过url参数加载文本文件，如果加载成功，执行initAppWithFakeRest，如果失败，提示不能启动服务器。

jQuery.ajax({
    url : "service/suppliers.json",
    success : function(oData) {
        initAppWithFakeRest(oData);
    },
    error : function() {
        alert("Could not start server");
    }
});

はinitAppWithFakeRest関数において、fake server、sinon server、compnent conatoiner、component:

を初期化する。

var initAppWithFakeRest = function(oData) {
    // initialize fake REST server
    var restServer = new FakeRest.Server();
    restServer.init(oData);

    var server = sinon.fakeServer.create();
    server.xhr.useFilters = true;
    server.autoRespond = true;
    server.autoRespondAfter = 0;

    server.xhr.addFilter(function(method, url) {
        //whenever the this returns true the request will not faked
        return !url.match(/Suppliers/);
    });

    // use sinon.js to monkey-patch XmlHttpRequest
    server.respondWith(restServer.getHandler());

    // initialize the UI component
    new Shell({
        app : new ComponentContainer({
            height : "100%",
            component : new Component({
                id : "mvcAppComponent"
            })
        })
    }).placeAt("content");
}

Component.jsComponent.jsにおいて、jQuery.ajax方法によってGET要求が開始され、要求が成功すると、appication modelがoDataに設定される。

sap.ui.define([
          "sap/ui/core/UIComponent",
          "sap/ui/model/resource/ResourceModel",
          "sap/ui/model/json/JSONModel",
          "stonewang/sapui5/demo/model/AppModel"
    ], 
      
    function (UIComponent, ResourceModel, JSONModel, AppModel) {
        "use strict";

        return UIComponent.extend("stonewang.sapui5.demo.Component", {
        
            metadata : {
                manifest: "json"
            },

            init : function () {
                // call the base component's init function
                UIComponent.prototype.init.apply(this, arguments);              
                
                 var oAppModel = new JSONModel("/Suppliers");           

                 // set application data
                jQuery.ajax({
                    type : "GET",
                    contentType : "application/json",
                    url : "/Suppliers",
                    dataType : "json",
                    success : function(oData) {
                        oAppModel.setData(oData);
                    },
                    error : function() {
                        jQuery.sap.log.debug(
                            "Something went wrong while retrieving the data");
                    }
                });             
                
                this.setModel(oAppModel);
                
                // create the views based on the url/hash
                this.getRouter().initialize();
            } // end of init function
        });
});

起動時にnot Foundビューに入るよう設定します。manifest.json で、patternが空に設定された場合、targtはnot Foundとなり、not foundビューに入るようになります。後で修正します。

"routes": [
    {
        "pattern": "",
        "name": "notFound",
        "target": "notFound"
    }

not Foundビュー

本編のフレームコードを構築し、後はアナログサーバーを使って添削調査の基礎とします。
ソースコード
23_ズイ5_mock_server_スカルトン
参照

FakeReset