@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.
This middleware requires UI5 Tooling v3 and is meant for UI5 1.113 and above.
Warning
The
qunit-coverage-istanbul.jsmodule is planned to be part of OpenUI5 1.113.0, which is not released yet. If you would like to try out the code coverage module beforehand, use the nightly CDN version of UI5 when bootstrapping your tests.
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-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
}
The middleware adds an HTTP endpoint to the development server.
The custom middleware intercepts every .js-file before it is sent to the client. The file is then instrumented on the fly, including the dynamic creation of a sourcemap.
The instrumented code and the sourcemap are subsequently delivered to the client instead of the original .js-file.
This REST API is the underlying foundation of the middleware.
Note: The /.ui5/ path is reserved for UI5 Core modules and must not be used for third-party modules.
{path/to/resource}?instrument=trueA resource could be instrumented for code coverage by appending ?instrument=true as a query parameter. Note: If a resource has already been excluded via excludePatterns in middleware's configuration, the query parameter is ignored.
Example:
// OpenUI5
GET /resources/sap/m/ComboBox.js?instrument=true
GET /resources/sap/m/ComboBoxBase.js?instrument=true
GET /resources/sap/m/ComboBoxBaseRenderer.js?instrument=true
GET /resources/sap/m/ComboBoxRenderer.js?instrument=true
GET /resources/sap/m/ComboBoxTextField.js?instrument=true
GET /resources/sap/m/ComboBoxTextFieldRenderer.js?instrument=true
/.ui5/coverage/pingHealthcheck. Useful when checking for the middleware's existence.
Example:
fetch("/.ui5/coverage/ping", {
method: "GET",
});
/.ui5/coverage/reportSends __coverage__ data to the middleware. A static report is generated with the provided data. Reports could be accessed via the /.ui5/coverage/report/${reportType} route. The available report types could be found here.
Note: Report types could be defined and limited via the middleware's configuration.
Example:
fetch("/.ui5/coverage/report", {
method: "POST",
body: JSON.stringify(window.__coverage__),
headers: {
"Content-Type": "application/json",
},
});
/.ui5/coverage/report/${reportType}Returns the generated report(s) from the last generation via the /.ui5/coverage/report route.
Example:
GET /.ui5/coverage/report/html
GET /.ui5/coverage/report/lcov
The middleware is integrated into OpenUI5 out of the box, but it is not limited just to it. With the configuration and the public API, developers could set up the middleware to suit their 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.
Below is an example of a sample scenario to integrate UI5 Middleware Code Coverage.
// A module in the browser
const isMiddlewareAvailable = await fetch("/.ui5/coverage/ping", {
method: "GET",
});
if (isMiddlewareAvailable) {
const generatedReports = await fetch("/.ui5/coverage/report", {
method: "POST",
body: JSON.stringify(window.__coverage__),
headers: {
"Content-Type": "application/json",
},
});
// Extract the html report from the list of reports
const htmlReport = generatedReports.availableReports.find(
(report) => report.report === "html"
);
if (htmlReport) {
const body = document.body;
const iFrameElem = document.createElement("iframe");
iFrameElem.src = "/.ui5/coverage/report/" + htmlReport.destination;
iFrameElem.style.border = "none";
iFrameElem.style.width = "100%";
iFrameElem.style.height = "100vh";
iFrameElem.sandbox = "allow-scripts";
body.appendChild(iFrameElem);
}
}
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 2023 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.