KARMA configuration (Testacular) | My Front-End log book.

What is KARMA

Karma is a Test Driver. We still needs Jasmine and also node.js, gut and Xcode if we have an Apple product

Test the installation

node -v
git –version

Download node.js src code

Install node.js
Install Xcode
Install git

Download Node.js or Installing Node.js via package manager

git clone https://github.com/joyent/node.git
cd node
git checkout v0.8.2

git clone https://github.com/joyent/node.git

cd node

git checkout v0.8.2

install karma (npm = mode project management):

sudo npm install -g karma

1	sudo npm install -g karma

install safari pluggin

npm install karma-safari-launcher --save-dev

1	npm install karma-safari-launcher --save-dev

iOS pluggin

npm install karma-ios-launcher

1	npm install karma-ios-launcher

Install/download Jasmine.js

Jasmine

Associating KARMA and Jasmine (karma.conf.js)

    // list of files / patterns to load in the browser
    files: [
            JASMINE,
            JASMINE_ADAPTER,
            
            '../js/lib/jquery-2.0.3.min.js',
            '../js/lib/idangerous.swiper-2.0.js',
            '../js/lib/yepnope.1.5.4-min.js',
            '../js/core.js',
            '../js/widthdetector.js',  
            '../js/fetch_grid.js',
            '../js/email_capture.js',

            'jasmine/spec/wmsRunnerSpec.js',
    ],

// list of files / patterns to load in the browser

