The Artima Developer Community
Sponsored Link

Java Buzz Forum
Debugging with webstorm and karma

0 replies on 1 page.

Welcome Guest
  Sign In

Go back to the topic listing  Back to Topic List Click to reply to this topic  Reply to this Topic Click to search messages in this forum  Search Forum Click for a threaded view of the topic  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 6:19 AM
Reply to this message Reply

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

Advertisement

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: Webstorm Karma Server run configuration
  • Configure a Karma debug configuration in Webstorm: Webstorm Karma debug configuration
  • Run Karma server Webstorm Karma Server run
  • Run Karma debug Webstorm Karma debug run

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

Topic: Jelly Bean overtakes Gingerbread as top Android version Previous Topic   Next Topic Topic: Testing Web-based Spring Applications in 2013 (Part One)


Sponsored Links



Google
  Web Artima.com   

Copyright © 1996-2014 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use - Advertise with Us