Easy JS Unit Test with Jasmine and Karma

Jasmine is the testing framework. Karma is the test runner. Working with them when writing unit tests is… cool.

1. Karma
   1. Single Run
2. Jasmine
   1. log in test
3. Play Karma in WebStorm
4. JetBrains IDE Debugger and Chrome
5. Angular Controller testing
   1. Example
   2. Should I check if $scope.save is defined?
   3. Doing same job when testing similar controller?

Karma

Install Karma and How to use Karma

In Angular guide for unit-testing, Karma is a JavaScript command line tool that can be used to spawn a web server which loads your application’s source code and executes your tests. And Jasmine is a behavior driven development framework for JavaScript that has become the most popular choice for testing AngularJS applications. Here is Introduction for Jasmine

The describe function is for grouping related specs. Specs are defined by calling the global Jasmine function it, which, like describe takes a string and a function. Suites and specs can be disabled with the xdescribe and xit functions, respectively.

As the name implies the beforeEach function is called once before each spec in the describe is run and the afterEach function is called once after each spec.

In chapter “Testing a Controller” of Angular Unit Test Developer Guide, it provides a great example.

It is possible to Mock Services by mocking inject or using $injector.

Single Run

Everytime I start Karma and fails, and edit the spec files, the Karma would shout at me “your files have done a complete reload!”

It’s really annoying (perhaps there are other solutions), so I decided to run with

karma start --single-run

Jasmine

##Focused Specs

Putting f in front of your its or describes, and start your Karma. Only the one you prefixed with f will run.

log in test

To log into console when using Jasmine, use console.log directly.

Play Karma in WebStorm

Install Karma Plugin in WebStorm, and you can now configure that ^R will run the spec code in Karma.

If you would like to prefix f to your suite, it will just function as handy as any other Unit Test framework for Python or Ruby.

JetBrains IDE Debugger and Chrome

To run in debug mode, install JetBrains IDE Support Plugin in Chrome, and configure the IDE Connection Host and Port according to what your IDE says.

Angular Controller testing

Some points need attention:

• In karma.conf, put controller code’s pass.

• To test a function from outside (Jasmine), the function should be defined in $scope. Normal function (can be thought as private?) is not available for testing.

• To make a validation function testable, the error message (exception object) should be return.

Example

    function save() { ... }

can be change to

    $scope.save = function () {
      var error = ErrorDialog.validate([
	  ...
	  if (error) {
        return error;
	  }
	}

after that

      var controller = $controller('MyCtrller', {
		// inject services
      });

      var error = $scope.save();
      expect(error).toBeDefined();
      expect(error.code).toEqual('W11');

But some people insist that this is a pollution of namespace. The self. style should be used instead.

Should I check if $scope.save is defined?

Not a bad idea but not necessary. After the controller is successfully initiated, $scope.save is defined naturally (unless you mistake the function’s name!).

Doing same job when testing similar controller?

It may be a good idea to extract duplicated codes into a js file just aside the controller testers. After you define functions there, it can be used to other controller testers.

for example, I would like to initialize $scope attributes before every testing, so I may put function

function addAttr(obj, attributes) {
  for (var attr in attributes) {
    obj[attr] = attributes[attr];
  }
}

to a separate js file on the same directory of controller testers.