Technical Articles
Server side code coverage for SAPUI5
As part of my blogseries of end to end development environment of UI5-Tooling I got a to add a bit more to a few NPM package. I also ended up creating my own for code coverage.
Now I thought that’s really cool from a local development point of view. But the setup at my client is that we have Functional consultants doing unit testing of the code as well. Obviously this isn’t covered as part of the code coverage then and also asking them to setup the local tooling could be a bit steep.
So i’ve created yet another package for server side code coverage, that acts as a middleware between an SAP system and the client. This way it will instrument all the javascript files coming from the server for the code coverage.
Let’s try it out.
You need a new app that really just acts as a dummy app for your server.
To get an easy start you can clone my GITHUB repository.
Now open the ui5.yaml file and replace the following:
- hostname
- client
- username
- password.
- regular expression
The regular expression searches on agilux to be part of the name and that it ends on .js.
Now run
npm install
And start your server with
npm run serve
When you open up your launchpad via localhost
http://localhost:8080/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-ui-debug=true
If you have a namespace for your apps, you can reduce load time by adding that instead of true in the sap-ui-debug part. Have a look here if you are confused
Now when you click through your app the code is instrumented and added to the window.__coverage__ object. Once done open the debugger by pressing F12 and execute the following ajax request
$.ajax({
type: "POST",
url: 'http://localhost:3000/coverage/client',
data: JSON.stringify(window.__coverage__),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
And you will get something like this:
You can download the report by http://localhost:3000/coverage/download and use it as part of your QA process. You can execute the ajax request as often as you want to collect more coverage.