How to spoof ng-grid while unit testing the controller

Question

I'm currently trying to write tests for existing blocks of code and run into a problem with a controller that has a ng grid inside it. The problem arises because the controller tries to interact with the grid during initialization.

Testing software
node @ 0.10.14
karma@0.10.2 karma-jasmine@0.1.5 karma-chrome-launcher@0.1.2

My test:

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

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

TypeError: cannot read undefined property columns

Which is the result of the controller trying to call things like $ Scope.gridOptions. $ GridScope.columns.each

, div ng-grid :

TypeError: 'gridDim' undefined

, scope.gridOptions $controller, . / , .

Answer 1

- gridOptions, myData . .

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

plnkr.

Answer 2

(!) , . , , ng-. ! ( ) - , . ViewModel (.. $), ViewModel.

MVVM .

, ( , DOM ..) , , , - .