In this tutorial, I will explain how to run SAPUI5
applications through mockserver with the dummy data, i.e mock Data
For development an d testing purpose, one must make use of
mockserver. Since, the availability of the real time server is a question,
therefore it is recommended for the testing purpose, mock data is used in place
of the actual data coming from the real server.
It is created at the system level itself, so that when the
actual server is not available, testers can make use of this server and test
their applications with ease without worrying the availability of actual data.
Now for the purpose of mockserver, developers often make mock data similar to
the actual data. It serves local files, but it simulates a back-end system more
realistically than just loading the local data
The mock server runs on the client and only uses the server
terminology of 'start' and 'stop'. It does not require a
network connection since there is no actual server involved.
The mock server needs the following require
statement:
jQuery.sap.require("sap.ui.core.util.MockServer");
Files that are needed:
mockServer.html
(Similar to index.html)
This file is similar to index.html file, just the difference
here is we provide the destination of mockserver.js , the title can be changed
accordingly, moreover the path also is chaged. This file is now placed in a
test folder within webapp, i.e
webapp/test/mockServer.html.
Example Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta charset="utf-8">
<title>Mock Data</title>
<script
id="sap-ui-bootstrap"
src="/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt":
"../"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function () {
sap.ui.require([
"sap/ui/demo/wt/localService/mockserver",
"sap/m/Shell",
"sap/ui/core/ComponentContainer"
], function (mockserver,
Shell, ComponentContainer) {
mockserver.init();
new Shell({
app : new
ComponentContainer({
height: "100%",
name: "sap.ui.demo.wt"
})
}).placeAt("content");
});
});
</script>
</head>
<body class="sapUiBody"
id="content">
</body>
</html>
We copy the index.html to a separate file
in the webapp/test folder and name it mockServer.html.
From this point on, you have two different entry pages, one for
the real “connected” app (index.html) and one for local
testing (mockServer.html). You can freely decide if you want
to do the next steps on the real service data or on the local data within the
app. If no connection to the real service is available or the proxy
configuration from the previous step does not work, you can always use the mockServer.html
file. This will display the app with simulated test data. The index.html
file will always load the data from a remote server.
metadata.xml
The metadata file contains information about the service interface
and does not need to be written manually. If you are using a particular OData
service, then to create metadata of the
particular service. To do so, call the
metadata of the service in a browser and save it into metadata.xml (e.g http://services.odata.org/V2/Northwind/Northwind.svc/$metadata). Create a folder within webapp and set the
name as localService. Now keep the metadata.xml file within the folder.
Mock data (json
files)
You can let the mock server generate random mock data
automatically based on services metadata. For this, provide only the path to
the metadata file and omit the second parameter of the simulate function as
follows:
// url to the service metadata
document
var sMetadataUrl =
"testdata/rmtsampleflight/metadata.xml";
oMockServer.simulate(sMetadataUrl);
You can provide your own mock data in .json files, which can
either be created manually or saved from an OData service response. Mock data
in JSON format can be generated from an OData service by adding the $format=json
parameter to the URL. Save the browser response which is called <entity
type name>.json, for example Mock.json and put it
into the mock data folder. Add the path to the simulate function
mockServer.js
We load the MockServer module as a
dependency and create a helper object that defines an init
method to start the server. This method is called before the component
initialization in the mockServer.html file above.
The init method creates a MockServer instance
with the same URL as the real service calls.
The URL in configuration parameter rootURI
will now be served by our test server instead of the real service. It matches
the URL of our data source in the descriptor file. Next, we set two global
configuration settings that tell the server to respond automatically and
introduce a delay of one second to imitate a typical server response time.
Otherwise, we would have to call the respond method on the MockServer
manually to simulate the call.
To simulate a service, we can simply call the simulate
method on the MockServer instance with the path to our newly
created metadata.xml. This will read the test data from our
local file system and set up the URL patterns that will mimic the real service.
Finally, we call start on oMockServer. From
this point, each request to the URL pattern rootURI will be
processed by the MockServer. If you switch from the index.html
file to the mockServer.html file in the browser, you can now see
that the test data is displayed from the local sources again, but with a short
delay. The delay can be specified with the URI parameter serverDelay,
the default value is one second.
This approach is perfect for local testing, even without any
network connection. This way your development does not depend on the
availability of a remote server, i.e. to run your tests.
sap.ui.define([
"sap/ui/core/util/MockServer"
], function (MockServer) {
"use strict";
return {
init: function () {
// create
var oMockServer = new MockServer({
rootUri: "/destinations/northwind/V2/Northwind/Northwind.svc/"
});
var oUriParameters
= jQuery.sap.getUriParameters();
// configure
MockServer.config({
autoRespond: true,
autoRespondAfter:
oUriParameters.get("serverDelay") || 1000
});
// simulate
var sPath =
jQuery.sap.getModulePath("sap.ui.demo.wt.localService");
oMockServer.simulate(sPath + "/metadata.xml", sPath + "/mockdata");
// start
oMockServer.start();
}
};
});
mockServer.js file is placed in test folder, i.e
webapp/test/mockServer.js
Here is the sample project structure snapshot
This was all about Mock Server, in
the next blog I will show you how to create MockServer with SAP Web IDE.
For any queries, mail me at sapui5tutors@gmail.com. If you loved my tutorials, comment down below your views.
It always inspires me for making better blogs and stay tuned for more
tutorials!!
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon