Karma – Spectacular Test Runner for Javascript

karma-logo

Karma is a test-runner javascript tool that executes source code against test code for each of the browsers connected. The results for each test against each browser are examined and displayed via the command line to the developer such that they can see which browsers and tests passed or failed.

Basic Setup without Grunt or Gulp

Karma needs to know about your project in order to test it and this is done via a configuration file karma.conf.js (usually named). Configuration files can be created automatically using the command karma init. An example is shown below with comments for understanding its configuration:


// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// Generated on 2016-02-17 using
// generator-karma 1.0.1

module.exports = function(config) {
 'use strict';
 config.set({
  // enable/disable watching file/executing tests whenever any file changes
  autoWatch: false,

  // base path, that will be used to resolve files and exclude
  basePath: '../',

  // testing framework to use (jasmine/mocha/qunit/...)
  // as well as any additional frameworks (requirejs/chai/sinon/...)
  frameworks: [
    "jasmine"
  ],

  // list of test files / patterns to load in the browser
  files: [
    // bower:js
    'bower_components/jquery/dist/jquery.js',
    'bower_components/angular/angular.js',
    'bower_components/bootstrap/dist/js/bootstrap.js',
    'bower_components/angular-mocks/angular-mocks.js',
    // endbower
    "app/scripts/**/*.js",
    "test/spec/**/*.js"
  ],

  // list of files / patterns to exclude
  exclude: [
  ],

  // web server port
  port: 8090,

  // Start these browsers, currently available:
  // - Chrome
  // - Firefox
  // - PhantomJS
  browsers: [
    "PhantomJS",
    "Chrome"
  ],

  // Which plugins to enable
  plugins: [
    "karma-phantomjs-launcher",
    "karma-jasmine",
    "karma-coverage",
    "karma-chrome-launcher"
  ],

  // Continuous Integration mode
  // if true, it capture browsers, run tests and exit
  singleRun: true,

  //Enable or disable colors in the output (reporters and logs)
  colors: true,

  // level of logging
  // possible values: LOG_DISABLE||LOG_ERROR||LOG_WARN||LOG_INFO||LOG_DEBUG
  logLevel: config.LOG_INFO,

  // Uncomment the following lines if using grunt's server to run the tests
  // proxies: {
  //   '/': 'http://localhost:9000/'
  // },
  // URL root prevent conflicts with the site root
  // urlRoot: '_karma_'


  // progress is the default report (format on how to print test report)
  // For Code Coverage we add karma-coverage that uses Instanbul
  reporters: ['progress', 'coverage'],
  preprocessors: {
    // source files, that you wanna generate coverage for
    // do not include tests or libraries
    // (these files will be instrumented by Istanbul)
    'app/scripts/**/*.js': ['coverage']
   },

   // optionally, configure the reporter
   coverageReporter: {
     type : 'html',
     dir : 'coverage/'
   },
   // to avoid DISCONNECTED messages when connecting to slow virtual machines
   browserDisconnectTimeout : 10000, // default 2000
   browserDisconnectTolerance : 1, // default 0
   browserNoActivityTimeout : 4*60*1000 //default 10000
 });
};

In order to run and install Karma you need firstly to install globally
npm install -g karma-cli
Then in your project root directory add a package.json similar to the following:
(depending on the plugins declared in the config file and their dependencies)

{
  "name": "angular2",
  "devDependencies": {
    "karma-jasmine": "0.3.7",
    "karma": "0.13.21",
    "karma-phantomjs-launcher": "1.0.0",
    "jasmine-core": "2.4.1",
    "phantomjs-prebuilt": "2.1.4",
    "karma-coverage": "0.5.3",
    "karma-chrome-launcher": "0.2.2"
  },
  "engines": {
    "node": ">=5.6.0"
  }
}

and run npm install on the root directory. In order to start your tests give karma start karma.conf.js

Test are written with Jasmine and all the information you need to get started with it, is here. For getting instances of Angular controllers, services etc. you need to include angular-mocks dependency and examples can be found here.

Karma – Spectacular Test Runner for Javascript

Bower – A package manager for the web

Bower logo

Bower is a package manager for the front-end part of your web app. It installs the right versions of the packages (Javascript, html and css libraries) you need and their dependencies.

Bower keeps track of the packages under his watch in a manifest file, bower.json. If multiple packages depend on a package – jQuery for example – Bower will download jQuery just once. This is known as a flat dependency graph and it helps reduce page load.

Install Bower by giving the following command:

npm install -g bower

Then you can create a bower.json file by issuing the command:

bower init

The bower.json file specifications can be found here and below an example is explained:

{
  "name": "projectName",
  "description": "Project Description",
  "version": "0.0.0",
  "appPath": "src/main/webapp",
  "testPath": "src/test/javascript/spec",
  "dependencies": {
    "angular": "1.4.8",
    "bootstrap": "3.3.5",
    "jquery": "2.1.4"
  },
  "devDependencies": {
    "angular-mocks": "1.4.8",
    "angular-scenario": "1.4.8"
  },
  "overrides": {
    "bootstrap": {
        "main": [
            "dist/js/bootstrap.js",
            "dist/css/bootstrap.css",
            "less/bootstrap.less"
        ]
    }
  },
  "resolutions": {
    "angular": "1.4.8",
    "jquery": "2.1.4"
  }
}

name:

Required. Type: String. The name of the package as stored in the registry.

description:

Recommended. Type: String. Any character. Max 140.

resolutions:

It may be needed by a gulp, grunt library in order to override default package entry files, which are declared in their bower.json files.

resolutions:

Type: Object. Dependency versions to automatically resolve with if conflicts occur between packages.

version:

Deprecated. Still it may be needed by a gulp, grunt library.

appPath:

Self-explanatory. It may be needed by a gulp, grunt library.

testPath:

Self-explanatory. It may be needed by a gulp, grunt library.

For versioning you can use node semantic versioning symbols. More specifically based on semver, you can use

  • Hyphen Ranges X.Y.Z – A.B.C
    1.2.3-2.3.4
    Indicates >=1.2.3 <=2.3.4
  • X-Ranges
    1.2.x
    1.X
    1.2.*
  • Tilde Ranges
    ~1.2.3
    ~1.2
    Indicates allowing patch-level changes or minor version changes.
  • Caret Ranges ^1.2.3 ^0.2.5 ^0.0.4Allows changes that do not modify the left-most non-zero digit in the [major, minor, patch] tuple
    • ^1.2.x (means >=1.2.0 <2.0.0)
    • ^0.0.x (means >=0.0.0 <0.1.0)
    • ^0.0 (means >=0.0.0 <0.1.0)

 

Finally another file related to bower configuration found on the root of our web app is .bowerrc. A common use is to declare to which directory the packages are going to be installed as shown below:

{
    "directory": "src/main/webapp/bower_components"
}
Bower – A package manager for the web