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

问题描述

我需要测试一个指令，该指令对某些注入的服务进行一些调用.以下代码是一个示例指令，它侦听事件，并在指定元素内按下 Enter 时重定向浏览器.

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.

我觉得我可能在 E2E 测试区涉水?

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.

我提出的解决方案如下所示:它没有按预期工作，因为我没有成功注入 $locacion 服务来监视.

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

这会产生

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

推荐答案

要装饰、存根、提供模拟或覆盖任何给定的服务，您可以使用 $provide 服务.$provide.value, $provide.decorator 等文档 这里.

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屋！