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

Question

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

测试软件
节点@0.10.14
业力@0.10.2
业力茉莉@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: 无法读取未定义的属性“列”

这是控制器尝试调用类似
的结果 $scope.gridOptions.$gridScope.columns.each

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

TypeError: 无法设置未定义的属性“gridDim”

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

Answer 1

您的（主要！）问题是控制器正在对视图进行假设。它不应该知道，因此不应该与 ng-grid 交互。控制器应该是独立于视图的！这种质量（和依赖注入）使控制器具有高度可测试性。控制器应该只更改 ViewModel（即它的 $scope），并在测试中验证 ViewModel 是否正确。

否则会违反 MVVM 范式和最佳实践。

如果您觉得必须从控制器访问视图（即指令、DOM 元素等），那么您可能做错了什么。

Answer 2

第二个Failing测试的问题是gridOptions和myData在编译之前没有定义。注意 2 个语句的顺序。

通过 oCtrl = $controller('MainCtrl', { $scope: $scope }); $编译（榆树）（$范围）；

失败

$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"。

所以最后的故事是你需要在某个地方定义gridOptions 它ngGrid 可以访问它。并确保 gridOptions 依赖 控制器中的代码在 $timeout 中延迟。

另外看看 app.js 的细微变化

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

这里是working plnkr。