angularjs - tutorial - unit test angular 5

AngularJS+Jasmine: $ httpBackend no funciona como se esperaba

Question

Estoy usando Jasmine con Karma para probar mi aplicación basada en Angular .

Tengo que probar un servicio que carga datos de usuario y estoy usando $ httpBackend para simular las respuestas. Sin embargo, cuando ejecuto la prueba, obtuve dos errores:

• Error: No hay solicitud pendiente de descarga!
• Error: solicitudes insatisfechas: GET https://api.github.com/users/wilk

Módulo:

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

Prueba:

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

        });
    });
});

Supongamos que GITHUB_API_URL es igual a '' https://api.github.com/ '' y GITHUB_USER es igual a ''wilk'' .

Estoy realizando esta prueba con Karma-Jasmine 0.1.5 y AngularJS 1.2.6 (con Angular Mocks y Scenario 1.2.6).

¿Qué hay de malo con este código?

Answer 1

Vamos a hablar de cada error por separado:

Error: No hay solicitud pendiente de descarga!

Eso está sucediendo porque no se realizó ninguna solicitud a través de $httpBackend , así que no hay nada que desechar. Esto se debe a que está creando UserService instancia de UserService antes de $httpBackend y Angular no sabe que debería usarlo en lugar del $http real. Si revisa la consola, verá que se está enviando una solicitud real.

Error: solicitudes insatisfechas: GET https://api.github.com/users/wilk

La misma razón que la anterior. Dado que el $httpBackend no utiliza $httpBackend , la expectativa que ha creado nunca se cumple.

Aquí está su especificación refactorizada después de considerar todo lo anterior:

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

Nota: He cambiado un poco la forma en que se inyectaban las cosas, pero la forma en que lo está haciendo está bien, siempre y cuando cree $httpBackend antes que $httpBackend .