WebStorm: adding library support for Jasmine

WebStorm provides support to download libraries to provide code complete for a huge number of popular libraries.

I tried to add a Library for Jasmine manually, but really wasn’t sure where to point to, I tried pointing to here, but this didn’t seem to work for me:

/usr/local/lib/node_modules/karma-jasmine

If you press the Download button on the right, you can search for a known library and install it like this:

I think part of what I was looking for was jasmine and karma-jasmine, but installing from the Download option got these setup for me, and now I’ve got the code complete in my Jasmine tests that I was looking for.

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!

Using mocks with Jasmine tests for AngularJS

I’m not entirely sure I understand exactly what is going on here or how this is working, but posting to refer back to later.

I have a controller that’s using $interval. Rather than coding a delay into my test in order to let time pass in real time before I do my assertions, a better approach would be to mock out $interval so you can move elapsed time forward programmatically, which is a much better approach.

Luckily the ngMock package provides mocks for most things, including $interval. To move time, you call $interval.flush(millis);

[code language=”javascript”]

describe(‘Test variable date timer’, function () {

it(‘Runs for 1 iteration, 30min interval, adds 30 mins’, function () {
var $scope = {};
angular.mock.inject(function ($controller, _$interval_) {
$interval = _$interval_;
controller = $controller(‘VariableRateDateCtrl’, {$scope: $scope, $interval: $interval});

});

$scope.iterations = 1;
$scope.timeInterval = 30;
$scope.date = moment();
startDate = $scope.date.clone();

$scope.start();
$interval.flush(1000 * $scope.iterations);

endDate = $scope.date;
expectedEndDate = startDate.clone().add($scope.timeInterval, ‘minutes’);
expect(endDate.isAfter(startDate)).toEqual(true);
expect(endDate).toEqual(expectedEndDate);
});[/code]