Karma/Jasmine unit testing and ag-grid

Question

I'm stuck with my Karma/Jasmine tests of an AngularJS 1.3.15 application using ag-grid 3.0.0 because of an 'undefined' when trying to access to the API functions (e.g. $scope.gridOptions.api.showNoRowsOverlay()).

After googling and trying a lot (with no luck at all), I am left with two options:

a) try to initialise somehow the grid. I've found out a solution that people from ng-grid (link) adopted:

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

$compile(elm)($scope);

b) try to mock the entire angularGrid module with an instruction like:

angular.module("angularGrid", []);

Could someone give me some hints or a guideline (even better!) for getting rid of this dependency?

Thank you in advance, Nicola

---

UPDATE 2016/06/19 @RamiShareef

The structure of a simple SPA that I'm following at the moment is the following:

//AngularJS module creation
var reportModule = angular.module('reportModule', ['agGrid']);

//AngularJS service creation. This service serves the SPA controller.
reportModule.service('reportModuleService', [function(){

    var self = this;

    //Function that builds the column definition for agGrid
    self.buildColumnDefinitions = function(){

        var columnDefinitions = [{headerName:"Name", field:"userName"},
                                 {headerName:"Login", field:"login"}];

        return columnDefinitions;
    }

    //Function that acts as a factory for the agGrid state builder
    self.buildDataGridState = function(columnDefinitions){

        var dataGridState = {

            columnDefs: columnDefinitions,
            rowData: null
        };

        return dataGridState;
    }

   //Function that updates the data grid rows
   self.updateDataGridRows = function(dataGridState, rowData){

        dataGridState.api.setRowData(propertyData);

        return dataGridState;
    }

    //Function that returns some data to load into the grid
    self.loadSomeData = function(){

         //Return a promise with some data to display...
    }
}]);

//AngularJS definition for the SPA controller
reportModule.controller('reportModuleController', ['reportModuleService', function(reportModuleService){

    var self = this;

    //List of column definitions
    self.columnDefinitions = self.reportModuleService.buildColumnDefinitions();

    //Definition of grid properties and its initialization
    $scope.gridOptions = self.reportModuleService.buildDataGridState(self.columnDefinitions);

    //Let's now load data into the grid...
    self.reportModuleService.loadSomeData().then(function(someGridData){

        self.reportModuleService.updateDataGridRows($scope.gridOptions, someGridData);
    });
}]);

After having set up this architecture, you'll find that mocking the agGrid calls is easier because in your Karma/Jasmine tests you just need to define a spy on the service methods that handle the grid state:

spyOn(testReportModuleService, 'updateDataGridRows').and.callFake(function(){});

or

spyOn(testReportModuleService, 'resetDataGridRows').and.callFake(function(){});

I hope this might help out people stuck like me with Karma/Jasmine tests!