Server side code coverage for SAPUI5

[UxKjaer]

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'

}

});

 

To see the code coverage open the http://localhost:3000/coverage in a new tab.

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.