ユニットテスト$（ '＃modalId'）。modal（ 'show'）;定義されていません

Question

私は単位検査とangularjsの初心者です。彼らが表示されているかどうか

は、Iユニットは、私のモーダルをテストすると、エラーが返されました：

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

あなたはない$modalのモック、$modal.openが正常に返すもののmockを返却する必要はありませんopenファンクションはfakeModalモックに配置されています。偽のモーダルには、resultオブジェクトが必要です。このオブジェクトには、コールバック（OKまたはキャンセルボタンがクリックされたときに呼び出される）を格納する関数が含まれている必要があります。また、close関数（モーダルのOKボタンのクリックをシミュレートする）とdismiss関数（モーダルをキャンセルボタンをシミュレートする）が必要です。 closeおよびdismiss関数は、呼び出されたときに必要なコールバック関数を呼び出します。