Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • 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)

    Beforehand the Javascript code must be copied to the target folder, plus the package.json file that will be used by NPM

    Code Block
    languagexml
                    <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
    languagexml
                    <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>
    
    
    


    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)

    Code Block
    languagexml
            <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
    languagexml
    {
        "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
    languagexmljs
    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);
            });
        });
    });


    For more information, see an example of javascript coverage integration done for Onap Clamp:https://gerrit.onap.org/r/#/c/70581/1

...