как проверить угловой элемент привязку в контроллере

Question

У меня есть следующий контроллер ...

angular.module('jobBoard').controller('JobListController', ['$scope','$window', function($scope, $window){ 

    $scope.keywordPlaceholder = 'What kind of job?'; 
    $scope.locationPlaceholder = 'Where? (city, state or zip)'; 

    $scope.onResize = function(){ 
     if ($window.innerWidth <= 480){ 
      $scope.keywordPlaceholder = 'What?'; 
      $scope.locationPlaceholder = 'Where?'; 
     } 
    } 

    angular.element($window).bind('resize', function(){ 
     $scope.onResize(); 
     $scope.$apply(); 
    }) 

    $scope.onResize(); 
    $scope.loadJobs(); 
}]); 

и это испытание жасмина ...

describe('JobListController', function(){ 
    var scope, controller; 

    describe('binding resize to window', function(){ 
     var mockWindow = { 
      resize: function(){} 
     } 

     beforeEach(inject(function($rootScope, $controller){ 
      scope = $rootScope.$new(); 
      $controller('JobListController', { $scope:scope, $window: mockWindow}); 
     })) 

     it('binds to the resize function', function(){ 
      spyOn(scope, 'onResize'); 
      spyOn(scope, '$apply'); 
      mockWindow.resize(); 
      expect(scope.onResize).toHaveBeenCalled(); 
      expect(scope.$apply).toHaveBeenCalled(); 
     }) 
    }) 
}) 

но терпит неудачу на scope.onResize ожидание. Я искал, как сумасшедший, о том, как правильно это сделать, но не может найти правильный ответ. Есть идеи? Благодарю.

Answer 1

Если честно, я никогда не пробовал это, поэтому я не могу сказать, будет ли это работать. Однако - вы путаете вызов функции с запуском события. Оператор bind привязывается к событию, а не к вызову функции.

От the MDN docs on javascript events, вы должны быть в состоянии сделать что-то вроде этого, чтобы создать событие с именем «изменить размер» и вызвать его:

describe('binding resize to window', function(){ 
    // Get a DOM element (there's probably a better way to do this...) 
    var mockWindow = angular.element('<div>')[0]; 
    // create the event 
    var resizeEvent = new Event('resize'); 


    beforeEach(inject(function($rootScope, $controller){ 
     scope = $rootScope.$new(); 
     $controller('JobListController', { $scope:scope, $window: mockWindow}); 
    })) 

    it('binds to the resize function', function(){ 
     spyOn(scope, 'onResize'); 
     spyOn(scope, '$apply'); 
     // call the event. 
     mockWindow.dispatchEvent(event); 
     expect(scope.onResize).toHaveBeenCalled(); 
     expect(scope.$apply).toHaveBeenCalled(); 
    }) 
}) 

Answer 2

Если вы хотите, чтобы проверить, что вы вкладываете в случае, Угловое-х $window сервиса для этой цели служит красиво:

describe('JobListController', function(){ 
    var scope, controller; 

    describe('binding resize to window', function(){ 
    beforeEach(inject(function($rootScope, $controller){ 
     scope = $rootScope.$new(); 
     spyOn($window, 'addEventListener').and.callThrough(); 
     $controller('JobListController', { $scope:scope }); 
    })) 

    it('binds to the resize function', function() { 
     expect($window.addEventListener).toHaveBeenCalledWith('resize', scope.onResize); 
    }) 
    }) 
}) 

В контроллере, связывается с помощью addEventListener вместо:

$window.addEventListener('resize', scope.onResize); 

Это позволит проверить при отвязать событие тоже:

it('stop listening to window resize', function() { 
    compileDirective(); 
    spyOn($window, 'removeEventListener'); 

    scope.$destroy(); 

    expect($window.removeEventListener).toHaveBeenCalledWith('resize', scope.onResize); 
}); 

После этого, вы свободны, чтобы проверить вашу scope.onResize логику самостоятельно.

Плюсы:

• легко сделать.
• Разрешить для проверки отвязать события
• хорошо работает в любом браузере (даже PhantomJS)

Минусы:

• Он не испытывает взаимодействие между каждыми частями (событие , слушатель, обработчик). Я полагаюсь на тесты более высокого уровня для этого (т. Е. E2E).