Bradley Braithwaite
1 import {
2 Learning,
3 JavaScript,
4 AngularJS
5 } from 'Brad on Code.com'
6 |
Check out my online course: AngularJS Unit Testing in-depth with ngMock.

ngMock Fundamentals for AngularJS - Debugging with Dump

How to use the ngMock Dump function for debugging with Unit Tests in AngularJS.

on
on javascript, angularjs, testing, ngmock

In the past couple of posts we talked about the module and inject functions from the ngMock AngularJS module. Before we start to cover the remaining features of ngMock, we will cover the final of ngMock’s three public functions: dump.

The dump function is available via the angular.mock object as we saw with the previous functions e.g. angular.mock.dump (although it’s not added to the global window object in the same way). It’s a utility function for serializing common angular objects to a string so that we can print the contents to either the browser console or the terminal. This of course is of primary use when debugging and/or working through new features with unit tests.

This function is far simpler than module and inject, but it’s worth a quick review as it makes use of some handy functionality from the angularJS module that’s good to know about. If like me, you sometimes default to console.log when debugging, then it’s worth reviewing the features of the dump function.

Typical Usage

The function accepts any JavaScript type and returns a prettified string. Here’s an example usage:

var prettier = angular.mock.dump(scope);
console.log(prettier);

It can be called from anywhere within the application i.e. from the tests or within a controller, service etc.

An example from a test:

it('1 + 1 should equal 2', function () {
	var $scope = {};
	var controller = $controller('CalculatorController', { $scope: $scope });
	$scope.x = 1;
	$scope.y = 2;
	$scope.sum();
	var prettier = angular.mock.dump($scope);
	console.log($scope);
	expect($scope.z).toBe(3);
});

An example from a controller:

angular.module('calculatorApp', []).controller('CalculatorController', function CalculatorController($scope) {
  $scope.sum = function() {
    $scope.z = $scope.x + $scope.y;
	console.log(angular.mock.dump(this));
  };
});

If you run the tests from the browser, the contents can be displayed via the developer toolbar’s console. If you are running tests via Karma the contents will be displayed in the terminal.

With a standard console.log using the scope object from the example CalculatorController, the output is as follows. Note that it also shows the function definitions:

Object{sum: function () { ... }, x: 1, y: 2, z: 3}

Using the dump function we get a prettier output with the function definitions removed, which is a lot more readable:

{
  "x": 1,
  "y": 2,
  "z": 3
}

It also works with HTML elements, which can come in handy when working with directives. For example, where we would get the following output of a DOM element using console.log:

 Object{0: <div id="elementExample"><ul><li>1</li><li>2</li><li>3</li></ul></div>, length: 1}

Using angular.mock.dump, the output would be:

<div id="elementExample">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</div>

We can also use it within in angular app itself, especially when looking at the $scope object.

For example, if we include ngMock in the full application running in a browser i.e. not via the tests, a standard console output of the scope object will look something along the lines of:

scope console output

If we wanted to see something neater when debugging, using the dump function would serialize the scope objects into a format that’s easier to read. For example:

Scope(1): {
	Scope(2): {
		sum: undefined
	}
}

Note that this will also neatly print out nested scope objects (for nested controllers, rootScope and so on) which is why we see Scope(1) (which is the root scope), Scope(2) and so on in this example.

Angular Features

The dump function will neatly print out:

  • primitive types
  • DOM elements
  • JavaScript objects
  • Angular scope objects

It also makes use of the following core angular functions that you may not be in the habit of using.

Iterator

Angular has its own iterator. The object to iterate over can be a key/value pair or an array:

angular.forEach(object, function(o) {
	// do something with the item
});

Type Checking

The following handy functions should be self explanatory:

angular.isArray(object)
angular.isElement(object)
angular.isObject(object)
angular.isFunction(object)

Note that these are used by the dump function, and there is also angular.isDate, angular.isNumber and so on. Check the Module Components from the angular API docs for the full list.

JSON Serializer

Finally, the next time you are about to type JSON.stringify, keep in mind that there exists:

var pretty = true;
angular.toJson(object, pretty);

NB there is also an accompanying angular.fromJson function.

dump vs angular.mock.dump

One thing that can cause confusion for developers when using Karma, it provides a function called dump which is like a console.log that is printed out in the terminal.

You would use Karma’s dump functions in combination with ngMock’s as follows:

var prettier = angular.mock.dump($scope);
dump(prettier);

The documentation implies that the angular.mock.dump function it available on the window object i.e. window.dump, which is misleading.

SHARE
Don't miss out on the free technical content:

Subscribe to Updates

CONNECT WITH BRADLEY

Bradley Braithwaite Software Blog Bradley Braithwaite is a software engineer who works for search engine start-ups. He is a published author at pluralsight.com. He writes about software development practices, JavaScript, AngularJS and Node.js via his website . Find out more about Brad. Find him via:
You might also like:
mean stack tutorial AngularJS Testing - Unit Testing Tutorials