单元测试 – 包含routeChangeSuccess的AngularJS Test Controlle

这是控制器的代码.

navListModule.controller('NavListCtrl',['$scope','NavList',function ($scope,NavList) {
        $scope.$on('$routeChangeSuccess',function (event,routeData) {
            var stationId = routeData.params.stationId;

            if ((stationId !== null) && (stationId !== undefined)) {
                $scope.stationId = stationId;
                var navList = NavList;
                $scope.menuOptions = navList.getMenuOptions(stationId);
            }
        });
    }
]);

这是我在单元测试中到目前为止所提出的.

'use strict';

describe('unit testing navListModule',function () {

    var scope,ctrl,location;

    describe('test NavListCtrl',function () {

        beforeEach(module('shipApp.navListModule'));

        // mock NavListService for testing purposes
        var mockNavListService = {
            getMenuOptions: function (stationId) {
                // set default menu options
                var menuOptions = [
                    {
                        name: "Alerts",pageURL: "alerts"
                    },{
                        name: "Reports",pageURL: "reports"
                    },{
                        name: "Run Close Outs",pageURL: "cloSEOuts"
                    }
                ];

                // add admin menu option if stationId set to Admin
                if (stationId.toUpperCase() == 'Admin'.toUpperCase()) {
                    menuOptions.push(
                        {
                            name: "Admin",pageURL: "admin"
                        }
                    );
                }

                return menuOptions;
            }
        };

        beforeEach(inject(function ($rootScope,$controller,$location) {
            scope = $rootScope.$new();
            ctrl = $controller('NavListCtrl',{ $scope: scope,NavList: mockNavListService });
            location = $location;
        }));

        it('should expect stationId to be undefined if stationId not defined in route parameters',function () {
            expect(scope.stationId).toBeUndefined();
        });

        it('should expect scope.$on not to be called if no change in route',function () {
            spyOn(scope,'$on');
            expect(scope.$on).not.toHaveBeenCalled();
        });

        it('should expect scope.$on to be called on change in route','$on');
            scope.$on('$routeChangeSuccess',routeData) {});
            expect(scope.$on).toHaveBeenCalled();
        });

        it('should expect stationId to be defined in route parameters if route is #/:stationId/path',inject(function ($routeParams) {
            location.path('/Admin/alerts');
            var locationElements = location.path().substring(location.path().indexOf('/') + 1).split('/');
            var stationId = locationElements[0];
            $routeParams.stationId = stationId;
            expect($routeParams.stationId).toEqual('Admin');
        }));

        it('should expect menuOptions array to be returned when getMenuOptions function is called',function () {
            var stationId = 'Admin';
            var menuOptions = NavListCtrl.getMenuOptions(stationId);
        });

    });

});

我只是在学习Angular,所以我不确定我是否正确地设置了测试.我是否应该创建测试以确保在$routeChangeSuccess事件发生之前不会发生控制器逻辑？如果是这样,我该如何编写这样的测试？另外,测试getMenuOptions(最后一次测试)调用的正确方法是什么？请告诉我测试此控制器的正确方法.

提前致谢,
肖恩

在尝试了jvandemo的一些测试和一些帮助之后,我已经提出了控制器的单元测试以及底层服务.如果我做错了,请告诉我.

'use strict';

