web-dev-qa-db-ja.com

AngularJS + Jasmine：$ httpBackendが期待どおりに機能しない

Jasmine with Karmaを使用して、Angularで構築したアプリをテストしています。

ユーザーデータを読み込むサービスをテストする必要があり、$ httpBackendを使用して応答をモックしています。ただし、テストを実行すると、2つのエラーが発生しました。

  • エラー：フラッシュする保留中のリクエストはありません！
  • エラー：満たされていないリクエスト：GET https://api.github.com/users/wilk

モジュール：

'use strict';

app.service ('UserService', ['$resource', '$q', 'GITHUB_API_URL', function ($resource, $q, GITHUB_API_URL) {
  var userResource = $resource (GITHUB_API_URL + '/users/:user', {user: '@user'}) ,
      userModel = {};

  return {
    data: function () {
        return userModel;
    } ,
    populate: function (user) {
      var deferred = $q.defer () ,
          userRequest = userResource.get ({user: user});

      $q
          .when (userRequest.$promise)
          .then (function (data) {
              userModel = data;
              deferred.resolve (data);
          });

      return deferred.promise;
    }
  };
}]);

テスト：

'use strict';

describe ('Service: UserService', function () {
    beforeEach (module ('myApp'));

    var $appInjector = angular.injector (['myApp']) ,
        UserService = $appInjector.get ('UserService') ,
        GITHUB_API_URL = $appInjector.get ('GITHUB_API_URL') ,
        GITHUB_USER = $appInjector.get ('GITHUB_USER') ,
        $httpBackend;

    beforeEach (inject (function ($injector) {
        $httpBackend = $injector.get ('$httpBackend');

        $httpBackend
            .when ('GET', GITHUB_API_URL + '/users/' + GITHUB_USER)
            .respond ({
                login: GITHUB_USER ,
                id: 618009
            });
    }));

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

    describe ('when populate method is called', function () {
        it ('should returns user data', function () {
            $httpBackend.expectGET (GITHUB_API_URL + '/users/' + GITHUB_USER);

            UserService.populate (GITHUB_USER);
            $httpBackend.flush ();
            expect(UserService.data ()).toEqual ({
                login: GITHUB_USER ,
                id: 618009
            });

        });
    });
});

GITHUB_API_URLがと等しいと仮定しましょう ' https://api.github.com/ 'とGITHUB_USERはと等しい「ウィルク」。

Karma-Jasmine 0.1.5およびAngularJS 1.2.6でこのテストを実行しています（with Angular Mocks and Scenario 1.2.6 ）。

このコードの何が問題になっていますか？

angularjsunit-testingservicejasminekarma-runner
22
Wilk

各エラーについて個別に話しましょう。

エラー：フラッシュする保留中のリクエストはありません！

これは$httpBackendを介してリクエストが行われなかったために発生しているため、フラッシュするものは何もありません。これは、$httpBackendの前にUserServiceをインスタンス化しているため、Angularは実際の$httpの代わりに使用する必要があることを知らないためです。コンソールから、実際のリクエストが送信されていることがわかります。

エラー：満たされていないリクエスト：GET https://api.github.com/users/wilk

上記と同じ理由。 $httpBackendはサービスで使用されていないため、作成した期待が満たされることはありません。

上記のすべてを考慮した後、リファクタリングされた仕様は次のとおりです。

describe ('Service: UserService', function () {
    var UserService,
        GITHUB_API_URL,
        GITHUB_USER,
        $httpBackend;

    beforeEach(function() {
      module('plunker');

      inject(function( _$httpBackend_, _UserService_, _GITHUB_API_URL_, _GITHUB_USER_) {
        $httpBackend = _$httpBackend_;
        UserService = _UserService_;
        GITHUB_API_URL = _GITHUB_API_URL_;
        GITHUB_USER = _GITHUB_USER_;
      });
    });

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

    describe ('when populate method is called', function () {
        it ('should returns user data', function () {
            $httpBackend
              .whenGET(GITHUB_API_URL + '/users/' + GITHUB_USER)
              .respond ({
                  login: GITHUB_USER,
                  id: 618009
              }); 

            UserService.populate(GITHUB_USER);
            $httpBackend.flush();

            expect(UserService.data().login).toBe(GITHUB_USER);
            expect(UserService.data().id).toBe(618009);
        });
    });
});

Plunker

注：物事の注入方法を少し変更しましたが、他のすべての前に$httpBackendを作成する限り、あなたのやり方は問題ありません。

48
Michael Benford