Commemorating the Trojan hero Sinon-Introduction to the steps and working principle of SAP UI5 Mock Server

This is Jerry's 63rd article in 2021, and it is also the 340th original article in Wang Zixi's public account.

                                                 蜀相
                                                 杜甫

                                          丞相祠堂何处寻，
                                          锦官城外柏森森。

                                          映阶碧草自春色，
                                          隔叶黄鹂空好音。

                                          三顾频烦天下计，
                                          两朝开济老臣心。

                                          出师未捷身先死，
                                          长使英雄泪满襟。

Jerry ago an article add JSON OData model and model of SAP UI5 table control line items and delete Based , compared to differentiate models using OData and JSON model of SAP UI5 form controls.

When SAP UI5 beginners learn to use OData API, one of the problems they face is how to find some OData services that can be used free of charge on the public network.

Northwind is undoubtedly one of the best choices, but the service does not support modification operations.

Although in theory, we can use this article by Jerry, the introduction of SAP Cloud Application Programming (2021 update), adopt the SAP Cloud Application Programming model (CAP), and build a local OData service that supports addition, deletion, modification, and checking. But for beginners learning SAP UI5, it is a little overkill.

In fact, SAP UI5 comes with an easy-to-use Mock Server that can be used to simulate OData service providers locally, respond to OData requests initiated by SAP UI5 applications, and reply with pre-configured test data.

Log in to the official website of SAP UI5 and enter the keyword Mock Server to find its usage documentation:

https://sapui5.hana.ondemand.com/

The operation of the Mock Server is completely transparent to the SAP UI5 application. The SAP UI5 application does not know whether the request sent by it is responded by the real remote server or returned by the Mock Server.

https://sapui5.hana.ondemand.com/

The following is a practical example to introduce the steps of using Mock Server. The entire code of this example is available on my Github:

https://github.com/wangzixi-diablo/ui5-toolset/tree/main/tabledelete/webapp

(1) In the Table controller, create a new OData model instance and pass in the OData service url:

/here/goes/your/serviceUrl/

The url is the address of the OData service that we need to simulate in the Mock Server.

(2) Create a new test folder in the local project file, which contains the following three files:

metadata.xml: The metadata file of the OData service. It defines an EntitySet named Products whose type is Product. The latter contains three fields:

ProductId
Name
Size

Products.json

Contains the data corresponding to the EntitySet named Products defined in the metadata.xml file above. When running, Mock Server will automatically find a .json file with the same name in its working directory, read its content, and return it to the consumer of the OData service.

server.js

Import the implementation of Mock Server from sap/ui/core/util/MockServer, and pass the OData service URL that SAP UI5 needs to consume in step one into the rootUri property of Mock Server.

The autoRespondAfter property in the figure below defines the delay for using Mock Server to respond to OData requests, that is, the response is returned after 1 second.

The total number of lines in the three files is less than 60 lines, but it provides a fully functional Mock Server.

(3) In the index.html of the SAP UI5 application, use sap.ui.require to load the Mock Server instance in the local project and call its init method to start the server.

Clone Jerry's code to the local, execute node local.js after npm install:

https://github.com/wangzixi-diablo/ui5-toolset

You can observe the operation of Mock Server in Chrome Developer Tools:

http://localhost:3002/tabledelete/?sap-ui-debug=true

(1) The SAP UI5 table control requests the metadata of the OData service. Mock Server receives the request and returns the content of metadata.xml in the working directory to the caller.

(2) Jerry's previous article is based on the implementation of adding and deleting SAP UI5 table control line items based on the OData model and the JSON model. It was mentioned that the OData model is a server-side model, which means that the table control does not know how many pieces of data there are currently. Need to show.

Therefore, the SAP UI5 table control will send another OData request containing the $count operation to query the total number of Products.

The final number of items displayed in the table control is the result of the $count operation and the smaller value of 20. 20 is the default size of OData pagination, which is described in detail in Jerry's article SAP UI Search Pagination Technology.

Because I only maintain two pieces of data in Products.json of Mock Server, the result of $count is 2.

(3) Now the table control has made it clear that it needs to display two pieces of data, so it initiates the third OData data request, $skip=0&$top=2, to request the first two pieces of data on the first page from the server.

Mock Server receives the request and returns all two pieces of data in Products.json to the table control.

(4) After using the Add Row button to add a new piece of data, the SAP UI5 table control sends the following three OData requests in sequence:

The execution logic of the delete operation is similar, so I won't repeat it here.

Some advanced usages of SAP UI5 Mock Server can be obtained by querying the help documentation of Mock Server.

For example, suppose we expect to perform some custom processing on the data returned by the Mock Server to the caller. At this point, you can write custom logic in the attachAfter hook function provided by Mock Server:

As shown in the figure above, when the data in the Products.json file is loaded by the Mock Server and is ready to be returned to the OData consumer, the attachAfter callback function written by the application developer is triggered, adding a period to the end of the Name field value of each product.

SAP UI5 Mock Server is actually based on the famous open source Mock framework Sinon.js:

https://github.com/sinonjs/sinon

The Sinon frame is named to pay tribute to the heroic warrior Sinon (西农) who emerged during the ten-year war between the Greek coalition forces and the Trojans. This is the picture below:

In order to break through the fortified city of Troy, Odysseus in the Greek Allied Forces came up with a "trojan horse strategy": to hide soldiers in the belly of the Trojan horse, and when the Trojans drag the horse into the city, when the night is dead, the soldiers inside the Trojan horse rush out. , The inside should be combined with the outside, and the city of Troy was won.

Sinon bravely took on the arduous task of inducing the Trojans to drag the Trojan horse into the city. He successfully played the role of a spy (Spy). With his outstanding acting skills, the Trojan King firmly believed that the Trojan horse was a "mascot" for Troy.

When the Sinon-based SAP UI5 Mock Server is started through the init method, Sinon.useFakeXMLHttpRequest will be called to implement Sinon's forged FakeXMLHttpRequest and replace the Window's global XMLHttpRequest to complete the day-to-day change.

This replacement, the average SAP UI5 developer would not know if he did not step through the Sinon source code. This situation is a bit like the scene of the soldiers of the Greek coalition army hiding in the Trojan horse and sneaking into the city of Troy without knowing it.

It is worth mentioning that the working principle of Sinon is different from the HTTP Intercept in Java and Angular. In the working scenario of the HTTP interceptor, the HTTP request can be processed by the interceptor written by the framework or application developer at two points in time:

After the program code calls the API to send the HTTP request, before the HTTP request is actually sent from the browser, it is preprocessed by the interceptor

After the application receives the response from the remote server, it is preprocessed by the interceptor before handing it over to its callback function for processing.

The interceptor's preprocessing of HTTP requests includes but is not limited to: global error handling, unified authentication mechanism, or adding additional business logic, etc.

In Sinon's work scenario, because the real XMLHttpRequest has been replaced by FakeXMLHttpRequest, no real HTTP requests are generated at all, so no network requests are observed in the network tab of the Chrome Developer Tools. The interaction between the SAP UI5 application and Mock Server is purely based on the question and answer of FakeXMLHttpRequest in memory.

I hope this article can help you understand the steps and working principle of SAP UI5 Mock Server, and the origin of the name of the Sinon framework behind Mock Server.

Thanks for reading.

More original articles by Jerry, all in: "Wang Zixi":