describe('unit testing navListModule',function () {

    beforeEach(module('shipApp.navListModule'));

    /***** Controllers *****/

    describe('test NavListCtrl',function () {

        var ctrl,scope,NavList,$httpBackend,$location,$route,$routeParams;

        // mock the http backend for routing
        beforeEach(module(function() {
            return function(_$httpBackend_) {
                $httpBackend = _$httpBackend_;
                $httpBackend.when('GET','views/alerts/alerts.html').respond('alerts');
                $httpBackend.when('GET','views/alerts/reports.html').respond('reports');
                $httpBackend.when('GET','views/alerts/cloSEOuts.html').respond('cloSEOuts');
                $httpBackend.when('GET','views/alerts/admin.html').respond('admin');
                $httpBackend.when('GET','views/shared/error.html').respond('not found');
            };
        }));

        // add $routeProvider mock
        beforeEach(module(function ($routeProvider) {
            $routeProvider.when('/:stationId/alerts',{
                templateUrl : 'views/alerts/alerts.html',controller : 'AlertsCtrl'
            });
            $routeProvider.when('/:stationId/reports',{
                templateUrl : 'views/reports/reports.html',controller : 'ReportsCtrl'
            });
            $routeProvider.when('/:stationId/cloSEOuts',{
                templateUrl : 'views/cloSEOuts/cloSEOuts.html',controller : 'CloSEOutsCtrl'
            });
            $routeProvider.when('/:stationId/admin',{
                templateUrl : 'views/admin/admin.html',controller : 'AdminCtrl'
            });
            $routeProvider.when('/404',{
                templateUrl : 'views/shared/error.html',controller : 'ErrorCtrl'
            });
            $routeProvider.when('/',{
                redirectTo : '/MasterPl/alerts'
            });
            $routeProvider.when('/:stationId',{
                redirectTo : '/:stationId/alerts'
            });
            $routeProvider.when(':stationId',{
                redirectTo : '/:stationId/alerts'
            });
            $routeProvider.when('',{
                redirectTo : '/MasterPl/alerts'
            });
            $routeProvider.otherwise({
                redirectTo: '/404'
            });
        }));

        beforeEach(inject(function ($rootScope,_$location_,_$route_,_$routeParams_) {
            // mock NavList service
            var mockNavListService = {
                getMenuOptions: function (stationId) {
                    // set default menu options
                    var menuOptions = [
                        {
                            name: "Alerts",pageURL: "alerts"
                        },{
                            name: "Reports",pageURL: "reports"
                        },{
                            name: "Run Close Outs",pageURL: "cloSEOuts"
                        }
                    ];

                    // add admin menu option if stationId set to Admin
                    if (stationId.toUpperCase() == 'Admin'.toUpperCase()) {
                        menuOptions.push(
                            {
                                name: "Admin",pageURL: "admin"
                            }
                        );
                    }

                    return menuOptions;
                }
            };


            NavList = mockNavListService;
            scope = $rootScope.$new();
            $location = _$location_;
            $route = _$route_;
            $routeParams = _$routeParams_;
            ctrl = $controller('NavListCtrl',$routeParams: $routeParams,NavList: NavList });
        }));

        it('should expect stationId and menuOptions to be undefined if stationId not defined in route parameters',function () {
            expect(scope.stationId).toBeUndefined();
            expect(scope.menuOptions).toBeUndefined();
        });

        it('should expect scope.$on not to be called if no change in route',routeData) {});
            expect(scope.$on).toHaveBeenCalled();
        });

        it('should not parse $routeParameters before $routeChangeSuccess',function () {
            $location.path('/Admin/alerts');
            scope.$apply();
            expect(scope.stationId).toBeUndefined();
        });

        it('should expect scope values to be set after $routeChangeSuccess is fired for location /stationId/path',function () {
            $location.path('/Admin/alerts');
            scope.$apply();
            $httpBackend.flush();
            expect(scope.stationId).toEqual('Admin');
            expect(scope.menuOptions).not.toBeUndefined();
        });

        it('should expect NavList.getMenuOptions() to have been called after $routeChangeSuccess is fired for location /stationId/path',function () {
            spyOn(NavList,'getMenuOptions').andCallThrough();
            $location.path('/Admin/alerts');
            scope.$apply();
            $httpBackend.flush();
            expect(NavList.getMenuOptions).toHaveBeenCalled();
            expect(scope.menuOptions.length).not.toBe(0);
        });

    });


    /***** Services *****/

    describe('test NavList service',function () {

        var scope,NavList;

        beforeEach(inject(function ($rootScope,_NavList_) {
            scope = $rootScope.$new();
            NavList = _NavList_;
        }));

        it('should expect menuOptions array to be returned when getMenuOptions function is called',function () {
            var stationId = 'Admin';
            var menuOptions = NavList.getMenuOptions(stationId);
            expect(menuOptions.length).not.toBe(0);
        });

        it('should expect admin menu option to be in menuOptions if stationId is Admin',function () {
            var stationId = 'Admin';
            var menuOptions = NavList.getMenuOptions(stationId);
            var hasAdminOption = false;
            for (var i = 0; i < menuOptions.length; i++) {
                if (menuOptions[i].name.toUpperCase() == 'Admin'.toUpperCase()) {
                    hasAdminOption = true;
                    break;
                }
            }
            expect(hasAdminOption).toBe(true);
        });

        it('should not expect admin menu option to be in menuOptions if stationId is not Admin',function () {
            var stationId = 'MasterPl';
            var menuOptions = NavList.getMenuOptions(stationId);
            var hasAdminOption = false;
            for (var i = 0; i < menuOptions.length; i++) {
                if (menuOptions[i].name.toUpperCase() == 'Admin'.toUpperCase()) {
                    hasAdminOption = true;
                    break;
                }
            }
            expect(hasAdminOption).toBe(false);
        });

    });

});