AngularJS Testing - ngGrid is not available - angularjs

Question

I'm using Karma and Jasmine to run tests on this project.
I'm getting an error of:
Failed to instantiate module itunes due to:
Failed to instantiate module ngGrid due to
Module 'ngGrid' is not available! You either misspelled the module name or forgot to load it.
In the spec below I'm trying to simulate the call to the service by using spyOn to grab the call to itunes.getArtist and return a test value. If it works I should expect findArtist to return an Object. Right now I get this error even if I block out the entire spec and run a different spec like this one:
it('should call getArtist', function() {
spyOn(itunesService, 'getArtist');
scope.artist = "The Dudes";
$scope.findArtist();
expect(itunesService.getArtist).toHaveBeenCalled();
})
Here's the app
var app = angular.module('itunes', ['ngGrid'])
And here's the controller
var app = angular.module('itunes');
app.controller('mainCtrl', function($scope, itunesService, $timeout){
$scope.songData = ...
$scope.gridOptions = {
data: 'songData',
height: '110px',
sortInfo: {fields: ['Song', 'Artist', 'Collection', 'Type'], directions: ['asc']},
columnDefs: [
{field: 'Play', displayName: 'Play', width: '40px', cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><img src="http://www.icty.org/x/image/Miscellaneous/play_icon30x30.png"></div>'},
{field: 'Artist', displayName: 'Artist'},
{field: 'Collection', displayName: 'Collection'},
{field: 'AlbumArt', displayName: 'Album Art', width: '110px', cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><img src="{{row.getProperty(col.field)}}"></div>'},
{field: 'Type', displayName: 'Type'},
{field: 'CollectionPrice', displayName: 'Collection Price'},
]
};
$scope.findArtist = function() {
itunesService.getArtist($scope.artist).then(function(response) {
$scope.songData = response.data.results.map(function(item) {
return {
AlbumArt: item.artworkUrl100,
Artist: item.artistName,
Collection: item.collectionName,
CollectionPrice: item.collectionPrice,
Play: item.previewUrl,
Type: item.kind
}
});
})
}
$scope.getSongData = function() {
$scope.findArtist();
}
});
Here's the service
var app = angular.module('itunes');
app.service('itunesService', function($http, $q){
this.getArtist = function(name) {
var baseUrl = 'https://itunes.apple.com/search?term=';
return $http({
method: "JSONP",
url: baseUrl + name + '&callback=JSON_CALLBACK'
})
}
});
And here's the spec
describe('itunes', function() {
beforeEach(module('itunes'));
describe('mainCtrl', function() {
var controller, scope, itunesService, ngGrid;
beforeEach(inject(function($rootScope, _itunesService_, $controller) {
scope = $rootScope.$new();
itunesService = _itunesService_;
controller = $controller('mainCtrl', { $scope: scope });
}))
it('should find artist with itunesService', function(done) {
var testValue = {
data: {
artworkUrl100: 'someUrl',
artistName: 'Beach Dudes',
collectionName: 'Beach it up',
collectionPrice: '$999,999,999.99',
previewUrl: 'somePreviewUrl',
kind: 'song'
}
};
spyOn(itunesService, 'getArtist').and.returnValue(testValue);
scope.artist = "Beach Dudes"
var result = scope.findArtist();
expect(result).toEqual(jasmine.any(Object))
})
})
})

Answer 1

ngGrid.min.js needs to be added to the karma config file, like so:
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/jQuery/jquery-2.2.0.min.js',
'bower_components/angular-mocks/ng-grid.min.js',
'js/app.js',
'js/mainCtrl.js',
'js/itunesService.js',
'test/spec/test.js'
],
This also requires jQuery to be added.