如何注入在AngularJS指令单元测试服务 [英] How to inject a service in a directive unit test in AngularJS

问题描述

我需要测试指令，做一些注射服务几个电话。
下面code的一块就是一个例子指令，监听活动，如果输入重定向浏览器指定的元素里面pssed $ P $。

编辑：我得到我可以在E2E测试陆地上涉水的感觉的

？

  angular.module（'fooApp'）
  .directive（'gotoOnEnter'，['$位置'，函数（$位置）{    VAR _linkFn =功能链接（范围，元素，ATTRS）{        element.off（键preSS'）。在（'键preSS'功能（E）{
                  如果（e.key code === 13）
                  {
                       $ location.path（scope.redirectUrl）;
                  }
              }）;
    }    返回{
      限制：'A'，
      链接：_linkFn
    };
  }]）;
 

问题是，我还没有想出如何注入服务的指令，对他们的间谍。

我提出的解决方案是这样的：
的它不起作用，如预期，因为我还没有设法成功地注入 $ locacion 服务窥探。的

 描述（'指令：gotoOnEnter'，函数（）{
  beforeEach（模块（'fooApp'））;  VAR元素;  它（'应该访问的链接进入scope.url时，pssed $ P $，注入（函数（$ rootScope，$编译，$位置）{    元素= angular.element（'＆LT;输入类型=文本后藤上输入＆GT;'）;
    元素= $编译（元）（$ rootScope）;    $ rootScope.redirectUrl ='http://www.google.com';
    $ rootScope $摘要（）。    变种E = jQuery.Event（键preSS'）;
    e.key code = 13;
    element.trigger（E）;    spyOn（$位置，'通路'）;    期待（$ location.path）.toHaveBeenCalledWith（'http://www.google.com'）;
  }））;
 

此收益率

 已调用['http://www.google.com']，但它从来就没有所谓的间谍预期路径。
 

解决方案

要装修，存根，提供嘲笑或覆盖任何给定的服务，您可以使用 $提供服务。
$ provide.value ， $ provide.decorator 等文件的这里。

然后，你可以做的东西是这样的：

 变量$位置; beforeEach（函数（）{
    模块（'studentportalenApp'，函数（$提供）{
      $ provide.decorator（'$位置'，函数（$代表）{        $ delegate.path = jasmine.createSpy（）;        返回$代表;
      }）;
    }）;    注（功能（_ $位置指定：）{
      $位置= _ $位置指定：;
    }）;  }）;
 

...

 它（'进入时，应访问scope.redirectUrl链路pssed $ P $，注入（函数（$ rootScope，$编译，$位置）{
    元素= angular.element（'＆LT;输入类型=文本后藤上输入＆GT;'）;
    元素= $编译（元）（$ rootScope）;    $ rootScope.redirectUrl ='http://www.google.com';
    $ rootScope $摘要（）。    变种E = jQuery.Event（键preSS'）;
    e.key code = 13;
    element.trigger（E）;    $ rootScope $摘要（）。    期待（$ location.path）.toHaveBeenCalledWith（'http://www.google.com'）;}））;
 

I need to test a directive that does some calls to some injected services. The following piece of code is an example directive, that listens for events, and redirects the browser if enter is pressed inside a specified element.

Edit: I get the feeling I may be wading in E2E testing land?

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

The problem is that I have not figured out how to inject services to spy on them in directives.

My proposed solution looks like this: It does not work, as expected, because I have not managed to inject a $locacion service successfully to spy on.

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

This yields

Expected spy path to have been called with [ 'http://www.google.com' ] but it was never called.

解决方案

To decorate, stub, provide mocks or override any given service, you may use the $provide service. $provide.value, $provide.decorator etc. Documentation here.

Then you can do stuff like this:

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

}));

这篇关于如何注入在AngularJS指令单元测试服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！