files: [

JASMINE,

JASMINE_ADAPTER,

'../js/lib/jquery-2.0.3.min.js',

'../js/lib/idangerous.swiper-2.0.js',

'../js/lib/yepnope.1.5.4-min.js',

'../js/core.js',

'../js/widthdetector.js',

'../js/fetch_grid.js',

'../js/email_capture.js',

'jasmine/spec/wmsRunnerSpec.js',

Install rpm karma-jasmine

npm install karma-jasmine --save-dev

1	npm install karma-jasmine --save-dev

Selecting predefined browsers

    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    // - iOS
    // - Android
    browsers: [Chrome'],

// Start these browsers, currently available:

// - Chrome

// - ChromeCanary

// - Firefox

// - Opera

// - Safari (only Mac)

// - PhantomJS

// - IE (only Windows)

// - iOS

// - Android

browsers: [Chrome'],

karma init

result:
Config file:
generated at: “/Users/llanese/Sites/wi.mobile/wi.mobile/Source/WI.Web/tests/karma.conf.js”.
The files array is where we tell karma whats files we are going to load.

Add iOS to the browsers key in your Karma configuration:

    # Start these browsers:
    browsers = [
      'iOS’,
      ‘Chrome’
    ]

# Start these browsers:

browsers = [

'iOS’,

‘Chrome’

]

RUN KARMA

cd path_to_your_app_directory

karma start karma.conf.js (the run browsers automatically)

karma start karma.conf.js --browsers Chrome --auto-watch &

karma start karma.conf.js (the run browsers automatically)

karma start karma.conf.js --browsers Chrome --auto-watch &

RUNNIG our THE REAL TEST:

karma start karma.conf.js

1	karma start karma.conf.js

KARMA configuration example: karma.conf.js

// Karma configuration
module.exports = function(config) {
  config.set({
    
    // base path, that will be used to resolve files and exclude
    basePath: '',
 
    preprocessors: {
      'app/scripts/**/*.js': 'coverage'
    },
 
    frameworks: ['jasmine'],
 
    // list of files / patterns to load in the browser
    files: [
      'app/bower_components/angular/angular.js',
      'app/bower_components/angular-mocks/angular-mocks.js',
      'app/bower_components/angular-resource/angular-resource.js',
      'app/scripts/**/*.js',
      'test/unit/**/*.js'
    ],
 
    // list of files to exclude
    exclude: [],
 
    // test results reporter to use
    // possible values: dots || progress || growl
    reporters: ['progress', 'growl', 'coverage'],
 
    // web server port
    port: 8080,
 
    // cli runner port
    runnerPort: 9100,
 
    // enable / 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: 'LOG_INFO',
 
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,
 
    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: ['Firefox'],
 
    // If browser does not capture in given timeout [ms], kill it
    captureTimeout: 5000,
 
    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false,
 
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    }
 
  });
};

// Karma configuration

module.exports = function(config) {

config.set({

// base path, that will be used to resolve files and exclude

basePath: '',

preprocessors: {

'app/scripts/**/*.js': 'coverage'

frameworks: ['jasmine'],

// list of files / patterns to load in the browser

files: [

'app/bower_components/angular/angular.js',

'app/bower_components/angular-mocks/angular-mocks.js',

'app/bower_components/angular-resource/angular-resource.js',

'app/scripts/**/*.js',

'test/unit/**/*.js'

// list of files to exclude

exclude: [],

// test results reporter to use

// possible values: dots || progress || growl

reporters: ['progress', 'growl', 'coverage'],

// web server port

port: 8080,

// cli runner port

runnerPort: 9100,

// enable / 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: 'LOG_INFO',

// enable / disable watching file and executing tests whenever any file changes

autoWatch: false,

// Start these browsers, currently available:

// - Chrome

// - ChromeCanary

// - Firefox

// - Opera

// - Safari (only Mac)

// - PhantomJS

// - IE (only Windows)

browsers: ['Firefox'],

// If browser does not capture in given timeout [ms], kill it

captureTimeout: 5000,

// Continuous Integration mode

// if true, it capture browsers, run tests and exit

singleRun: false,

coverageReporter: {

type: 'html',

dir: 'coverage/'

}

});

};

Configuration karma.conf.js PhantomJS

Just uncomment: browsers: [‘PhantomJS’]

KARMA AND JASMINE (package.json)

  "devDependencies": {
    "grunt": "~0.4",
    "grunt-simple-mocha": "git://github.com/yaymukund/grunt-simple-mocha.git",
    "grunt-contrib-jshint": "~0.3",
    "grunt-coffeelint": "~0.0.6",
    "grunt-npm": "~0.0.1",
    "grunt-bump": "~0.0.10",
    "grunt-conventional-changelog": "~1.0.0",
    "grunt-auto-release": "~0.0.3",
    "mocks": "~0.0.10",
    "which": "~1.0",
    "sinon-chai": "~2.3",
    "chai": "~1.5",
    "mocha": "~1.8",
    "sinon": "~1.6",
    "timer-shim": "~0.2",
    "chai-as-promised": "~3.2",
    "qq": "~0.3",
    "karma-jasmine": "*",
    "karma-mocha": "*",
    "karma-qunit": "*",
    "karma-coverage": "*",
    "karma-requirejs": "*",
    "karma-growl-reporter": "*",
    "karma-junit-reporter": "*",
    "karma-chrome-launcher": "*",
    "karma-firefox-launcher": "*",
    "karma-sauce-launcher": "*",
    "karma-phantomjs-launcher": "*",
    "karma-ng-scenario": "*",
    "karma-coffee-preprocessor": "*",
    "karma-html2js-preprocessor": "*",
    "karma-browserstack-launcher": "git://github.com/karma-runner/karma-browserstack-launcher.git",
    "semver": "~1.1.4",
    "grunt-contrib-watch": "~0.5.0"
  },

"devDependencies": {

"grunt": "~0.4",

"grunt-simple-mocha": "git://github.com/yaymukund/grunt-simple-mocha.git",

"grunt-contrib-jshint": "~0.3",

"grunt-coffeelint": "~0.0.6",

"grunt-npm": "~0.0.1",

"grunt-bump": "~0.0.10",

"grunt-conventional-changelog": "~1.0.0",

"grunt-auto-release": "~0.0.3",

"mocks": "~0.0.10",

"which": "~1.0",

"sinon-chai": "~2.3",

"chai": "~1.5",

"mocha": "~1.8",

"sinon": "~1.6",

"timer-shim": "~0.2",

"chai-as-promised": "~3.2",

"qq": "~0.3",

"karma-jasmine": "*",

"karma-mocha": "*",

"karma-qunit": "*",

"karma-coverage": "*",

"karma-requirejs": "*",

"karma-growl-reporter": "*",

"karma-junit-reporter": "*",

"karma-chrome-launcher": "*",

"karma-firefox-launcher": "*",

"karma-sauce-launcher": "*",

"karma-phantomjs-launcher": "*",

"karma-ng-scenario": "*",

"karma-coffee-preprocessor": "*",

"karma-html2js-preprocessor": "*",

"karma-browserstack-launcher": "git://github.com/karma-runner/karma-browserstack-launcher.git",

"semver": "~1.1.4",

"grunt-contrib-watch": "~0.5.0"

Conection to your MAC

localhost: http://localhost:9879/?id=71142476

1	localhost: http://localhost:9879/?id=71142476

KARMA and WebStorm/IntelliJ integration:

we don’t need to go and run the automatic-test. Test is integrated on out IDE:

Click on drop down and Edit Configuration.
Working Directory:/Users/llanese/Sites/wi.mobile/wi.mobile/Source/WI.Web/tests
Path to Node.js: /Users/llanese/Sites/node_modules/karma/bin/karma
Application Parameters: start
SAVE.
RUN THE SERVER.
karma start karma.conf.js –browsers Chrome –auto-watch &
KILL PROCESSES:
ps aux | grep karma
kill N-Process

WebStorm Server Log

Setting up EXTERNAL DEVICES:

MASTER AND SLAVE needs to be on the same wife net
Check if you can see master

karma-phantomjs-launcher

This plugin ships with Karma by default, so you don’t need to install it, it should just work 😉

If you don’t have it: install the karma-phantomjs-launcher

npm install karma-phantomjs-launcher --save-dev

1	npm install karma-phantomjs-launcher --save-dev

Normal error on installation:

ERROR [launcher]: Cannot start PhantomJS
Error: spawn EACCES

1 2	ERROR [launcher]: Cannot start PhantomJS Error: spawn EACCES

Workaround: install manually the version that works:

cd karma-phantomjs-launcher
npm install phantomjs@1.9.1-0

1 2	cd karma-phantomjs-launcher npm install phantomjs@1.9.1-0

and run it within the: karma-phantomjs-launcher folder (karma start)

Final result

Documentation

If you want to connect to dome other device, as always check your IP: do ifconfig

Karma