AngularJS +茉莉花：$ httpBackend未正常工作

问题描述

我使用的茉莉花是噶，以测试我的应用程序建立在角

I'm using Jasmine with Karma to test my app built on Angular.

我已经测试加载用户数据的服务，我使用的 $ httpBackend 的嘲笑回应。
然而，当我运行测试，我得到了两个错误：

I've to test a service that loads user data and I'm using $httpBackend to mock the responses.However, when I run the test, I got two errors:

• 错误：没有挂起请求刷新


• 错误：预约等待人数：GET

模块：

'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等于的的和GITHUB_USER等于的威尔克的

我运行这个测试是噶茉莉花0.1.5 和 AngularJS 1.2.6 （与角嘲弄和情景1.2.6）。

I'm running this test with Karma-Jasmine 0.1.5 and AngularJS 1.2.6 (with Angular Mocks and Scenario 1.2.6).

有什么不对的code？

What's wrong with this code?

推荐答案

让我们谈谈每个单独错误：

Let's talk about each error separately:

错误：没有挂起请求刷新

这是怎么回事，因为没有请求是通过 $ httpBackend 制作，所以没有什么刷新。那是因为你是实例 UserService 在 $ httpBackend 等角不知道应该用它代替真正的 $ HTTP 。如果检查出控制台，你会看到一个真实的请求发送。

That's happening because no request was made through $httpBackend, so there's nothing to flush. That's because you are instantiating UserService before $httpBackend and so Angular doesn't know it should use it instead of the real $http. If you check out the console you'll see that a real request is being sent.

错误：预约等待人数：GET

Error: Unsatisfied requests: GET https://api.github.com/users/wilk

同样的原因之上。由于 $ httpBackend 不被使用的服务，您已经创建永远不会满足的期望。

Same reason as the above. Since $httpBackend isn't being used by the service, the expectation you've created is never fulfilled.

这是你的天赋在考虑上述所有的重构后：

Here's your spec refactored after considering all of the above:

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

请注意：我已经改变了被注入一点点的方式，但你正在做的方式是蛮好的，只要你创建 $ httpBackend 前一切。

Note: I've changed the way things were being injected a little bit, but the way you are doing is just fine, as long as you create $httpBackend before everything else.

这篇关于AngularJS +茉莉花：$ httpBackend未正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！