...
Javascript
For the javascript testing, the goal is to use JEST framework to execute the unit testing and record the coverage (Mocking is also possible with JEST)
The setup is based on NPM, so it uses a maven plugin that handles that (similar idea to docker-maven-plugin in the Integration testing)
Beforehand the Javascript code must be copied to the target folder, plus the package.json file that will be used by NPM
NOTE : For SonarCloud Users or SonarQube 7.8+, there is a need to have the node.js executable available on the build node, the frontend-maven-plugin below does install it as part of the build
| Code Block | ||
|---|---|---|
| ||
<testResources>
<!-- Copy the NPM package.json for UI javascript testing framework -->
<testResource>
<directory>src/test/javascript</directory>
<includes>
<include>**/**.json</include>
</includes>
<filtering>true</filtering>
<targetPath>${project.build.directory}/my-ui</targetPath>
</testResource>
<testResource>
<directory>src/main/resources/META-INF/resources/designer</directory>
<filtering>false</filtering>
<targetPath>${project.build.directory}/my-ui/designer</targetPath>
</testResource>
</testResources> |
Maven properties
By default do not specify any language to SONAR so that it can scan all languages used in the project
| Code Block | ||
|---|---|---|
| ||
<sonar.javascript.lcov.reportPaths>${project.build.directory}/my-ui/coverage/lcov.info</sonar.javascript.lcov.reportPaths>
<sonar.projectVersion>${project.version}</sonar.projectVersion>
<sonar.sources>src/main,${project.build.directory}/my-ui/designer</sonar.sources>
|
...
<!-- DO NOT SPECIFY THAT so it scans javascript <sonar.language>java</sonar.language>-->
|
...
<sonar.exclusions>src/main/resources/**,**/my-ui/designer/lib/*</sonar.exclusions>
|
...
<!-- NEW for SQ7.8 or SonarCloud - Need to have node.js executable available for analysis to run, see frontend-maven-plugin config below for install location -->
<sonar.nodejs.executable>${project.build.directory}/my-ui/node/node</sonar.nodejs.executable>
|
frontend-maven-plugin
This one is used to setup the required libraries and environment to execute the test under JEST framework ((https://github.com/eirslett/frontend-maven-plugin)
...
This one is used to setup the required libraries and environment to execute the test under JEST framework ((https://github.com/eirslett/frontend-maven-plugin)
...
| language | xml |
|---|
...
| Code Block | ||
|---|---|---|
|
|
...
<plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.6</version> <configuration> <installDirectory>${project.build.directory}/my-ui</installDirectory> <workingDirectory>${project.build.directory}/my-ui</workingDirectory> <skip>${maven.test.skip}</skip> </configuration> <executions> <execution> <id>install_node_and_npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <phase>test</phase> <configuration> <nodeVersion>v8.11.1</nodeVersion> <npmVersion>5.6.0</npmVersion> </configuration> </execution> <execution> <id>npm_install</id> <goals> <goal>npm</goal> </goals> <phase>test</phase> <configuration> <arguments>install</arguments> </configuration> </execution> <execution> <id>npm_test</id> <goals> <goal>npm</goal> </goals> <phase>test</phase> <configuration> <arguments>run-script test:coverage</arguments> </configuration> </execution> </executions> </plugin> |
Package.json
This file must be stored in your project and will be used by the Npm maven plugin to setup the javascript environment.
Here is an example to setup an angular environment, others libraries can be setup depending of the need
| Code Block | ||
|---|---|---|
| ||
{
"scripts": {
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage"
},
"jest": {
"verbose": true,
"coverageDirectory": "${project.build.directory}/my-ui/coverage",
"collectCoverageFrom": [
"**/designer/**/*.{js,jsx}",
"!**/designer/lib/**"
],
"rootDir": "${project.build.directory}/my-ui",
"roots": [
"${project.basedir}/src/test/javascript/",
"<rootDir>/designer/"
],
"moduleDirectories": [
"${project.build.directory}/my-ui/node/node_modules",
"${project.build.directory}/my-ui/node_modules",
"<rootDir>/designer"
],
"coverageReporters": [
"lcov"
]
},
"devDependencies": {
"angular": "1.3.2",
"angular-resource": "1.3.2",
"angular-cookies": "1.3.2",
"angular-route": "1.3.2",
"angular-mocks": "1.3.2",
"angular-animate": "1.3.2",
"angular-sanitize": "1.3.2",
"angular-touch": "1.3.2",
"angular-dialog-service": "5.3.0",
"angular-loading-bar": "0.9.0",
"jquery": "3.3.1",
"popper.js": "1.14.4",
"bootstrap": "4.1.1",
"angular-ui-bootstrap": "2.5.6",
"jest": "^23.6.0",
"jest-cli": "^21.2.1"
}
}
|
Javascript test Example
Here is a short example of an angular controller test
| Code Block | ||
|---|---|---|
| ||
require('jquery/dist/jquery.min.js');
require('angular/angular.min.js');
require('angular-mocks/angular-mocks.js');
require('angular-route/angular-route.min.js');
require('angular-resource/angular-resource.min.js');
require('angular-cookies/angular-cookies.min.js');
require('angular-animate/angular-animate.min.js');
require('angular-sanitize/angular-sanitize.min.js');
require('angular-touch/angular-touch.min.js');
require('popper.js/dist/umd/popper.min.js');
require('bootstrap/dist/js/bootstrap.min.js');
require('angular-ui-bootstrap/dist/ui-bootstrap-tpls.js');
require('angular-loading-bar/src/loading-bar.js');
require('angular-dialog-service/dist/dialogs.js');
require('scripts/app.js');
require('scripts/DashboardCtrl.js');
describe('Dashboard ctrl tests', function() {
beforeEach(angular.mock.module('clds-app'));
var $controllerService;
beforeEach(angular.mock.inject(function(_$controller_) {
$controllerService = _$controller_;
}));
describe('$scope.showPalette', function() {
it('test showPalette', function() {
var $scopeTest = {};
var $rootScopeTest = {};
var $resourceTest = {};
var $httpTest = {};
var $timeoutTest = {};
var $locationTest = {};
var $intervalTest = function(){};
var $controllerDashboard = $controllerService('DashboardCtrl', {
'$scope' : $scopeTest,
'$rootScope' : $rootScopeTest,
'$resource' : $resourceTest,
'$http' : $httpTest,
'$timeout' : $timeoutTest,
'$location' : $locationTest,
'$interval' : $intervalTest
});
$scopeTest.showPalette();
expect($rootScopeTest.isModel).toEqual(true);
});
});
}); |
Concrete example
For more information, here are some examples of javascript coverage integration :
CLAMP:
https://gerrit.onap.org/r/#/c/70581/1
(add your project Review here)
Python
...
Your pom.xml file needs to specify several sonar properties. In particular, the <sonar.python.coverage.reportPaths> variable specifies the location of the coverage.xml file that is generated by tox. (Previous versions of sonar used the singular form of this variable; make certain that it has an "s" at the end of its name.)
| Code Block | ||
|---|---|---|
| ||
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<sonar.sources>.</sonar.sources>
<sonar.junit.reportsPath>xunit-results.xml</sonar.junit.reportsPath>
<sonar.python.coverage.reportPaths>coverage.xml</sonar.python.coverage.reportPaths>
<sonar.language>py</sonar.language>
<sonar.pluginname>python</sonar.pluginname>
<sonar.inclusions>**/**.py</sonar.inclusions>
<sonar.exclusions>tests/*,setup.py</sonar.exclusions>
</properties> |
Your tox.ini file should list both py36 and py37. Because some of our build environments might be missing one of these python versions, you may also set the skip_missing_interpreters variable to true.
| Code Block | ||
|---|---|---|
| ||
[tox]
envlist = py36,py37
skip_missing_interpreters = true |
For Gradle
Section TDB