title: How to mock ng-grid when unit testing a controller
body: <p>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.</p>
  
  <p><strong>Testing Software</strong><br>
  node@0.10.14<br>
  karma@0.10.2<br>
  karma-jasmine@0.1.5<br>
  karma-chrome-launcher@0.1.2</p>
  
  <p><strong>My Test:</strong></p>
  
  <pre><code>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();
                  });
              });
          });
      });
  </code></pre>
  
  <p>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:  </p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'columns' of undefined</p>
  </blockquote>
  
  <p>Which is a result of the controller attempting to call things like<br>
      $scope.gridOptions.$gridScope.columns.each</p>
  
  <p>So I added the creation of a div with ng-grid attribute, and got a new error:</p>
  
  <blockquote>
    <p>TypeError: Cannot set property 'gridDim' of undefined</p>
  </blockquote>
  
  <p>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.</p>