4

だから私はangularjsとそのモックライブラリが初めてです。特定のGETリクエストが行われたことをテストしようとしていますが、2番目のアサーションで常にこのエラーが発生し、理由がわかりません:

Error: Unsatisfied requests: GET /1.json

以下のコードを台無しにしたことはありますか?

App.js

var App = angular.module('App', []).config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  }).when('/Items', {
    templateUrl: 'views/items.html',
    controller: 'Ctrl'
  }).otherwise({
    redirectTo: '/'
  });
}]);

Ctrl.js

function Ctrl($scope, $http, $filter) {
  $scope.items = [];

  $http.get('/1.json').success(function(data) {$scope.items = data.items;});
}

Ctrl.$inject = ["$scope","$http", "$filter"];

スペック/Ctrl.js

describe('Controller: Ctrl', function() {
  var $httpBackend;
  // load the controller's module
  beforeEach(module('App'));
  beforeEach(inject(function($injector) {
    $httpBackend = $injector.get('$httpBackend');

    // backend definition common for all tests
    $httpBackend.whenGET('/1.json').respond('Response!');
  }));

  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });

  var Ctrl, scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function($rootScope, $controller) {

    scope = $rootScope.$new();
    Ctrl = $controller('Ctrl', {
      $scope: scope
    });
  }));

  it('should initialize with 0 items', function() {
    expect(scope.items.length).toBe(0);
    $httpBackend.flush();
  });

  it('should make store request', function(){
    var controller = scope.$new(Ctrl);
    $httpBackend.expectGET('/1.json');
    $httpBackend.flush();
  });
});

編集:アプリとコントローラーのコードを追加しました。

4

1 に答える 1

5

ついにユニットテストが機能するようになりました！主な理由は、アプリケーションを再構築して、より意味のあるものにし、よりモジュール化したためです。

これに遭遇する次の人を助けるために情報を提供しようとします：

まず、$http の代わりに $resource を使用するように切り替えました。

$injector を注入する代わりに、次のように$httpBackendを注入しました。

beforeEach(inject(function(_$httpBackend_, $rootScope, $route,  $controller){

  $httpBackend = _$httpBackend_;
  $httpBackend.expectGET('/path/to/api').respond([{id:1}]);

「Ctrl」を文字列として参照する代わりに、実際のクラスを渡しました

Ctrl = $controller('Ctrl', { $scope: scope });

なりました

var ProductsCtrl = ['$scope', function($scope){ ... }];

Ctrl = $controller(ProductsCtrl, {
  $scope: scope
});`

$resources を使用している場合は、angular-resources.js ファイルを参照していることを確認してください。

私は Angularjs が大好きです。テストの方法に頭を悩ませるには、少し時間がかかると思います。頑張ってください！

于 2013-02-25T07:40:13.017 に答える