angularjs - 在对 Controller 进行单元测试时如何模拟 ng-grid

Question

我目前正在尝试为现有代码块编写测试，并遇到了内部有嵌套 ng-grid 的 Controller 的问题。该问题来自于 Controller 在初始化时尝试与网格交互。

测试软件
节点@0.10.14
业力@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

这是 Controller 尝试调用类似内容的结果
$scope.gridOptions.$gridScope.columns.each

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

TypeError: Cannot set property 'gridDim' of undefined

因此，我尝试在 $controller 调用之前添加scope.gridOptions，但这让我回到了最初的错误。我一直在寻找无需重写 Controller 和/或模板即可完成这项工作的方法，因为它们目前在生产中正常工作。

Answer 1

这里的(主要!)问题是 Controller 正在对 View 做出假设。它不应该知道 ng-grid，因此不应该与 ng-grid 交互。 Controller 应该独立于 View !这种质量(和依赖注入(inject))使得 Controller 具有高度可测试性。 Controller 应该只更改 ViewModel(即它的 $scope)，并在测试中验证 ViewModel 是否正确。

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

如果您觉得必须从 Controller 访问 View (即指令、DOM 元素等)，那么您可能做错了什么。