title: How do I unit test a service-dependent function in Jasmine?
body: <p>I would like to unit test a function in an Angular controller that relies on an asynchronous API call (a promise). </p>
  
  <p>I have a function in a controller that calls a service and sets a $scope variable in the controller based on the result of the service:</p>
  
  <pre><code>$scope.display = 'loading';
  
  $scope.loadData = function() {                           
          ApiService.getSummary().then(                 
              function (response) {                               
                  $scope.displayData(response.data);
                  $scope.display = 'boxes';                    
              },                                                  
              function (error) {                                  
                  $scope.display = 'error';                    
              }                                                   
          );                                                      
      };
  </code></pre>
  
  <p>I have the following Jasmine unit test</p>
  
  <pre><code>var FunctionFixtures = {
          successFunc: function() {
              var deferred = $q.defer();
              var response = {
                  'data': dataVar
              };
              deferred.resolve(response);
              return deferred.promise;
          },
          errorFunc: function() {
              var deferred = $q.defer();
              deferred.reject();
              return deferred.promise;
          }
      };
  
  it('should show the boxes on data load success', function(){
          spyOn(ApiService, 'getSummary').and.callFake(FunctionFixtures.successFunc);
          $scope.loadData();
          expect($scope.display).toBe('boxes');
      });
  </code></pre>
  
  <p>When I run the test, I get the following error:</p>
  
  <pre><code>Error: Expected 'loading' to be 'boxes'.   
  </code></pre>
  
  <p>I essentially want to fake the api call and return either a success or a failure and ensure that $scope.display is set to the appropriate string i.e. 'boxes' for success and 'error' failure. Any thoughts on how to do this?</p>