Thursday, October 1, 2015

JavaScript - Karma - Setup - prepare the environment to work with karma

Introduction:
This article covers how to setup karma and run a sample test to make sure installation worked without any issues. Both local and global installation will be covered. Karma installation depends on some other dependent technologies which are not part of this article. 

Brief introduction about the technologies involved:

Node:
  • Considered as server side JavaScript or browser less JavaScript
  • JavaScript runtime built on Chrome’s V8 JavaScript engine
  • Node uses event driven, non-blocking I/O model which makes it lightweight and efficient

npm:
  • This is a package manager for JavaScript is default for Node.js
  • Elaboration is 'Node.js Package Manager'

karma:
  • Test Runner tool for JavaScript invented by AngularJS team 
  • Karma runs on Node.js and is available as an NPM package
  • Test runner means way to run jasmine/mocha (Javascript unit test tool) without loading explicitly in the browser. To confuse thing, it's testing without the browser in the browser. 

Karma setup:
Karma installation needs node and npm installed prior. So those two installation will be covered first. 

Environment info:
  • Operating system - Windows 2008 R2
  • node version - 4.1.0
  • npm version - 3.3.3

1. Setup node:
  • Link to download: https://nodejs.org/en/
  • Click on download button which will download file ‘node-v4.1.0-x64.msi’
  • Execute the msi file. Setup wizard is simple enough, just click on Next button
  • It will install command prompt and node.js, both are shell/command prompt. Node.js is used for node programming.
  • Test installation’s done successfully. Use command prompt. Run ‘node –v’. returned 4.1.0.

2. Update npm
  • Node is bundled with a version of npm. However, npm gets updated more frequently than Node does, so it’s a good idea to upgrade npm. Before upgrading npm, run ‘npm -v’ which returned ‘2.14.3’.
  • Install npm – execute command ‘npm install npm -g’ in ‘node command prompt’
  • Check upgraded version. Execute ‘npm -v’ which returned 3.3.3.

3. Install karma:
Karma can be installed per project or in global context accessible for each project. 

Local installation:
  • Go to the folder where karma needs to be installed
  • Execute command 'npm install karma' from 'node.js command prompt
  • This will create a folder called 'node_modules'. Actually installing any npm package will create that folder where all the dependent modules will be installed
Global installation:
  • Execute command 'npm install karma -g' from 'node.js command prompt. -g argument indicates installation in global space. 
  • The 'node_modules' will be created in the user's directory.

4. Install dependencies
Karma requires to install test tool, browser launcher etc. Below commands will add all the dependencies need to run the karma locally. Just add -g to install globally.  

- 'npm install karma-jasmine --save-dev'
- 'npm install karma-requirejs --save-dev'
- 'npm install karma-phantomjs-launcher --save-dev'
- 'npm install karma-chrome-launcher --save-dev'


5. Initialize karma:
  • Command: 'node node_modules/karma/bin/karma init'. This will ask series of questions.
  • Testing framework - default jasmine. Use up or down arrow keys to select preferred one
  • Need requireJS - default no. Up arrow to select yes. I use requireJS and all my posts will be referring it
  • Select Browser - default Chrome. Can select multiple in next line. To go to next option, needs to hit double Enter
  • Next needs to specify all source file locations. Double enter for next option
  • Exclude files. 
  • Bootstrap file for requireJS. Selecting yes will create a test-main.js in root location with RequireJS configured and run the tests. Selected no for the purpose of this post.
  • Watch file modification. Select yes. This streamlines any changes in source files and testing done immediately
  • Initialization is done. This will create a file 'karma.conf.js' in the root location where all the above settings can be seen and modified based on need.

6. Run karma:
  • Command - 'node node_modules/karma/bin/karma start'
  • This will start karma on default port 9876 (if not changed) which will start Chrome browser for it's purpose.

Notes:

1. Error-01: Not so obvious error during global karma installation
Solution: use command -
- 'npm install --ignore-script -g karma'

2. Error-02throw error('No provider for "' + name + '"!');
Solution: next line of above should display which provider is missing. Install that provider using 'npm install --save-dev'


Resources:
1. http://karma-runner.github.io/0.13/intro/installation.html
2. 



No comments: