Istanbul code coverage integrated into UI5

[mauriciolauffer]

If you’re like me and love reading changelogs, you may’ve noticed the latest ui5 version, v1.113.0, introduced a new code coverage tool called Istanbul to replace the old Blanket.js (latest version is 7 years old now). Istanbul is perhaps the most famous and most used code coverage out there.

Using Istanbul is not complicated and you don’t need to change your test scripts, just some project configuration. Remember, this is for your tests only, it won’t affect your build or the deployed artefacts.

 

How to

You must install a new ui5 middleware to your project: @ui5/middleware-code-coverage.

See example: package.json

npm install --save-dev @ui5/middleware-code-coverage

 

Update your ui5.yaml file to include the new middleware. Again, this affects local development only, not the app running on your server.

See example: ui5.yaml

server:

  customMiddleware:

  - name: "@ui5/middleware-code-coverage"

    afterMiddleware: compression

 

Last but not least, update the unitTests.qunit.html (or whatever you’d named your test html file).

See example: unitTests.html

<script type="text/javascript" src="../../resources/sap/ui/qunit/qunit-coverage-istanbul.js"></script>

 

That’s it! Easy, simple and fast. You’re ready to run your tests and check the coverage results.

QUnit code coverage

Istanbul code coverage results

 

Istanbul configuration

If you want to customize the code coverage, you can do it when loading @ui5/middleware-code-coverage or sap/ui/qunit/qunit-coverage-istanbul.js. One can change the report type, exclude folders and files from the coverage, define watermarks level, etc. Watermaks shows the coverage in %, high-watermaks levels represent a healthy code coverage. A test may fail if the coverage thresholds is not met.

 

Do you need Istanbul in your Fiori/UI5 app?

If you already have automated tests and want to have code coverage reports, you’re better off using a test runner such as Karma JS. It’ll bring a lot of extra features and can easily be integrated into your CI/CD pipeline. Test and code coverage results would live in a central place where the team could access and share them. Karma has a plug-in made for UI5, easy-peasy to use karma-ui5.

Using ui5-qunit-istambul as described in this blog, is a manual task, no test runners here. One needs to spin up the local server, navigate to the test HTML page, click on coverage, and open the code coverage results in the browser. The results are local in your computer.