May 7, 2013
Debugging with webstorm and karma
I think this is not mentioned in Vojta’s testacular video, or maybe I missed it, but i had to install JetBrain’s chrome debugger plugin to be able to debug tests run with Karma in Webstorm.
The steps i used to get it to work:
- Install chrome Jetbrains IDE support plugin
- Configure a Karma Server run configuration in Webstorm:
- Configure a Karma debug configuration in Webstorm:
- Run Karma server
- Run Karma debug
Small example
Create project folder
npm install -g karma
mkdir test-karma
cd test-karma
mkdir app
mkdir app/js
mkdir app/lib
cp <angular library> app/lib/angular.min.js
mkdir config
mkdir test
mkdir test/unit
Edit app/index.html
<!doctype html>
<html ng-app>
<head>
<title>Hello World</title>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="HelloWorldCtrl">
<p>Hello </p>
<input id="name" name="name" type="text" ng-model="name"
placeholder="What's your name?"/>
<a href="#" ng-click="reset();">Reset</a>
</body>
</html>
Edit app/js/app.js
function HelloWorldCtrl($scope) {
$scope.reset = function(){
$scope.name = "";
};
}
Edit test/unit/HelloWorldCtrlSpec.js
describe('HelloWorld controller',function(){
it('Should reset name value',function(){
var scope = {},
ctrl = new HelloWorldCtrl(scope);
scope.name = "john";
scope.reset();
expect(scope.name).toBe("");
});
});
Create a karma configuration file:
$> karma init config/karma.conf.js
Which testing framework do you want to use ?
> jasmine
Do you want to use Require.js ?
> no
Do you want to capture a browser automatically ?
> Chrome
Which files do you want to test ?
> test/**/*Spec.js
Any files you want to exclude ?
>
Do you want Testacular to watch all the files and run the tests on change ?
> yes
Config file generated at "/home/akoelewijn/projects/training-angularjs/test-karma/config/karma.conf.js".