Question

我使用Karma和Jasmine对这个项目进行测试。

我收到错误：

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返回一个对象。现在我得到这个错误，即使我阻止整个规范并运行不同的规范如下：

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

  })
})

Answer 1

ngGrid.min.js需要添加到karma配置文件中，如下所示：

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。

AngularJS测试 - ngGrid不可用

1 个答案: