Step 27: Mock Server Configuration


We just ran our app against a real service, but for developing and testing our app we do not want to rely on the availability of the “real” service or put additional load on the system where the data service is located.


Step 27: Mock Server Configuration - 第1张  | 优通SAP


You can view and download all files at Walkthrough – Step 27.

Step 27: Mock Server Configuration - 第2张  | 优通SAP

Folder Structure for this Step

The folder structure of our app project is clearly separating test and productive files after this step. The new test folder
now contains a new HTML page mockServer.html which will launch our application in test mode without calling the
real service.

The new localService folder contains a metadata.xml service description file for OData, the
mockserver.js file that simulates a real service with local data, and the mockdata subfolder that
contains the local test data (Invoices.json).

3.webapp/test/mockServer.html (New)

We copy the index.html to a separate file in the webapp/test folder and name it
mockServer.html. We will now use this file to run our app in test mode with mock data loaded from a JSON file.
Test pages should not be placed in the application root folder but in a subfolder called test to clearly separate
productive and test coding.

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. If the request fails, the list of invoices will stay empty.


We modify the mockServer.html file and change the page title to distinguish it from the productive start page. In
the bootstrap, the data-sap-ui-resourceroots property is also changed. The namespace now points to the folder above
(“../”), because the mockServer.html file is now in a subfolder of the
webapp folder. Instead of loading the app component directly, we now call a script

6.webapp/test/initMockServer.js (New)

The first dependency is a file called mockserver.js that will be located in the localService folder

The mockserver depencency that we are about to implement is our local test server. Its init method is
immediately called before we load the component. This way we can catch all requests that would go to the “real” service and process
them locally by our test server when launching the app with the mockServer.html file. The component itself does not
“know” that it will now run in test mode.

7.webapp/localService/mockdata/Invoices.json (New)

The Invoices.json file is similar to our previous file in the
webapp folder. Just copy the content and remove the outer
object structure with the key invoices so that the file consists of
one flat array of invoice items. This file will automatically be read by our server
later in this step.

Remove the old Invoices.json file from the webapp folder, it
is no longer used.

8.webapp/localService/metadata.xml (New)

The metadata file contains information about the service interface and does not need to be
written manually. It can be accessed directly from the “real” service by calling the
service URL and adding $metadata at the end (e.g. in our case$metadata).
The mock server will read this file to simulate the real OData service, and will
return the results from our local source files in the proper format so that it can
be consumed by the app (either in XML or in JSON format).

For simplicity, we have removed all content from the original Northwind OData metadata
document that we do not need in our scenario. We have also added the
status field to the metadata since it is not available in the
real Northwind service.

9.webapp/localService/mockserver.js (New)

Now that we have added the OData service description file
metadata.xml file, we can write the code to initialize the mock
server which will then simulate any OData request to the real Northwind server.

We load the standard SAPUI5
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 has to be exactly the same as the uri that is defined for the data
source in the manifest.json descriptor file. This can be an absolute or, for example in SAP Web IDE, a relative URL to a destination. The URL will now be served by our test
server instead of the real service. 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.

Try calling the app with the index.html file and the mockServer.html file to see the difference. If the real
service connection cannot be made, for example when there is no network connection, you can always fall back to the local test


  • The webapp/test folder contains non-productive code only.


  • Mock data and the script to start the MockServer are stored in the
    webapp/localService folder.


  • The script to start the MockServer is called




14 + one =