How to write unit test for a controller that depends on a factory service which itself depends on the $http service
<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>