Webstorm: Adding karma.conf.js to an existing Javascript project

To setup an existing HTML/Javascript project in Webstorm to use Jasmine and Karma:

  • click the Terminal tab in the bottom left
  • Enter: karma init karma.conf.js
  • When prompted, answer the setup questions:
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
> 

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> js/*.js
> test/**/*Spec.js
WARN [init]: There is no file matching this pattern.

> 

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
> 

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

Next, right-click the karma.conf.js file in the Project files area, and select ‘Create karma.conf.js’ – the dialog should point to your local karma and node.js installs, select the defaults.

Run the file and Karma starts up. Good to go!

AngularJS and unit testing: Jasmine, Karma and mocks

I spent some time a while back getting up to speed with unit test approaches with AngularJS, but it’s been a while and I need to retrace my steps to pick it up again.

For (my) future reference, here’s a list of the notes I had before:

To pick this up again, here’s my reading list of some useful articles to review:

MongoDB aggregation query with a $sort

I have an aggregation query to count documents grouped by a property (this is actually part of my http://www.spotviz.info app that I’m working on – the query retrieves counts per Amateur Radio callsign for number of spots uploaded).

By default the result are not in any particular order (that I can see, but maybe I don’t enough enough test data to be able to tell), so I wanted to add a $sort condition.

Here’s the initial aggregation query:

db.Spot.aggregate(
[
{ $group : { _id : {"spotterCallsign" : "$spotter"},
count : {$sum : 1},
firstSpot : {$min : "$spotReceivedTimestamp"},
lastSpot : {$max : "$spotReceivedTimestamp"} }
}
] )

To add the $sort to the aggregation pipeline, just add another document for $sort following the $group, like this:

{ $sort : { "count" : -1 } }

The full query now looks like:

db.Spot.aggregate(
[
{ $group : { _id : {"spotterCallsign" : "$spotter"},
count : {$sum : 1},
firstSpot : {$min : "$spotReceivedTimestamp"},
lastSpot : {$max : "$spotReceivedTimestamp"} }
},
{ $sort : { "count" : -1 } }
] )

Building this query with the Java API is easy, just add another DBObject for the $sort document to the List containing all docs ($group, $sort), in the pipeline:

DBCollection col = db.getCollection("Spot");

// $group
DBObject groupFields = new BasicDBObject("_id", "$spotter");
groupFields.put("firstSpot", new BasicDBObject("$min", "$spotReceivedTimestamp"));
groupFields.put("lastSpot", new BasicDBObject("$max", "$spotReceivedTimestamp"));
groupFields.put("totalSpots", new BasicDBObject("$sum", 1));
DBObject group = new BasicDBObject("$group", groupFields);

List<DBObject> pipeline = Arrays.asList(group,
new BasicDBObject("$sort", new BasicDBObject("totalSpots", -1)));

AggregationOutput output = col.aggregate(pipeline);

AngularJS console errors are links to further details (?!)

I don’t know why I didn’t notice or try this before, but I noticed in the Udemy ‘AngularJS Zero to Hero’ course that the instructor was clicking the links in the console errors. Previously I thought those rather oddly looking random character messages in the console were just not particularly friendly, but now they make more sense.

Maybe this is completely obvious to others, but this is a very neat feature that I had completely not picked up on.  The links are parameterized with details of your specific error, and the error message page in the AngularJS docs gives you more specifics about the error.

For example, if I have a typo in my ng-app:

Clicking on the link in the error message takes you to a detailed page with further details: