What kind of tools are supported in RealSkill? - Real-Skill/support GitHub Wiki

Bower

Create your own bower.json file that contains all of the front-end dependencies for your project.

bower.json

{
  "name": "angularjs-scaffolding",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "angular": "1.3.15",
    "bootstrap": "3.1.1"
  },
  "devDependencies": {
    "angular-mocks": "1.3.15"
  }
}

add the name of your package and make sure that is meaningful
add a version number for your package
use private property with true value to set the package remain private
use fixed versions of your dependencies (without ~ and ^) to prevent unexpected problems in your application when package change
don't put any information about source of the repository - if you keep your answers there it will be harder to find them

Once you have created your bower.json file you can install locally all of the dependencies:

bower install

NPM

Create your own package.json to manage the dependencies for your project.

package.json

{
  "name": "angularjs-scaffolding",
  "version": "0.0.0",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "grunt": "0.4.5",
    "grunt-cli": "0.1.13",
    "grunt-contrib-connect": "0.7.1",
    "grunt-contrib-jshint": "0.11.3",
    "grunt-contrib-watch": "0.6.1",
    "grunt-karma": "0.10.1",
    "grunt-protractor-runner": "1.1.4",
    "grunt-protractor-webdriver": "0.1.9",
    "protractor": "2.1.0",
    "jasmine": "2.3.2",
    "jasmine-reporters": "2.0.7",
    "jasmine-spec-reporter": "2.4.0",
    "karma": "0.12.16",
    "karma-coverage": "0.3.1",
    "karma-jasmine": "0.1.5",
    "karma-junit-reporter": "0.2.2",
    "karma-phantomjs-launcher": "0.1.4",
    "karma-spec-reporter": "0.0.13",
    "load-grunt-tasks": "0.4.0"
  },
  "scripts": {
    "postinstall": "webdriver-manager update --standalone",
    "test": "grunt verify --force"
  }
}

add the name of your package and make sure that is meaningful
add a version number for your package
use private property with true value to set the package remain private
use fixed versions of your dependencies (without ~ and ^) to prevent unexpected problems in your application when package change
don't put any information about source of the repository - if you keep answers there it will be harder to find them

Once you have created your package.json file you can install locally all of the dependencies:

npm install

Required configuration

You are required to specify test property inside scripts object in your package.json file responsible for running all tests for your project. Furthermore, make sure that the tests reports are placed into target/report-name.xml file.

npm test

More information about specific test configuration: grunt-verify

JSHint

JSHint is a static code analysis tool used in software development for checking if JavaScript source code complies with coding rules. It was designed to be very configurable.

Adding to your project .jshintrc file you can specify which JSHint options turn on or off. To skip files from JSHint just list them in .jshintignore file.

.jshintrc

{
  "bitwise": true,
  "browser": true,
  "camelcase": true,
  "globals": {
    "angular": true
  }
}

.jshintignore

app/bower_components/**
node_modules/**
target/**

Required configuration

Make sure that the results of validation are put into target/jshint.xml file. Example configuration: grunt jshint

GruntJS

Grunt is the JavaScript task runner. It is highly recommended to use it to run, verify and test locally RealSkill projects.

Recommended basic Gruntfile.js tasks

grunt serve

Plugins

grunt-contrib-watch - to run predefined tasks whenever watched file patterns are added, changed or deleted
grunt-contrib-connect - to start a connect web server

Enable grunt-contrib-watch and grunt-contrib-connect and plugins inside your Gruntfile by adding:

grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');

"watch" task

watch: {
    livereload: {
        options: {
            livereload: '<%= connect.options.livereload %>'
        },
        files: ['app/**/*.html', 'app/**/*.js']
    }
}

"connect" task

 connect: {
    options: {
        port: 9000,
                livereload: 35729,
                hostname: '127.0.0.1'
    }
    livereload: {
        options: {
            open: true,
                    middleware: function (connect)
            {
                return [connect().use('/bower_components',
                        connect.static('./bower_components')),
                        connect.static(config.app)];
            }
        }
    }
}

Application is set to run on port 9000.

grunt.registerTask('serve', ['connect:livereload', 'watch']);

To start application in live reload mode:

grunt serve

grunt jshint

Plugins

grunt-contrib-jshint - to validate files with JSHint

Enable grunt-contrib-jshint plugin inside your Gruntfile by adding:

grunt.loadNpmTasks('grunt-contrib-jshint');

"jshint" task

jshint: {
    default: {
        options: {
            jshintrc: true
        },
        files: {
            src: ['app/**/*.js', 
                  'test/**/*.js',  
                  '!app/bower_components/**/*.js']}
    },
    verify: {
        options: {
            jshintrc: true,
            reporter: 'checkstyle',
            reporterOutput: 'target/jshint.xml'
        },
        files: {src: ['app/**/*.js', 
                      'test/**/*.js', 
                      '!app/bower_components/**/*.js']}
    }
}

jshint:default to check particular coding guidelines
jshint:verify to check particular coding guidelines and generate report

To run verify jshint:

grunt jshint:default

To verify jshint and create .xml report:

grunt jshint:verify

grunt test:dev

Plugins

grunt-karma - Grunt plugin for Karma

Enable grunt-karma plugin inside your Gruntfile by adding:

grunt.loadNpmTasks('grunt-karma');

"karma" task

karma: {
    options: {
        configFile: 'test/karma.conf.js'
    },
    unit: {
        singleRun: true
    },
    dev: {
        singleRun: false
    }
}

karma:dev keep the karma server up after a test run
karma:unit run tests and then exit with an exit code of 0 or 1 depending on whether all tests passed or any tests failed.

grunt.registerTask('test:dev', ['karma:dev']);

