title: Testing angular controller without mocking its dependencies
body: <p>I know there is tons of information on this question all over the internet (trust me, I've spent 2 whole days searching through all of it). So far nothing I have found really helps me.</p>
  
  <p>Here is the controller I want to test:</p>
  
  <pre><code>(function () {
      "use strict";
  
      angular
          .module("productManagement")
          .controller("ProductListController", ["productResource", ProductListController]);
  
      function ProductListController(productResource) {
          var vm = this;
  
          productResource.query(function(data) {
              vm.products = data;
          });
  
          vm.showImage = false;
  
          vm.toggleImage = function () {
              vm.showImage = !vm.showImage;
          }
      }
  })();
  </code></pre>
  
  <p>Here is a jasmine test that works:</p>
  
  <pre><code>describe('Controller: ProductListController', function() {
  
      var ProductListController;
  
      beforeEach(function() {
          module('productManagement');     
  
          inject(function($controller) {
              ProductListController = $controller('ProductListController', {});  
          });
      });
  
      it ('showImage should be false', function() { 
          expect(ProductListController.showImage).toBe(false);
      });
  });
  </code></pre>
  
  <p>All good, but now I want to test the vm.products to make sure its got data.</p>
  
  <p>However, the below jasmine test fails ( and this is what I really want to test):</p>
  
  <pre><code>describe('Controller: ProductListController', function() {
  
      var ProductListController;
  
      beforeEach(function() {
          module('productManagement');     
  
          inject(function($controller) {
              ProductListController = $controller('ProductListController', {});  
          });
      });
  
      it ('products should be defined', function() { 
          expect(ProductListController.products).toBeDefined();
      });
  });
  </code></pre>
  
  <p>The error is 'expects undefined to be defined'. So for some reason products is not getting populated with data, however when running my angular app normally this works fine.</p>
  
  <p>So now you may be wondering "what is going on inside of <strong>productResource</strong>?"
  Well, here you go:</p>
  
  <pre><code>(function () {
      "use strict";
  
      angular
          .module("common.services")
          .factory("productResource", ["$resource", productResource]);
  
      function productResource($resource) {
          return $resource("/api/products/:productId");
      }
  
  })();
  </code></pre>
  
  <p>My angular app actually uses <strong>$httpBackend</strong> to return some bogus product info. Therefore I do not want to mock this in my jasmine test, since that would be like mocking my mock..right? However, technically this is a unit test, so I should be mocking httpBackend right in my jasmine test. Well I have tried that too.... </p>
  
  <p>Here is the code where I tried to mock httpBackend in my test:</p>
  
  <pre><code>describe('Controller: ProductListController', function() {
  
      var ProductListController, httpBackend, $resource;
  
      beforeEach(function() {
          module('productManagement');    
  
          inject(function(_$httpBackend_, $controller, _$resource_) {
              httpBackend = _$httpBackend_;
              ProductListController = $controller('ProductListController', {});
              $resource = _$resource_;
          });
      });
  
      /*afterEach(function() {
          //httpBackend.flush();
          httpBackend.verifyNoOutstandingExpectation();
          httpBackend.verifyNoOutstandingRequest();
      });*/
  
      it ('products should be defined', function() {                
  
          var productsUrl = '/api/products/:productId';
          var products;
  
          httpBackend.whenGET(productsUrl).respond({
              'one': 1,
              'two': 2
          });
  
          httpBackend.expectGET(productsUrl);
  
          var rec = $resource("/api/products/:productId");
  
          rec.query(function(data) {
              products = data;
          });
  
          //httpBackend.flush();
  
          expect(products.one).toBe(1);
      });
  });
  </code></pre>
  
  <p>I have to comment out the httpBackend.flush() because of the error 'No pending request to flush !'. I also have to comment out the afterEach function because of other errors, such as 'unsatisfied requests'.</p>
  
  <p>Even if this did work, I am now not testing my controller functionality, but rather I am testing $resource. So this just doesn't seem right to me.</p>
  
  <p>Can someone please tell me what I am doing wrong? I would prefer to just do the first method, however at this point I'll take anything that works!</p>