In the process of building and delivering full featured software, we apply several techniques to check the correctness and quality of the software. Unit testing is one of these techniques. Many organizations pay a lot of attention towards unit testing as it reduces the cost of finding and fixing potential issues of an application. As we start developing applications with hundreds of thousands of JavaScript lines, we can't escape from testing the code. Several JavaScript developers say that testing JavaScript is even more important as behavior of the language is unknown until runtime. Thankfully, AngularJS makes testing the code written using the framework easier by supporting features like Dependency Injection (DI). In three of my past articles, I discussed a few tips on mocking, how to test controllers, services and providers and how to test directives. This article will cover testing Bootstrap blocks of an AngularJS application (includes config blocks, run blocks and route resolve blocks), scope events and animations.
Testing Config and Run blocks
Config and run blocks are executed at the beginning of the life cycle of a module. They contain important logic that controls the way a module, a widget, or an application works. It's a bit tricky to test them as they can't be called directly like other components. At the same time, they can't be ignored as their role is crucial. Consider the following config and run blocks: [code language="javascript"] angular.module('configAndRunBlocks', ['ngRoute']) .config(function ($routeProvider) { $routeProvider.when('/home', { templateUrl: 'home.html', controller: 'HomeController', resolve: { bootstrap: ['$q', function ($q) { return $q.when({ prop: 'value' }); }] } }) .when('/details/:id', { templateUrl: 'details.html', controller: 'DetailsController' }) .otherwise({ redirectTo: '/home' }); }) .run(function ($rootScope, messenger) { messenger.send('Bootstrapping application'); $rootScope.$on('$locationChangeStart', function (event, next, current) { messenger.send('Changing route to ' + next + ' from ' + current); }); }); [/code] Similarly to the case of testing providers, we need to make sure that the module is loaded before testing the functionality inside the config and run blocks. So, we will use an empty inject block to load the modules. The following snippet mocks the dependencies used in above block and loads the module: [code language="javascript"] describe('config and run blocks', function () { var routeProvider, messenger; beforeEach(function () { module('ngRoute'); module(function ($provide, $routeProvider) { routeProvider = $routeProvider; spyOn(routeProvider, 'when').andCallThrough(); spyOn(routeProvider, 'otherwise').andCallThrough(); messenger = { send: jasmine.createSpy('send') }; $provide.value('messenger', messenger); }); module('configAndRunBlocks'); }); beforeEach(inject()); }); [/code] I intentionally didn't mock the$routeProvider object as we'll test the registered routes later in this article.
Continue reading %AngularJS Testing Tips: Bootstrap blocks, Routes, Events, and Animations%
by Ravi via SitePoint
