title: Mocking Modal instance in Angular with Jasmine
body: <p>I'm trying to test the opening of a modal in angular but running into this error:</p>
  
  <pre><code>Error: Unexpected request: GET app/templates/editComment/editComment.html
  No more request expected
  </code></pre>
  
  <p>Here's my code I'm testing:</p>
  
  <pre><code>vm.editComment = function (comment) {
          vm.modalInstance = $modal.open({
              templateUrl: 'app/templates/editComment/editComment.html',
              controller: 'EditCommentCtrl as vm',
              comment: comment,
              resolve: {
                  comment: function () {
                      return comment;
                  }
              }
          }).result.then(function (result) {
              vm.getComments();
          });
      }
  </code></pre>
  
  <p>Test Setup:</p>
  
  <pre><code>beforeEach(inject(function ($rootScope, $controller, $q, $sce) {
     q = $q;
     var stateParam = {id: 1};
     scope = $rootScope.$new();
     var Listmanager = "";
  
  
  
   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 );
  }};
  
    var modalInstance = {
          open: jasmine.createSpy('modalInstance.open')
      }
  
    modalInstance.open.and.returnValue(fakeModal);
  
  
  
  
  ctrl = $controller('CommentsCtrl', { $scope: scope, $modalInstance:                modalInstance, ds: dsMock, $stateParams: stateParam, $sce: $sce, Listmanager: Listmanager, ns: nsMock });
      }));
  </code></pre>
  
  <p>Here's my test:</p>
  
  <pre><code>it('edit comments should open modal', inject(function () {
          var comment = "test";
          ctrl.editComment(comment);
          scope.$apply();
          expect(modalInstance.open).toHaveBeenCalled();
      }));
  </code></pre>
  
  <p>I've looked at both <a href="https://stackoverflow.com/questions/24373220/angularjs-ui-bootstrap-testing-modal-instance-controller">Testing AngularUI Bootstrap modal instance controller</a> and <a href="https://stackoverflow.com/questions/21214868/angularjs-ui-bootstrap-mocking-modal-in-unit-test">Mocking $modal in AngularJS unit tests</a> to try and get some answers but nothing that I've tried has worked so far. </p>
  
  <p>Any help would be appreciated.</p>