To run unit tests in development mode:

grunt test:dev

grunt test:e2e

Plugins

protractor - runs tests against your application running in a real browser, interacting with it as a user would
grunt-protractor-runner - for running Protractor runner
grunt-protractor-webdriver - for starting Protractor's bundled Selenium WebDriver

Enable grunt-protractor-webdriver plugin inside your Gruntfile by adding:

grunt.loadNpmTasks('grunt-protractor-webdriver');

"connect:test" task

connect: {
    test: {
        options: {
            base: ['app'],
            port: 9001
        }
    }
}

Because the application runs on port 9000, it is recommended to set port 9001 for testing.

"protractor-webdriver" task

protractor_webdriver: {
    driver: {
        options: {
            path: 'node_modules/.bin/',
            command: 'webdriver-manager start',
            keepAlive: true
        }
    }
}

To run protractor tests without installing webdriver-manager globally you need to:

update local webdriver-manager from node_modules/.bin/ e.g. by adding "postainstall" property to "scripts" in package.json file

"postinstall":"webdriver-manager update --standalone"

set the path and command properties in protractor_webdriver:driver:options

keepAlive flag set to true prevents Error: ECONNREFUSED connect ECONNREFUSED ... error displaying on Windows system after running tests

"protractor" task

protractor: {
    options: {
        configFile: 'test/protractor.conf.js',
        keepAlive: false,
        noColor: false
    },
    chrome: {
        options: {
            args: {
                browser: 'chrome'
            }
        }
    },
    firefox: {
        options: {
            args: {
                browser: 'firefox'
            }
        }
    },
    phantomjs: {
        options: {
            args: {
                browser: 'phantomjs'
            }
        }
    }
}

You can run protractor test with chrome, firefox or phantomjs browser.

grunt.registerTask('test:e2e', ['connect:test', 
                                'protractor_webdriver', 
                                'protractor:chrome']);

To run e2e tests in development mode:

grunt test:e2e

grunt verify

It is recommended to create task for full verify and test the application.

Verify code:

jshint:verify

Unit tests:

karma:unit

Protracotr tests:

To add task responsible for run verify jshint, unit and protractor tests register:

 grunt.registerTask('verify', ['jshint:verify', 
                               'karma:unit',
                               'connect:test',
                               'protractor_webdriver', 
                               'protractor:chrome']);

RealSkill required the npm test command to run all tests in project, therefore it is necessary to add "test" property to "scripts" in your package.json file:

"test": "grunt verify --force"

Thanks to --force flag all subtasks (verify, unit test, protractor test) will be run even if one of them fails.

To run verify jshint, tests and coverage:

npm test

Karma

Karma is a test runner for JavaScript.

Plugins

karma-phantomjs-launcher - launcher for PhantomJS
karma-jasmine - adapter for the Jasmine testing framework
karma-spec-reporter - test reporter
karma-junit-reporter - reporter for the JUnit XML format
karma-coverage - generate code coverage

karma.conf.js

module.exports = function (config)
{
    'use strict';

    config.set({
        autoWatch: true,
        basePath: '../',
        frameworks: ['jasmine'],
        files: ['app/**/*.js','test/unit/**/*.spec.js'],
        exclude: [],
        reporters: ['spec', 'coverage', 'junit'],
        preprocessors: {
            'app/**/*.js': 'coverage'
        },
        coverageReporter: {
            dir: 'target/', 
            type: 'cobertura', 
            file: 'coverage.xml'
        },
        junitReporter: {
            outputFile: 'target/test-results.xml'
        },
        port: 8080,
        browsers: ['PhantomJS'],
        plugins: ['karma-phantomjs-launcher', 
                  'karma-jasmine', 
                  'karma-spec-reporter', 
                  'karma-junit-reporter', 
                  'karma-coverage'],
        singleRun: true,
        colors: true,
        logLevel: config.LOG_INFO,
        usePolling: true
    });
};

Recommended configuration

Code coverage report

To generate code coverage, you need to configure:

preprocessor coverage

preprocessors: {
            'app/**/*.js': 'coverage'
        }

reporter coverage

reporters: ['coverage']

reporter options

coverageReporter: {
            dir: 'target/', 
            type: 'cobertura', 
            file: 'coverage.xml'
        }

Junit report

To generate junit report, you need to configure:

reporter junit

reporters: ['junit']

reporter options

junitReporter: {
  outputFile: 'target/test-results.xml'
}

Protractor

Protractor is an end-to-end test framework for AngularJS applications.

Plugins

jasmine-reporters - reporter for the jasmine test framework
jasmine-spec-reporter - real time console spec reporter for jasmine

protractor.conf.js

module.exports.config = {
    seleniumAddress: 'http://localhost:4444/wd/hub',

    framework: 'jasmine2',

    specs: [
        'features/*.spec.js'
    ],

    capabilities: {
        'browserName': 'chrome'
    },

    baseUrl: 'http://127.0.0.1:9001',

    allScriptsTimeout: 40000,
    resultJsonOutputFile: 'target/report.json',

    onPrepare: function ()
    {
        var jasmineReporters = require('jasmine-reporters');
        var SpecReporter = require('jasmine-spec-reporter');
        jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
            consolidateAll: true,
            filePrefix: 'protractor-results',
            savePath: 'target'
        }));
        jasmine.getEnv().addReporter(new SpecReporter());
    }
};

Junit report

 onPrepare: function ()
    {
        var jasmineReporters = require('jasmine-reporters');
        var SpecReporter = require('jasmine-spec-reporter');
        jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
            consolidateAll: true,
            filePrefix: 'protractor-results',
            savePath: 'target'
        }));
        jasmine.getEnv().addReporter(new SpecReporter());
    }