title: Unit testing a modalInstance controller with Karma / Jasmine
body: <p><strong>EDIT : Quick &amp; Dirty solution at the end of this post</strong></p>
  
  <p>I am using a modal window from AngularUI-Bootstrap in the same way that it is explained on the website, except that I splitted files.
  Therefore I have :</p>
  
  <p><strong>CallingController.js :</strong></p>
  
  <pre><code>$scope.delete = function () {
      if ($scope.selected.length &gt; 0) {
          // [...]
          // preparing data
          // [...]
          var modalInstance = $modal.open({
              templateUrl: 'views/modalView.html',
              controller: 'modalCtrl',
              resolve: {
                  itemArray: function () {
                      return $scope.selected;
                  }
              }
          });
          modalInstance.result.then(function (confirm) {
              if (confirm === true) {
                  // [...]
                  // treat
                  // [...]
              }
          });
      }
  };
  </code></pre>
  
  <p><strong>modalController.js :</strong></p>
  
  <pre><code>myAppControllers.controller('modalCtrl',
      function ($scope, $modalInstance, itemArray) {
  
          $scope.accept = function () {
              $modalInstance.close(true);
          };
  
          $scope.reject = function () {
              $modalInstance.close(false);
          };
  
          $scope.itemArray = itemArray;
  
      });
  </code></pre>
  
  <p>and when I test this code with Karma (with the <strong>ui-bootstrap-tpls.min.js</strong> file loaded in the karma configuration file), I get the following error : 
  <strong>Error: [$injector:unpr] [<a href="http://errors.angularjs.org/1.2.15-build.2389+sha.c5f2f58/">http://errors.angularjs.org/1.2.15-build.2389+sha.c5f2f58/</a>$injector/unpr?p0=%24modalInstanceProvider%20%3C-%20%24modalInstance]<a href="http://errors.angularjs.org/1.2.15-build.2389+sha.c5f2f58/%24injector/unpr?p0=%24modalInstanceProvider%20%3C-%20%24modalInstance">1</a> at Error (native)</strong>, meaning that jasmine doesn't manage to find the provider for $modalInstance.</p>
  
  <p>I do not even test stuff on this controller, not yet, but here is my jasmine test file :</p>
  
  <p><strong>testModalController.js :</strong></p>
  
  <pre><code>describe('Controller: modalCtrl', function () {
  
      beforeEach(module('myApp'));
  
      var Ctrl;
      var scope;
  
      // Initialize the controller and a mock scope
      beforeEach(inject(
          function ($controller, $rootScope) {
              scope = $rootScope.$new();
  
              Ctrl = $controller('modalCtrl', { $scope: scope });
          })
      );
  
      describe('Initial state', function () {
          it('should instantiate the controller properly', function () {
              expect(Ctrl).not.toBeUndefined();
          });
  
          it('should initialize its values properly', function () {
  
          });
      });
  
  });
  </code></pre>
  
  <p>Have you got any clue about this problem ? It's not the first "external" module that I use (and test), and I did the same stuff than for the others, except that this time it doesn't work and I have no idea why.</p>
  
  <p><strong>==========================================</strong></p>
  
  <p><strong>EDIT: Quick &amp; probably dirty solution :</strong></p>
  
  <p>Okay, so based on the scope mocking method in the controller instantiation of Jasmine, I figured out how I could "solve" my problem, but it's probably quite dirty, so feel free to comment if you find a better way to do what I intend.</p>
  
  <p><strong>testModalController.js :</strong></p>
  
  <pre><code>describe('Controller: modalCtrl', function () {
  
      beforeEach(module('myApp'));
  
      var Ctrl;
      var scope;
      var modalInstance;
  
      // Initialize the controller and a mock scope
      beforeEach(inject(
          function ($controller, $rootScope, _$modal_) {
              scope = $rootScope.$new();
              modalInstance = _$modal_.open({
                  templateUrl: 'views/modalView.html'
              });
  
              Ctrl = $controller('modalCtrl', {
                  $scope: scope,
                  $modalInstance: modalInstance,
                  itemArray: function () { return ['a', 'b', 'c']; }
              });
          })
      );
  
      describe('Initial state', function () {
          it('should instantiate the controller properly', function () {
              expect(Ctrl).not.toBeUndefined();
          });
  
          it('should initialize its values properly', function () {
  
          });
      });
  
  });
  </code></pre>
  
  <p>This way, Jasmine doesn't search for providers anymore, because you already injected the items that are supposed to be needing those providers. It works, but I believe it could be done in a better way...</p>