AngularJS茉莉花测试 - 元素隔离范围未定义

时间:2016-06-23 16:44:09

标签: javascript angularjs unit-testing jasmine

我正在尝试测试超时,但我遇到了元素范围的问题。我是编写JS测试的新手。

it( 'should have timer defined at start' )测试中,我的变量记录为未定义。这是为什么?

我认为isolateScope()会将指令的范围拉入?

我的测试看起来像这样:

https://plnkr.co/edit/IMrPd9g6HFSkgHizFF9p?p=preview

describe( 'Testing timeout', function(){
  var scope, $timeout, element;

  beforeEach(inject( function ($rootScope, $compile, _$timeout_, $injector ){
            scope = $rootScope.$new();
            $timeout = _$timeout_;

            scope.onWarning = function(){
                scope.warned = true;
            };

            element = '<div timeout on-warning="onWarning" on-timeout="onTimeout"></div>';
            element = $compile(element)(scope);

            scope.$apply();
            scope.$digest();

  }));

  it( 'should have timer defined at start', function(){
    console.log( element.isolateScope() , scope )
    expect( element.isolateScope().timeoutService.timer ).not.toBeFalsy;
  });

  it( 'should have run warning function', function(){
    $timeout.flush( 5000 );
    expect( scope.warned ).toBe( true );
  });

});

我的指示如下:

app.directive( 'timeout', function( timeoutService ){
  return {
    restrict: "A",
    scope: {
                onWarning: "&", // what function to fire when showing a warning
            },
            link: function( scope, elem, attr ){
                scope.timeoutService = timeoutService;
                if( !scope.onWarning ){ 
                    throw new Error( "Must provide on-warning for timeout directive." );
                }
                //console.log( scope.onWarning, scope.onTimeout );
                // register timeouts and warnings with the service
                timeoutService.onWarning = scope.onWarning; 
            }
  }
}); 

app.service( 'timeoutService', function( $timeout ){
  var _this = this;
  var timer = null;
  var time = 5000;

  this.startTimer = function(){
    timer = $timeout( function(){
      if( _this.onWarning ){
        _this.onWarning()();
      }
    }, time)
  }

  this.startTimer();

})

也许我的测试不正确?

2 个答案:

答案 0 :(得分:1)

您需要致电

beforeEach(module('plunker'));

在“测试超时”描述块中。你只是在另一个描述块中调用它

答案 1 :(得分:0)

我只关注范围,因为角度团队已经足够好地测试了$ compile服务,你知道这就是用于指令范围的内容。说实话,我通常只使用在指令外定义的Controller并测试它。你的指令中似乎没有任何东西需要你编译它来测试它,除了你使用链接函数而不是控制器。

您的指令没有将timeoutService附加到其范围,这很好。所以你不能看它(你不应该看!)。

AngularJS已经拥有$ timer服务。在您自己的服务中再次包装它既不必要又容易出错,所以我不会这样做。此外,它不知道传递给您的指令的onWarning函数。相反,只需从你的指令调用$ timeout并检查它没有挂起的调用,或者在$ timeout.flush()之后数据处于正确的状态;确保测试你在$ destroy上取消了任何待处理的超时。