Comment injecter un service dans une directive de l'unité de test en AngularJS

J'ai besoin de tester une directive qui fait des appels à des injecté services.
Le morceau de code suivant est un exemple de directive, qui écoute les événements, et redirige le navigateur si la touche entrée est pressée à l'intérieur d'un élément spécifié.

Edit: j'ai l'impression que j'ai peut-être marcher dans E2E tests de terre?

angular.module('fooApp')
  .directive('gotoOnEnter', ['$location', function ($location) {

    var _linkFn = function link(scope, element, attrs) {

        element.off('keypress').on('keypress', function(e) {
                  if(e.keyCode === 13)
                  {
                       $location.path(scope.redirectUrl);
                  }
              });
    }

    return {
      restrict: 'A',
      link: _linkFn
    };
  }]);

Le problème est que je n'ai pas compris comment injecter des services de l'espionnage sur eux dans les directives.

Ma solution proposée ressemble à ceci:
Il ne fonctionne pas comme prévu, car je n'ai pas réussi à injecter un $locacion réussi à espionner.

describe('Directive: gotoOnEnter', function () {
  beforeEach(module('fooApp'));

  var element;

  it('should visit the link in scope.url when enter is pressed', inject(function ($rootScope, $compile, $location) {

    element = angular.element('<input type="text" goto-on-enter>');
    element = $compile(element)($rootScope);

    $rootScope.redirectUrl = 'http://www.google.com';
    $rootScope.$digest();

    var e = jQuery.Event('keypress');
    e.keyCode = 13;
    element.trigger(e);

    spyOn($location, 'path');

    expect($location.path).toHaveBeenCalledWith('http://www.google.com');
  }));

Cela donne

Expected spy path to have been called with [ 'http://www.google.com' ] but it was never called.
  • Vous devez créer l'espion avant d'essayer de naviguer. Je crois que si vous vous déplacez à l'appel à 'spyOn' vers le haut de la fonction, il fonctionne comme prévu.
InformationsquelleAutor Kenneth Lynne | 2013-04-01
  1. 35

    Pour décorer, talon, fournir des simulacres ou de remplacer un service donné, vous pouvez utiliser le $provide service.
    $provide.value, $provide.decorator etc. Documentation ici.

    Ensuite, vous pouvez faire des trucs comme ça:

     var $location;

 beforeEach(function() {
    module('studentportalenApp', function($provide) {
      $provide.decorator('$location', function($delegate) {

        $delegate.path = jasmine.createSpy();

        return $delegate;
      });
    });

    inject(function(_$location_) {
      $location = _$location_;
    });

  });

    ...

    it('should visit the link in scope.redirectUrl when enter is pressed', inject(function ($rootScope, $compile, $location) {
    element = angular.element('<input type="text" goto-on-enter>');
    element = $compile(element)($rootScope);

    $rootScope.redirectUrl = 'http://www.google.com';
    $rootScope.$digest();

    var e = jQuery.Event('keypress');
    e.keyCode = 13;
    element.trigger(e);

    $rootScope.$digest();

    expect($location.path).toHaveBeenCalledWith('http://www.google.com');

}));
    InformationsquelleAutor Kenneth Lynne