👋 This is a community project and there is no official support for this package! Feel free to use it, open issues, contribute, and help answering questions.
The karma-ui5-transpile
preprocessor transpiles code of UI5 projects having a ui5.yaml
using ui5-tooling-transpile
tooling extension. This preprocesser is usable for Karma testing to transpile your resources before testing (i.e. TypeScript compilation for later usage of the karma-coverage
plugin).
The plugin requires karma
>=6.4.1
, and ui5-tooling-transpile >=3.0.0
.
You can install the required dependencies with the following command:
npm install --save-dev karma karma-coverage ui5-tooling-transpile karma-ui5 karma-ui5-transpile
The usage of the karma-ui5
plugin is obligatory as it integrates UI5 into the Karma testing flow although it is not directly necessary for the karma-ui5-transpile
plugin. Only the configuration is read from the karma-ui5
plugin. The plugin karma-coverage
is also optional as it can be used for the creation of the coverage report. As a preprocessor it is not needed when using karma-ui5-transpile
.
See ui5-tooling-transpile for more details about the possible configurations in the ui5.yaml
of your UI5 project.
If you have a custom ui5.yaml
for testing the plugin reads the configuration from the karma-ui5
plugin, i.e.:
module.exports = function (config) {
config.set({
[...]
ui5: {
configPath: "ui5-dist.yaml",
},
[...]
});
};
To enable code coverage for your UI5 project using ui5-tooling-transpile
, you can install and use the karma-ui5-transpile
to preprocess your source files of your project. It uses the same configuration as the ui5-tooling-transpile
and karma-ui5
.
Let's assume you already use the tooling extension ui5-tooling-transpile
and all is configured properly in ui5.yaml
. To add code coverage, we first need to install all required dependencies karma
, karma-ui5
, karma-ui5-transpile
, karma-coverage
, and karma-chrome-launcher
which are needed for the automated execution of your e.g. QUnit or OPA tests:
npm install --save-dev karma karma-ui5 karma-ui5-transpile karma-coverage karma-chrome-launcher
Second, in your karma.conf.js
(or better you create separate ones for different scenarios), you need to configure the preprocessor ui5-transpile
for which local paths is should run. Below we use the preprocessor for all .ts
resources in the webapp
folder - also defining multiple folders is possible, e.g. src/**/*.ts
and test/**/*.ts
for typical UI5 library projects:
module.exports = function (config) {
config.set({
frameworks: ["ui5"],
browsers: ["Chrome"],
reporters: ["progress", "coverage"],
preprocessors: {
"webapp/**/*.ts": ["ui5-transpile"],
},
coverageReporter: {
dir: "coverage",
reporters: [
{ type: "html", subdir: "report-html" },
{ type: "cobertura", subdir: ".", file: "cobertura.txt" },
{ type: "lcovonly", subdir: ".", file: "report-lcovonly.txt" },
{ type: "text-summary" },
],
},
});
};
ui5-transpile
preprocessor please avoid using the coverage
preprocessor as the instrumentation will also take place during the ui5-transpile
Babel transformation process. If you use both, you will see a warning in the console and instrument your source files twice!
That's it! Now, you are able to run your coverage tests with Karma for your TypeScript-based UI5 projects. To do so, just run:
karma start
If you are interested in out of the box examples, you can find them in the UI5 Ecosystem Showcase repository within the showcases
folder:
The TypeScript-based projects genereted with Easy UI5 soon contain the setup for coverage testing with Karma for the QUnit and for OPA testing.
Please use the GitHub bug tracking system to post questions, bug reports or to create pull requests.
Any type of contribution (code contributions, pull requests, issues) to this set of tooling extensions will be equally appreciated.
This work is dual-licensed under Apache 2.0 and the Derived Beer-ware License. The official license will be Apache 2.0 but finally you can choose between one of them if you use this work.