Skip to Content
Technical Articles

Make Fiori testing smart again! openui5-smart-mockserver to the rescue!

The time has come! Finally, automated testing has become a thing in SAP world. People are talking about it, using it on their real life projects and even setting it up as part of CI/CD pipelines. Testing automation in SAP still has a long way to go to get anywhere near the spot Java and other communities are. But we’re getting there. I’m not saying it’s because of the lack of tools, we do have the right tools for it now, especially for Fiori/UI5. The problem is culture. Unfortunately, in SAP projects, we “never” have time for automated testing. However, somehow we’re always allowed time for rework…

I won’t write a blog about the the reasons behind the lack of support, in terms of culture, for automated tests in SAP projects. This blog is about improving the quality of our tests! How we can make it a little bit better with a simple step.

We all know sap.ui.core.util.MockServer and how important it’s for testing Fiori apps. You can find heaps of blogs about it here. If you have no clue what is it, follow a simple explanation extracted from its documentation:

(sap.ui.core.util.MockServer) Creates a mocked server. This helps to mock all or some backend calls, e.g. for OData/JSON Models or simple XHR calls, without changing the application code. This class can also be used for qunit tests.

Which means, MockServer mimics your backend server, it intercepts all backend calls and returns whatever you want as a response. You don’t need to change anything in your application for it. It’s perfect for testing purposes!

Basically, you can make MockServer respond to the app’s backend calls in two ways: using manually predefined JSON files or automatically based on the OData metadata. Both ways are fine for testing.

Creating the predefined JSON files is a bit of a hassle to me. It’s boring, you need to do everything manually and the data is going to be ALWAYS the same. There won’t be any variation which makes harder to get some bugs, especially in case your data is biassed. The bright side is you can have high quality data as you are responsible for everything.

Using OData metadata to generate the responses automatically is really good because you can focus on writing your tests rather than on creating data sets for testing. On the other hand, it has one downside, the data quality is very low, it has no semantics whatsoever. For instance, you have an Entity called Customer with fields called Name, Email and Website. MockServer will generate a response like this: { Name: “Name 1”, Email: “Email 1”, Website: “Website 1” }. IMO, not good.

MockServer is also great for demo purposes. You have developed an awesome app to showcase in an important meeting. It was just a demo (they said), you had a very short deadline, no time for preparing the backend, it was only the UI, so you decided to use MockServer to mimic a backend. Sounds familiar? Probably, you faced the same issues mentioned above, either heaps of manual work or low quality data.

Thinking about both cases, automated testing and demos, I decided to create a plugin to extend MockServer and make it return more meaningful data which has semantics and is not hard coded. A MockServer a bit smarter. I called it openui5-smart-mockserver.

Data generated by MockServer

Data generated by Smart MockServer

 

Consuming OpenUI5 Smart MockServer

OpenUI5 Smart MockServer uses an open source library called Faker.js to generated better mock data. You can use it with zero extra code just like the standard MockServer based on OData metadata + OData Annotations, just plug and play. Or, creating rules for the fields you want to get high quality fake data. If a field doesn’t have any rule (annotation or manual), the data will be generated by the standard MockServer.

In all cases, you just need to replace the standard sap.ui.core.util.MockServer by the new openui5.smartmockserver.SmartMockServer in your mockserver.js (the file where you defined the MockServer to be used on your app).

sap.ui.define([
    "openui5/smartmockserver/SmartMockServer"
], function (SmartMockServer) {
    "use strict";

    return {
        init: function () {
            var oMockServer = new SmartMockServer({ rootUri: "/" });

            [...]
            
        }
    };
});

 

OData Annotations sap:semantics

Pretty much nothing to do here. No writing code involved. You just need to make sure to be using SAP Semantics Annotations.

You might have something like this on your OData metadata:

<Property Name="Email" Type="Edm.String" sap:semantics="email"/>

 

OData Annotations smartmockserver:rules

Same concept as before. No writing code involved. You just need to add smart rules annotations to the OData metadata. All Faker.js methods are available.

You might have something like this on your OData metadata:

<Property Name="Email" Type="Edm.String" smartmockserver:rule="internet.email"/>

 

Smart Rules defined manually for fields without OData Annotations

This is the hardest one. You touch neither the OData metadata nor the app. You only add some code to your mockserver.js for the fields you want meaningful mock data.

The end result with the extra code would be similar to this:

sap.ui.define([
    "openui5/smartmockserver/SmartMockServer"
], function (SmartMockServer) {
    "use strict";

    return {
        init: function () {
            var oMockServer = new SmartMockServer({ rootUri: "/" });
            oMockServer.simulate("../localService/metadata.xml", {
                bGenerateMissingMockData: true
            });


            //Create a Smart MockServer rule
            const smartRules = [{
                entityName: 'Customer ', //Entity name
                properties: [{
                    name: 'Email', //Property name
                    fakerMethod: 'internet.email' //Fakerjs method to be called
                }]
            }];
            //You call only one extra method for meaningful mock data
            //for fields without OData SAP Semantics (sap:semantics)
            oMockServer.setSmartRules(smartRules);


            oMockServer.start();
        }
    };
});

 

 

You can see a demo here: https://mauriciolauffer.github.io/openui5-smart-mockserver/demo/webapp/index.html

The project is available on GitHub and NPM. You can check the demo source code on “demo” project’s folder.

I hope you have enjoyed. Happy testing 😉

 

5 Comments
You must be Logged on to comment or reply to a post.