@ui5/middleware-code-coverage
Advanced tools
UI5 Tooling middleware to instrument code coverage with Istanbul
This UI5 Tooling Server Middleware offers code instrumentation powered by Istanbul. This makes it easy to enable client-side coverage determination.
You find this middleware in action in the OpenUI5 Sample App.
This middleware requires UI5 Tooling v3 and is meant for UI5 1.113 and above.
Note that this middleware is currently not compatible with TypeScript based projects, see TypeScript support #189.
npm install @ui5/middleware-code-coverage --save-dev
Configure it in $yourapp/ui5.yaml:
The configuration for the custom middleware:
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"
Change the qunit coverage module qunit-coverage.js to qunit-coverage-istanbul.js in your test html files
Old:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unit tests for OpenUI5 App</title>
<script id="sap-ui-bootstrap" src="../../resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-resourceroots='{
"ui5.sample": "../../"
}' data-sap-ui-language="EN" data-sap-ui-async="true">
</script>
<link rel="stylesheet" type="text/css" href="../../resources/sap/ui/thirdparty/qunit-2.css">
<script src="../../resources/sap/ui/thirdparty/qunit-2.js"></script>
<script src="../../resources/sap/ui/qunit/qunit-junit.js"></script>
<script src="../../resources/sap/ui/qunit/qunit-coverage.js"
data-sap-ui-cover-only="ui5/sample/"
data-sap-ui-cover-never="ui5/sample/test/"></script>
<script src="../../resources/sap/ui/thirdparty/sinon.js"></script>
<script src="../../resources/sap/ui/thirdparty/sinon-qunit.js"></script>
<script src="unitTests.qunit.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
New:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unit tests for OpenUI5 App</title>
<script id="sap-ui-bootstrap" src="../../resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-resourceroots='{
"ui5.sample": "../../"
}' data-sap-ui-language="EN" data-sap-ui-async="true">
</script>
<link rel="stylesheet" type="text/css" href="../../resources/sap/ui/thirdparty/qunit-2.css">
<script src="../../resources/sap/ui/thirdparty/qunit-2.js"></script>
<script src="../../resources/sap/ui/qunit/qunit-junit.js"></script>
- <script src="../../resources/sap/ui/qunit/qunit-coverage.js"
+ <script src="../../resources/sap/ui/qunit/qunit-coverage-istanbul.js"
data-sap-ui-cover-only="ui5/sample/"
data-sap-ui-cover-never="ui5/sample/test/"></script>
<script src="../../resources/sap/ui/thirdparty/sinon.js"></script>
<script src="../../resources/sap/ui/thirdparty/sinon-qunit.js"></script>
<script src="unitTests.qunit.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
Execute ui5 serve in the project root folder
Open "http://localhost:8080/test/unit/unitTests.qunit.html?coverage" in a browser of your choice
Check the code coverage
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:
{
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:
{
produceSourceMap: true,
coverageGlobalScope: "window.top",
coverageGlobalScopeFunc: false
}
You can override watermarks (since UI5 1.119.0) via data attributes in the script tag for qunit-coverage-istanbul.js':
...
<script src="../../resources/sap/ui/qunit/qunit-coverage-istanbul.js"
data-sap-ui-cover-only="ui5/sample/"
data-sap-ui-cover-never="ui5/sample/test/"
+ data-sap-ui-cover-watermarks-statements="[90,95]"
+ data-sap-ui-cover-watermarks-functions="[90,95]"
+ data-sap-ui-cover-watermarks-branches="[90,95]"
+ data-sap-ui-cover-watermarks-lines="[90,95]"></script>
...
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.
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.
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.
Please check our Code of Conduct.
Please check our Contribution Guidelines.
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-tooling tag on Stack Overflow.
Copyright 2024 SAP SE or an SAP affiliate company and UI5 Tooling 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.
FAQs
UI5 Tooling middleware to instrument code coverage with Istanbul
We found that @ui5/middleware-code-coverage demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.