Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了单元测试 – 包含routeChangeSuccess的AngularJS Test Controller大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建单元测试来测试导航列表控制器,我在创建测试时遇到了问题.

这是控制器的代码.

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 r@R_607_9981@ng
        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('/@R_502_2480@',{
                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: '/@R_502_2480@'
            });
        }));

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

    });

});

解决方法

你已经在测试中做得很好.我假设您的测试运行正常(除了上次测试)并将分别回答您的2个问题:

> $routeChangesuccess:您无需测试核心AngularJS功能.当您依赖$routeChangesuccess在某个时刻运行代码时,AngularJS团队及其测试套件负责确保$routeChangesuccess正常工作.
> getMenuOptions():由于此方法是您注入的服务的一部分,因此您可以创建一个单独的单元测试来测试NavList服务并将最后一个测试移动到该套件.由于您是单元测试,因此为每个组件(控制器,服务等)创建单独的测试套件是一种很好的做法,以保持组织良好和紧凑.

希望有所帮助!

大佬总结

以上是大佬教程为你收集整理的单元测试 – 包含routeChangeSuccess的AngularJS Test Controller全部内容,希望文章能够帮你解决单元测试 – 包含routeChangeSuccess的AngularJS Test Controller所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。