AngularJS測試 - ngGrid不可用

我正在使用Karma和Jasmine在此項目上運行測試。AngularJS測試 - ngGrid不可用

我得到的錯誤：

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.

在規範下面，我嘗試使用spyOn搶調用itunes.getArtist模擬調用服務並返回一個測試值。如果它有效，我應該期待findArtist返回一個Object。現在我即使我屏蔽掉整個規範，運行不同的規範這樣一個得到這個錯誤：

it('should call getArtist', function() { 
    spyOn(itunesService, 'getArtist'); 
    scope.artist = "The Dudes"; 
    $scope.findArtist(); 
    expect(itunesService.getArtist).toHaveBeenCalled(); 
})

這裏的應用

var app = angular.module('itunes', ['ngGrid'])

而這裏的控制器

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()"><a href="{{row.getProperty(col.field)}}"><img src="http://www.icty.org/x/image/Miscellaneous/play_icon30x30.png"></a></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(); 
} 
});

這是服務

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

而這裏的規範

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

    }) 
})

來源

2016-02-18 Brett Caudill

你是否在你的karma.conf中加載了ng-grid的JavaScript文件？ –

我沒有。我正在使用CDN將其鏈接起來，而且我似乎無法找到可下載並鏈接進行測試的文件。編輯：如果有一種方法只是從單元測試中排除ngGrid，那將是最好的解決方案。 –

ngGrid.min.js需要被添加到因果報應的配置文件，就像這樣：

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' 
],

這也需要添加jQuery的。

來源

2016-02-18 23:49:19

AngularJS測試 - ngGrid不可用

回答

相關問題