UI5 Middleware Code Coverage

This UI5 CLI Server Middleware offers code instrumentation powered by Istanbul. This makes it easy to enable client-side coverage determination.


Sample

You find this middleware in action in the OpenUI5 Sample App.

Requirements

This middleware requires UI5 CLI v3 and is meant for UI5 1.113 and above.

Limitations

Note that this middleware is currently not compatible with TypeScript based projects, see TypeScript support #189.

Install

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

Usage

1. Configure it in $yourapp/ui5.yaml:

The configuration for the custom middleware:

`yaml
server:
customMiddleware:
- name: "@ui5/middleware-code-coverage"
afterMiddleware: compression
configuration:
report:
reporter: ["html"]
"report-dir": "./tmp/coverage-reports"
watermarks: {
statements: [50, 80],
functions: [50, 80],
branches: [50, 80],
lines: [50, 80]
}
instrument:
produceSourceMap: true
coverageGlobalScope: "window.top"
coverageGlobalScopeFunc: false
cwd: "./"
excludePatterns:
- "lib/"
- "another/dir/in/webapp"
- "yet/another/dir"
`

2. Change the qunit coverage module qunit-coverage.js to qunit-coverage-istanbul.js in your test html files

Old:

`html title="unitTests.qunit.html"

















`

New:

`diff html title="unitTests.qunit.html"








-








`

3. Execute ui5 serve in the project root folder

4. Open "http://localhost:8080/test/unit/unitTests.qunit.html?coverage" in a browser of your choice

5. Check the code coverage
!Sample for analyzing code coverage

$3

cwd [String]: Root folder. Defaults to "./" of the project consuming the middleware.

excludePatterns [Array]: Patterns to exclude from instrumenting. Defaults to [].

report [Object]: Settings for the reporter.

report.reporter [Array]: The report type(s) that would be generated. A list of all the available reports could be found here. Defaults to ["html"].

report["report-dir"] [String]: Where the reports would be generated. Relative to cwd. Defaults to "./tmp/coverage-reports".

report.watermarks [Object]: Coverage thresholds. See High and Low Watermarks for further details.

Defaults to:

`js
{
statements: [50, 80],
functions: [50, 80],
branches: [50, 80],
lines: [50, 80]
}
`

instrument [Object]: Settings for the instrumenter. A full set of properties could be seen here.

Defaults to:

`js
{
produceSourceMap: true,
coverageGlobalScope: "window.top",
coverageGlobalScopeFunc: false
}
`

$3

You can override watermarks (since UI5 1.119.0) via data attributes in the script tag for qunit-coverage-istanbul.js':

`diff html title="unitTests.qunit.html"
...

...
`

How It Works

The middleware adds an HTTP endpoint to the development server. For more information about the endpoints, see the API document.

The custom middleware intercepts every .js-file before it is sent to the client. The file is then instrumented on the fly, which includes the dynamic creation of a sourcemap.

The instrumented code and the sourcemap are subsequently delivered to the client instead of the original .js-file.

Integration

The middleware is integrated into OpenUI5 out of the box, but you are not limited by this. With the configuration and the public API, you can set up the middleware to suit your projects' needs.

$3

The qunit-coverage-istanbul.js (part of sap.ui.core library) file requests the instrumented source files by the middleware. While the tests are running, qunit-coverage-istanbul.js takes care of collecting and storing the coverage records into the window.__coverage__ global variable. After the tests are executed, qunit-coverage-istanbul.js sends this data to the middleware, which then generates the code coverage report. Afterwards, the code coverage is displayed on the test page.




Code of Conduct

Please check our Code of Conduct.

Contributing

Please check our Contribution Guidelines.

Support

Please follow our Contribution Guidelines on how to report an issue. Or chat with us in the #tooling channel of the OpenUI5 Community Slack. For public Q&A, use the ui5-cli` tag on Stack Overflow.

Licensing

Copyright 2025 SAP SE or an SAP affiliate company and UI5 CLI Extensions contributors. Please see our LICENSE.txt for copyright and license information. Detailed information including third-party components and their licensing/copyright information is available via the REUSE tool.