The Subtle Way to Test SAPUI5 App with OData Mock Data with SAP Web IDE

In the SAPUI5 SDK Documentation, there are several topics explaining how to configure an OData Mock Server to test your app:

• Get Started: Walkthrough – Step 27
• Get Started: Mock Server
• Essentials: Testing – Mock Server

All these resources describe how to manually set up an OData Mock Server in your app but, if you use the SAP Web IDE, there is a more subtle way to do it without the need to painfully configure the server as stated in the aforementioned documentation.

This feature is officially described in the SAP Web IDE Documentation.

In SAP Web IDE, open your SAPUI5 project “Run Configurations” dialog and select the “Run with mock data” checkbox.

Then you have to configure the Mock Data usage in your SAPUI5 project settings. Don’t forget to save your settings once done.

“Root URI” and “Metadata” are not editable here because they are already set in app manifest.

If you choose to mock data from JSON files, you have to create a JSON file for each entity set in the localService/mockdata folder (here the entity set is called “Details”). If an entity set has no corresponding file in this folder, data are automatically generated by the Mock Server.

(If you prefer, you can also edit your Mock Data with the SAP Web IDE built-in Mock Data Editor as mentioned in this blog.)

If you run your new configuration, you’ll see your Mock Data in your application.

Subtle, isn’t it?

Actually the Mock Server is initialized for you by the SAP Web IDE in a runtime generated file called “extended_runnable_file.html” that appears in the “Sources” tab of your browser developer tools.

As you can see in the next picture, a script tag has been injected in the original “index.html” file with the code required to create an instance of sap.ui.core.util.MockServer with the configuration previously set in your project.

That’s all Folks!