angularjs – 单元测试控制器时如何模拟ng-grid

发布时间：2020-12-17 17:13:17 所属栏目：安全来源：网络整理

导读：我目前正在尝试为现有的代码块编写测试,并在控制器内部遇到嵌套的ng-grid时遇到问题.问题来自控制器尝试在初始化时与网格交互. 测试软件 node@0.10.14 karma@0.10.2 karma-jasmine@0.1.5 karma-chrome-launcher@0.1.2 我的测试： define(["angularjs","angul

我目前正在尝试为现有的代码块编写测试,并在控制器内部遇到嵌套的ng-grid时遇到问题.问题来自控制器尝试在初始化时与网格交互.

测试软件
node@0.10.14
karma@0.10.2
karma-jasmine@0.1.5
karma-chrome-launcher@0.1.2

我的测试：

define(["angularjs","angular-mocks","jquery","js/3.0/report.app","js/3.0/report.controller","js/3.0/report.columns"
],function(angular,ngMocks,jquery,oARModule,oARCtrl,ARColumns) {
        "use strict";

        describe("Report Center Unit Tests",function() {
            var oModule;

            beforeEach(function() {
                oModule = angular.module("advertiser_report");
                module("advertiser_report");
            });

            it("Advertiser Report Module should be registered",function() {
                expect(oModule).not.toBeNull();
            });

            describe("Advertiser Report Controller",function() {
                var oCtrl,scope;

                beforeEach(inject(function($rootScope,$controller,$compile) {
                    var el = document.createElement('div');
                     el.setAttribute('ng-grid','gridOptions');
                     el.className = 'gridStyle';
                    scope = $rootScope.$new();
                    $compile(el)(scope);
                    oCtrl = $controller('ARController',{
                        $scope: scope
                    });
                }));

                it("Advertiser Report controller should be registered",function() {
                    expect(oCtrl).not.toBeNull();
                });
            });
        });
    });

您将看到我尝试使用ng-grid属性创建和编译元素的位置.没有这样做我得到以下错误：

TypeError: Cannot read property ‘columns’ of undefined

这是控制器试图调用的结果
????$scope.gridOptions.$gridScope.columns.each

所以我添加了一个带有ng-grid属性的div的创建,并得到了一个新的错误：

TypeError: Cannot set property ‘gridDim’ of undefined

所以,我试图在$controller调用之前添加scope.gridOptions,但这让我回到原来的错误.我一直在寻找能够在不重写控制器和/或模板的情况下完成这项工作的方法,因为它们目前在生产中正常工作.

解决方法

第二个失败测试中的问题是gridOptions,并且在编译之前未定义myData.注意2个语句的顺序.

通过
????oCtrl = $controller(‘MainCtrl’,{$scope：$scope});
????$编译(ELM)($范围);

失败

$compile(elm)($scope);
oCtrl = $controller('MainCtrl',{ $scope: $scope });

在这两种情况下,您都尝试使用相同的html

elm = angular.element('<div ng-grid="gridOptions" style="width: 1000px; height: 1000px"></div>');

我建议你摆脱

oCtrl = $controller('MainCtrl',{ $scope: $scope });

操纵并使用以下HTML元素

elm = angular.element('<div ng-controller="MainCtrl" 
      ng-grid="gridOptions" style="width: 1000px; height: 1000px"></div>');

注意ng-controller =“MainCtrl”.

So the end story is that you need gridOptions defined somewhere so
that it ngGrid can access it. And make sure gridOptions dependent
code in controller is deferred in a $timeout.

另请参阅app.js中的细微变化

$timeout(function(){
    //your gridOptions dependent code
    $scope.gridOptions.$gridScope.columns.each(function(){
      return;
    });  
  });

这是working plnkr.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!