Test unitaire Angularjs bootstrap Modal

Question

J'ai une directive dans laquelle il y a un lien qui, lors d'un clic, montre des données dans un popup modal.

comment écrire des tests unitaires (jasmin) pour le clic de lien et aussi comment tester ce modèle est ouvert et les données dans le modal est montré correctement.

Pourriez-vous fournir des références?

Voici ce que je veux tester

angular.module(’sample', [ 
    'ui.bootstrap' 
]) 
.controller(’ employeeController 

», [ 'portée de $', '$ modal', fonction (portée de $, modal $) {

$scope.clickMe = function() { 
     var ModalInstanceCtrl = $modal.open({ 
      templateUrl: ‘template/empView.html', 
      controller: ‘employeeController', 
      resolve: { 
       employees: function() { 
        return $scope.depEmps; 
       } 
      }, 
      size: 'lg' 
     }); 
    }; 

}]).directive(‘empInfo', function() { 
    return { 
     restrict: 'E', 
     templateUrl: ‘asdf, 
     replace: true, 
     controller: 'employeeController', 
     scope: { 
      employees: "=" 
     } 
    }; 
}) 

Je veux vérifiez que lorsque ClickMe est appelé, un modèle est ouvert et les données sont correctement renseignées dans le modèle. Le modèle ne se ferme que sur la touche de la touche d'échappement dès maintenant.

Answer 1

Au début, vous devez créer une maquette modale:

function ModalMock { 
    this.open = function(modalArgs) { 
    return 
    }; 
} 

init dans votre test:

beforeEach(() => { 
     // create mocks 
     modalMock = new ModalMock(); 
     controller = $controller('MyCtrl', { 
     $scope: scope, 
     $modal: modalMock, 

    }); 

}); 

Et dans le bloc de test réel vous devez utiliser la méthode spyon:

it('should do something', function() { 

      var modalPromise = q.defer().promise; 

      spyOn(modalMock, 'open').andReturn({ result: modalPromise }); 

      controller.doSomething(arg); 


      // make sure that angular resolves/rejects the deferreds 
      scope.$digest(); 

      // verify that the modal is opened 
      expect(modalMock.open).toHaveBeenCalled(); 

     }); 

Answer 2

Vous pouvez compiler votre directive et cliquer dessus avec jQuery, après quoi vous pouvez créer spi es sur la fonction "modale", et s'attendent à ce que la fonction "modale" soit appelée sur l'élément. si vous avez quelque chose comme ceci:

$(element).modal('show'); 

Vous pouvez ajouter espion sur la fonction de l'élément et modal et attendre à ce que modal sera appelé avec le paramètre « show ». Et c'est tout pour le test unitaire, il suffit de tester si votre logique fonctionne. Si vous devez tester le composant Modal et qu'il est correctement affiché, il doit être testé dans les tests E2E.