title: How to test Angular $modal using Sinon.js?
body: <p>I am trying to write Unit tests for a $modal in AngularJS. The code for the modal is located in a controller as follows:</p>
  
  <pre><code>$scope.showProfile = function(user){
                  var modalInstance = $modal.open({
                  templateUrl:"components/profile/profile.html",
                  resolve:{
                      user:function(){return user;}
                  },
                  controller:function($scope,$modalInstance,user){$scope.user=user;}
              });
          };
  </code></pre>
  
  <p>The function is called on a button in an ng-repeat in the HTML as follows:</p>
  
  <pre><code> &lt;button class='btn btn-info' showProfile(user)'&gt;See Profile&lt;/button&gt;
  </code></pre>
  
  <p>As you can see the user is passed in and used in the modal, the data is then bound to the profile partial in its HTML.</p>
  
  <p>I am using Karma-Mocha along with Karma-Sinon to try to perform the unit tests but I cannot understand how to achieve this, I want to verify that the user getting passed in is the same one used in the resolve parameter of the modal.</p>
  
  <p>I have seen some examples of how to do this using Jasmine but I haven't been able to convert them to mocha + sinon tests.</p>
  
  <p>Here is my attempt:</p>
  
  <p>The setup code:</p>
  
  <pre><code>describe('Unit: ProfileController Test Suite,', function(){
  beforeEach(module('myApp'));
  
  var $controller, modalSpy, modal, fakeModal;
  
  fakeModal  = {// Create a mock object using spies
      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 modalOptions = {
      templateUrl:"components/profile/profile.html",
      resolve:{
          agent:sinon.match.any //No idea if this is correct, trying to match jasmine.any(Function)
      },
      controller:function($scope,$modalInstance,user){$scope.user=user;}
  };
  
  var actualOptions;
  
  beforeEach(inject(function(_$controller_, _$modal_){
      // The injector unwraps the underscores (_) from around the parameter names when matching
      $controller = _$controller_;
      modal = _$modal_;
      modalSpy = sinon.stub(modal, "open");
      modalSpy.yield(function(options){ //Doesn't seem to be correct, trying to match Jasmines callFake function but get this error - open cannot yield since it was not yet invoked.
          actualOptions = options;
          return fakeModal;
      });
  }));
  
  var $scope, controller;
  
  beforeEach(function() {
      $scope = {};
  
      controller = $controller('profileController', {
          $scope: $scope,
          $modal: modal
      });
  
  });
  
  afterEach(function () {
      modal.open.restore();
  });
  </code></pre>
  
  <p>The actual test:</p>
  
  <pre><code>describe.only('display a user profile', function () {
          it('user details should match those passed in', function(){
              var user= { name : "test"};
              $scope.showProfile(user);
  
              expect(modalSpy.open.calledWith(modalOptions)).to.equal(true); //Always called with empty
              expect(modalSpy.open.resolve.user()).to.equal(user); //undefined error - cannot read property resolve of undefined
          });
      });
  </code></pre>
  
  <p>My test setup and actual test is based off Jasmine code I have come across and trying to convert it to Mocha + SinonJS code, I am new to both AngularJS and writing Unit Tests so I'm hoping I just need a nudge in the right direction. </p>
  
  <p>Can anyone share the correct approach to take when using Mocha + SinonJS instead of Jasmine?</p>