title: How to write unit test for a controller that depends on a factory service which itself depends on the $http service
body: <p>I am struggling to understand how to unit test a simple app AngularJS with Jasmine and Karma. I have tried googling but haven't made any progress with my own code. Specially around mocking and injecting of a factory service that depends on the built-in $http service.</p>
  
  <p>Also, is good practice to unit test both the controller and factory service or one of them is sufficient.</p>
  
  <p>I have uploaded the code to plunkr and would appreciate any help</p>
  
  <p><a href="https://plnkr.co/edit/WBpJ7gUZrNm8LwnCOsnR" rel="nofollow">https://plnkr.co/edit/WBpJ7gUZrNm8LwnCOsnR</a></p>
  
  <p>factory.main.js</p>
  
  <pre><code>angular.module('hwApp').factory('mainFactory', ['$http', function($http){
    return {
       getData: function(){
         return $http.get('https://jsonplaceholder.typicode.com/posts/1');
       }
    }
  }]);
  </code></pre>
  
  <p>controller.main.js</p>
  
  <pre><code>angular.module('hwApp').controller('MainCtrl', ['mainFactory', function(mainFactory){
    vm = this;
    mainFactory.getData().then(function(res){
      vm.httpData = res.data;
    })
  }]);
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="hwApp"&gt;
  
    &lt;head&gt;
      &lt;script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;script src="factory.main.js"&gt;&lt;/script&gt;
      &lt;script src="controller.main.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MainCtrl as vm"&gt;
      &lt;h1&gt;{{vm.httpData.title}}&lt;/h1&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>