The Subtle Way to Test SAPUI5 App with OData Mock Data with SAP Web IDE (part 2)

In part 1, you were shown how to configure an SAPUI5 project in SAP Web IDE to use an OData Mock Server without having to take care of its initialization. In this part, I’ll show you how to configure it to handle Custom OData Mock Requests. It could be really helpful if you need to mock a Function Import for instance as mentioned here.

This feature is officially described in the SAP Web IDE Documentation but there is an error in the given example that prevent it from working.

First thing, you need to configure your SAPUI5 project as illustrated in the next picture. Don’t forget to save your settings once done.

Then you can create an empty “mockRequests.js” file in the “webapp/localService” folder of you SAPUI5 project.

Now if you run your SAPUI5 project via a Run Configuration with Mock Data, you can see in your browser developer tools that a new script tag referencing your newly create file has been added by SAP Web IDE  to the “extended_runnable_file.html” file.

Moreover your can also notice that your file is well loaded by your app.

In the official documentation, there is an example of a mockRequests.js file.

Unfortunately there is a mistake in this example that you need to correct if you want your Custom Mock Requests to work. Actually the problem is that the given example declare a module called “dev1.model.mockRequets” but, as you can see it in the next picture, the generated “extended_runnable_file.html” expects it to be called “webide.mock.ext.mockRequests“.

Here you are the corrected example:

jQuery.sap.declare("webide.mock.ext.mockRequests");

webide.mock.ext.mockRequests = {}; 

webide.mock.ext.mockRequests.getRequests = function() {
    return [ webide.mock.ext.mockRequests.mockAddFunctionImport() ];
};

webide.mock.ext.mockRequests.mockAddFunctionImport = function() {
    return {
        method : "GET",
        path : new RegExp("SomeAction"),
        response : function(oXhr) {
                oXhr.respondJSON(204);
        }
    };
};

Of course it’s just a sample so you need to configure your Custom Mock Requests according to your own requirements.

Don’t hesitate to set a breakpoint in your “mockRequests.js” file in order to make sure it’s called at runtime.

That’s all Folks!