Java Buzz Forum - Debugging with webstorm and karma

Articles |
News |
Weblogs |
Books |
Forums

Artima Forums | Articles | Weblogs | Java Answers | News

Sponsored Link •

Java Buzz Forum
Debugging with webstorm and karma

0 replies on 1 page.

Welcome Guest
Sign In

Back to Topic List

Reply to this Topic

Search Forum

Threaded View


Previous Topic		Next Topic

Flat View: This topic has 0 replies on 1 page

Andrej Koelewijn

Posts: 594
Nickname: andrejk
Registered: Nov, 2002

Andrej Koelewijn is a Java and Oracle consultant

Debugging with webstorm and karma

Posted: Jul 13, 2013 3:19 AM

This post originated from an RSS feed registered with Java Buzz by Andrej Koelewijn.
Original Post: Debugging with webstorm and karma Feed Title: Andrej Koelewijn Feed URL: http://feeds.feedburner.com/AndrejKoelewijn Feed Description: On Oracle, Java and OpenSource	Latest Java Buzz Posts Latest Java Buzz Posts by Andrej Koelewijn Latest Posts From Andrej Koelewijn

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".

Read: Debugging with webstorm and karma

Previous Topic

Next Topic


	Web Artima.com