如何嘲笑NG-网格时单元测试控制器 [英] How to mock ng-grid when unit testing a controller

问题描述

我目前正在写现有code块，并运行到一个问题，与具有它里面嵌套NG-网格控制器的测试。这个问题来自于控制器试图与初始化电网互动。

I'm currently trying to write tests for existing blocks of code and running into an issue with a controller that has a nested ng-grid inside of it. The issue comes from the controller trying to interact with the grid on initialization.

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

Testing Software
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-网格属性的元素。如果不这样做，我得到以下错误：

You'll see where I've tried to create and compile an element with the ng-grid attribute. Without doing this I get the following error:

类型错误：无法读取属性'列'的未定义

TypeError: Cannot read property 'columns' of undefined

哪一个的控制器的结果试图呼叫之类的东西搜索
    $ scope.gridOptions。$ gridScope.columns.each

Which is a result of the controller attempting to call things like
$scope.gridOptions.$gridScope.columns.each

所以，我添加了NG-网格属性的div的创建，并得到了新的错误：

So I added the creation of a div with ng-grid attribute, and got a new error:

类型错误：无法设置属性gridDim未定义

TypeError: Cannot set property 'gridDim' of undefined

所以，我尝试了$控制器调用之前添加scope.gridOptions，但是这把我带回原来的错误。我一直在寻找办法，使这项工作而无需重写控制器和/或模板，因为它们是目前在产的正常工作。

So, I tried to add scope.gridOptions before the $controller call, but this brought me back to the original error. I've been searching for way to make this work without rewriting the controller and/or templates, since they are currently working correctly in production.

推荐答案

在第二个失败的测试问题是gridOptions和myData的是不是之前编译定义。注意到2语句序列。

The problem in the second Failing test is gridOptions and myData is not defined prior to the compilation. Notice the sequence of the 2 statements.

传
    oCtrl = $控制器（'MainCtrl'，{$范围：$范围}）;
    $编译（榆树）（$范围内）;

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

失败

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

在这两种情况下，你要使用相同的HTML

In both cases you are trying to use the same html

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

我建议你摆脱

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

演习，并使用以下HTML元素，而不是

maneuvers and use the following HTML element instead

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

通知 NG-控制器=MainCtrl 。

Notice ng-controller="MainCtrl".

所以，到底故事是，你需要 gridOptions 确定这样的地方
  它 ngGrid 可以访问它。并确保gridOptions依赖
  在控制器code被延迟，在$超时。

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的细微变化来看看

Also take a look at the slight changes in app.js

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

下面是href=\"http://plnkr.co/edit/sueuP6R4W4MJjKbiN7t3?p=$p$pview\" rel=\"nofollow\">工作plnkr 的

Here is the working plnkr.

这篇关于如何嘲笑NG-网格时单元测试控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！