Development Notes

This is to summarize key points during development of OPA tests for SAP FE V4-based LROR(list report&object page) applications; content will be updated continuously. SAPUI5 provides FE V4 OPA libraries for better supporting creation of OPA tests; and it is under namespace sap.fe.test. Two keywords: action and assertion. Start FE V4 Based Application The first step of running OPA tests is the launch of the application. Same as running a SAPUI5 application, it can be started either by an standalone entry HTML file or by a Fiori Launchpad. One of the advantages of the latter option is Shell functionalities, such as navigation back(iNavigateBack), can be used during tests running. Standalone HTML file. Need to create an entry HTML such as index.html if it doesn't exist. Then specify the relatvive path and name of the file in the starting file. Launchpad sandbox. Same as index.html, need to create one if not exist yet. Then specify the same in the starting file. Same code as below. ...

FE V2 allows applications to extend app state with custom data. It provides some hook functions; applications need to implement these hook functions to manage the lifecycle of custom state data. Scenario: In an ALP, users can navigate to a object page from list report table by selecting multiple records. On the object page, one table only displays selected records by providing filters to its row binding . But if users refresh the object page, since the added filters are gone, all documents will be displayed in this table. The expected behavior is, when refresh the object page, the table displays the same data as before refreshing. Solution: The idea is saving selected record keys(from ALP) as the object page's app state. Once the object table's binding filter is updated, call function onCustomStateChange of extension API. The ideal place of calling this for this case is event handler of before table rebinding. This is to inform framework that custom state is changed and need to...

Scenario: I want to execute SAPUI5 OPA tests base on backend OData services directly instead of pre-prepared mock-up data or generated mock-up by mock server. The challenge here is authentication against backend server when the tests are executed via Jenkins. Unlike manual execution by which user and password can be provided manually, automatic Jenkins execution has to overcome the BASIC authentication without any manual interventions.  Investigation: A Nodejs web server is started by Karma when launch the tests. The first thing I need to verify is whether the web server has the ability of proxying OData requests to designated backend servers or not. I searched keywords 'Karma proxy' and found below Karma official page about its configurations.  Karma - Configuration File proxies: { '/static' : 'http://gstatic.com' , '/web' : 'http://localhost:9000' , '/img/' : '/base/test/images/' , '/proxyfied' : { 'targe...

For a typical FE list report application, general process of creating a new object is: 1. Start the list report application 2. Click Create button to create a new object And it is also possible to launch object creation page directly from the FLP. For both FE V2 and V4, the trick here is adding parameter preferredMode=create as the launch parameter. Define the launchpad parameter in CDM: "parameters:{     "preferredMode":{            "value": {                    "value": "create",                    "format": "plain"                }           } }

 CAP Provides application preview feature during app development. If no any setting is given, remote SAPUI5 version is used. Per the code above, custom setting can be used to change this. For example, use local SDK to make it faster.

Download font files. Those files have extensions like eot, svg, ttf, woff and woff2. Except the font files, normally there is corresponding CSS file in which icon classes are defined. Create a new JSON file and give it a same name as the downloaded font file. From the CSS file, find icon information. In CSS file, find code like "icon-abc:before{content:"\f0b4"}" If this icon is what you want to use in the UI5 app, then add an entry to the newly created JSON file: { " icon-abc ": 0xf0b4 } Register it as a new font family by UI5 code: sap.ui.require(["sap/ui/core/IconPool"], function(IconPool){   IconPool.registerFont({fontFamily: " NewIcons ",fontURI: "/fonts"}); } Use the icon in UI5 view. <core: Icon src="sap-icon:// NewIcons / icon-abc " />

Serve static UI5 SDK files with Node Express. Two response headers are useful for static files. They are cach-control and cors. const   express   =   require ( 'express' ); // Constants const   PORT   =   3000 ; const   HOST   =   '0.0.0.0' ; // App const   app   =   express (); app . use  ( '/sdk' ,  express . static  ( __dirname   +   "/sdk" , {      maxAge: '180d' ,      etag: false ,      setHeaders :  ( res ,  path ,  stat )  =>  {          res . header ( 'Access-Control-Allow-Origin' ,  '*' );     } })) app . listen ( PORT ,  HOST ); console . log ( `Running on http:// ${ HOST } : ${ PORT } ` );