AngularJS Testing: Bootstrap Blocks, Routes, Events, and Animations

Key Points

• Unit testing is critical for software development, especially for applications that contain hundreds of thousands of lines of JavaScript code. AngularJS supports features such as dependency injection (DI) to make code testing easier.
• Configuration and running blocks are executed at the beginning of the module's life cycle and contain important logic. They cannot be called directly like other components, which makes testing them tricky, but due to their critical role, they cannot be ignored.
• AngularJS provides event aggregation through the $scope event on $emit/$broadcast, allowing objects to interact with each other even if they don't know about each other. Unit testing is written in isolation, so the test specification needs to simulate one end to test the functionality.
• Routing defines how users navigate in the application, and any changes can lead to a bad user experience. Therefore, the routing should also be tested. The two most commonly used routers in AngularJS applications are ngRoute and ui-router.
• Testing animations in AngularJS are simpler than testing instructions, and the angular-mocks library contains ngAnimateMock modules to simplify this process. AngularJS prevents the animation from running until the first digest loop is completed to speed up the initial binding.

In the process of building and delivering fully functional software, we apply a variety of technologies to check the correctness and quality of the software. Unit testing is one of the techniques. Many organizations place great emphasis on unit testing because it reduces the cost of finding and fixing potential problems of the application. When we started developing applications that contained hundreds of thousands of lines of JavaScript code, we couldn't avoid testing the code. Some JavaScript developers say testing JavaScript is more important because the behavior of the language is unknown before runtime. Thankfully, AngularJS makes testing code written using this framework easier by supporting features such as dependency injection (DI). In my previous articles, I discussed some tips on simulation, how to test controllers, services and providers, and how to test instructions. This article will introduce tests for boot blocks (including configuration blocks, run blocks, and routing resolution blocks), scoped events, and animations for AngularJS applications. You can download the code used in this article from our GitHub repository, where you can also find instructions for running the tests.

Test configuration and run block

Configuration and running blocks are executed at the beginning of the module life cycle. They contain important logic to control how modules, widgets, or applications work. Testing them is a bit tricky because they cannot be called directly like other components. At the same time, they cannot be ignored because their role is crucial. Consider the following configuration and running blocks:

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);
    });
});

Similar to the case with the test provider, we need to make sure that the module is loaded before testing the configuration and running the functionality in the block. Therefore, we will use an empty injection block to load the module. The following code snippet simulates the dependencies used in the above block and loads the module:

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());
});

I deliberately did not simulate the $routeProvider object because we will test the registered routes in this article later. The module is now loaded, the configuration and run blocks are executed. So we can start testing their behavior. Since the configuration block registers the route, we can check if it registers the correct route. We will test whether the expected number of routes is registered. The following tests verify the functionality of the configuration block:

describe('config block tests', function () {
    it('should have called registered 2 routes', function () {
        //Otherwise internally calls when. So, call count of when has to be 3
        expect(routeProvider.when.callCount).toBe(3);
    });

    it('should have registered a default route', function () {
        expect(routeProvider.otherwise).toHaveBeenCalled();
    });
});

The run block in the sample code calls a service and registers an event. We will test this event later in this article. Currently, let's test the call to the service method:

describe('run block tests', function () {
    var rootScope;
    beforeEach(inject(function ($rootScope) {
        rootScope = $rootScope;
    }));
    it('should send application bootstrap message', function () {
        expect(messenger.send).toHaveBeenCalled();
        expect(messenger.send).toHaveBeenCalledWith("Bootstrapping application");
    });
});

(The subsequent description of test scope events, routing, parsing blocks and animations is omitted here due to space limitations. For complete test code examples, please refer to the original GitHub repository)

Conclusion

Through this article, I introduce most of the testing techniques I have learned in testing AngularJS code over the past two years. This is not the end, and you will learn more when you write tests for a business scenario of your real application. I hope you have now got enough knowledge of testing AngularJS code. Why wait? Write tests for every line of code I've written so far!

(The FAQs part in the original text is also omitted due to space limitations)

The above is the detailed content of AngularJS Testing: Bootstrap Blocks, Routes, Events, and Animations. For more information, please follow other related articles on the PHP Chinese website!