2016-09-20 57 views
0

我有一个我试图测试的键盘快捷键指令。它的目的是用事件数据触发$rootScope.$broadcast()。在应用程序中它没有任何问题,但我无法得到这个测试测试通过尽可能彻底,因为我想。

(function(){ 
    'use strict'; 

    angular 
     .module('app.common') 
     .directive('keyboardShortcuts', keyboardShortcuts); 

    // @ngInject 
    function keyboardShortcuts($document, $rootScope){ 
     return { 
      restrict: 'A', 
      link 
     } 

     function link(scope, el, attrs){ 
      $document.bind('keypress', event => { 
       console.log('detected keypress'); 
       $rootScope.$broadcast('keyboardShortcut', event); 

       scope.$digest(); // seems to make no difference 
      }); 
     } 
    } 

})(); 

对于单元测试,我添加了一个$scope.$on处理程序来表明广播实际上是被制成,听了,但由于某种原因间谍没有做它的工作。

describe('KeyboardShortcuts Directive', function(){ 
    'use strict'; 

    let $element; 
    let $scope; 
    let vm; 
    let $document; 
    let $rootScope; 

    const mockKeyboardEvent = { 
     type: 'keypress', 
     bubbles: true, 
     altKey: false, 
     ctrlKey: false, 
     shiftKey: false, 
     which: 106 
    } 

    beforeEach(module('app.common')); 

    beforeEach(inject(function(_$rootScope_, $compile, _$document_){ 
     $element = angular.element('<div keyboard-shortcuts></div>'); 
     $rootScope = _$rootScope_.$new(); 
     $document = _$document_; 

     $scope = $rootScope.$new(); 
     $compile($element)($scope); 
     $scope.$digest(); 

     spyOn($rootScope, '$broadcast'); 
    })); 

    //////////// 

    it('should broadcast when a key is pressed', function(){ 
     $scope.$on('keyboardShortcut', (event, data) => { 
      console.log('wtf!?'); 
      expect(data.which).toBe(106); 
     }); 

     $document.triggerHandler(mockKeyboardEvent); 

     $scope.$digest(); // seems to make no difference 

     expect($rootScope.$broadcast).toHaveBeenCalled(); 
    }); 
}); 

这里是控制台输出。你可以看到代码看起来在工作。

[15:33:57] Starting 'build:common:js'... 
[15:33:58] Finished 'build:common:js' after 227 ms 
[15:33:58] Starting 'test:common'... 
20 09 2016 15:33:58.250:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/ 
20 09 2016 15:33:58.250:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 
20 09 2016 15:33:58.253:INFO [launcher]: Starting browser PhantomJS 
20 09 2016 15:33:58.797:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#37Fv2zndO5Z6XAZ8AAAg with id 3035140 
.. 
LOG: 'detected keypress' 
LOG: 'wtf!?' 
PhantomJS 2.1.1 (Mac OS X 0.0.0) KeyboardShortcuts Directive should broadcast when a key is pressed FAILED 
    Expected spy $broadcast to have been called. 

以前在单元测试控制器的时候,我也遇到过这样的麻烦。我试图监视在activate()方法中运行的方法,该方法立即运行(Papa样式),通过将spyOn(...)方法放在控制器实例化的以上,我能够让我的间谍工作。在这种情况下,我试图把我的spyOn放在'beforeEach'之前的各种地方,没有任何东西似乎有所作为。

我也试图把expect..broadcast..beenCalled()东西$on处理器内的明显的解决方案,但没有任何工作,即使是主张通过和占总证明一个作出广播。

我有种感觉,被窥探的$ rootScope与被注入和工作的$ rootScope是不一样的,但我不知道这是怎么回事。

回答

0

正确的变量命名很重要。

$rootScope = _$rootScope_.$new(); 

是在角单元测试广泛传播的错误之一。

问题是,被称为$rootScope的东西只是子作用域,而不是根作用域。看来,很容易忘记这一点,所以

spyOn($rootScope, '$broadcast'); 

存根$broadcast方法在某些范围。

应该

$rootScope = _$rootScope_; 
    $scope = $rootScope.$new(); 

而且

$scope.$digest(); // seems to make no difference 

应该不会有因为jQuery/jqLit​​e事件是不依赖于消化周期。

+0

更改'$ rootScope = _ $ rootScope_.new()'似乎已经成功了。我在另一项测试中遇到了一些问题,但没有这样做,所以这就是为什么我保持这种模式。看来我必须再次检查那些测试。谢谢! – coblr

+0

当然,不客气。 – estus

相关问题