модульное тестирование $ ('# modalId'). Modal ('show'); undefined

Question

Я новичок в модульном тестировании, а также в angularjs.

Когда блок я проверить свою модальность, если они показывают или нет, была возвращена ошибка:

> TypeError: undefined is not a constructor (evaluating 
> '$('#modalId').modal('show')') 

Как я могу проверить блок мои модальности?

Answer 1

Это зависит от того, какие рамки тестирования вы используете. В случае jasmine вы можете отслеживать модальность. Допустим, у вас есть этот контроллер:

'use strict'; 

angular.module('angularUiModalApp') 
    .controller('MainCtrl', function($scope, $modal, $log) { 
     $scope.items = ['item1', 'item2', 'item3']; 

     $scope.open = function() { 

      $scope.modalInstance = $modal.open({ 
       templateUrl: 'myModalContent.html', 
       controller: 'ModalInstanceCtrl', 
       resolve: { 
        items: function() { 
         return $scope.items; 
        } 
       } 
      }); 

      $scope.modalInstance.result.then(function(selectedItem) { 
       $scope.selected = selectedItem; 
      }, function() { 
       $log.info('Modal dismissed at: ' + new Date()); 
      }); 
     }; 
    }) 
    .controller('ModalInstanceCtrl', function($scope, $modalInstance, items) { 
     $scope.items = items; 
     $scope.selected = { 
      item: $scope.items[0] 
     }; 

     $scope.ok = function() { 
      $modalInstance.close($scope.selected.item); 
     }; 

     $scope.cancel = function() { 
      $modalInstance.dismiss('cancel'); 
     }; 
    }); 

Тогда тест выглядит следующим образом:

'use strict'; 

describe('Controller: MainCtrl', function() { 

    // load the controller's module 
    beforeEach(module('angularUiModalApp')); 

    var MainCtrl, 
     scope; 

    var fakeModal = { 
     result: { 
      then: function(confirmCallback, cancelCallback) { 
       //Store the callbacks for later when the user clicks on the OK or Cancel button of the dialog 
       this.confirmCallBack = confirmCallback; 
       this.cancelCallback = cancelCallback; 
      } 
     }, 
     close: function(item) { 
      //The user clicked OK on the modal dialog, call the stored confirm callback with the selected item 
      this.result.confirmCallBack(item); 
     }, 
     dismiss: function(type) { 
      //The user clicked cancel on the modal dialog, call the stored cancel callback 
      this.result.cancelCallback(type); 
     } 
    }; 

    beforeEach(inject(function($modal) { 
     spyOn($modal, 'open').andReturn(fakeModal); 
    })); 


    // Initialize the controller and a mock scope 
    beforeEach(inject(function($controller, $rootScope, _$modal_) { 
     scope = $rootScope.$new(); 
     MainCtrl = $controller('MainCtrl', { 
      $scope: scope, 
      $modal: _$modal_ 
     }); 
    })); 

    it('should show success when modal login returns success response', function() { 
     expect(scope.items).toEqual(['item1', 'item2', 'item3']); 

     // Mock out the modal closing, resolving with a selected item, say 1 
     scope.open(); // Open the modal 
     scope.modalInstance.close('item1'); 
     expect(scope.selected).toEqual('item1'); 
     // No dice (scope.selected) is not defined according to Jasmine. 
    }); 
}); 

Вам нужно возвращать mock что $modal.open обычно возвращается, а не издеваться над $modal, который не делает включают функцию open, выложенную в fakeModal макет. Поддельный модальный должен иметь объект result, который содержит функцию then для хранения обратных вызовов (вызывается при нажатии на кнопки OK или Cancel). Ему также нужна функция close (имитация кнопки ОК, нажимающей на модальную) и функцию dismiss (имитация кнопки «Отмена» на модальном). Функции закрытия и увольнения вызывают необходимые функции обратного вызова при вызове.