title: Testing modular AngularJS w/ Jasmine & Karma
body: <p>Struggling to get unit testing set up in Jasmine/Karma. I have a controller with a service dependency, and that service has another service dependency. I am not organizing my modules by type (Directives, Services, etc), but rather by feature (layout, summaryView, etc). </p>
  
  <p>Here's the architecture: </p>
  
  <pre><code>angular.module('myApp', ['ngResource', 'myApp.base', 'myApp.layout','myApp.common']);
  angular.module('myApp.base', ['myApp.common']);
  angular.module('myApp.common',[]);
  angular.module('myApp.layout',['myApp.common']);
  </code></pre>
  
  <p>Controller: </p>
  
  <pre><code>angular.module('myApp.layout')
      .controller('LayoutCtrl', ['$scope', '$rootScope', '$timeout', 'layoutService', 'urlService', 'BaseService',
          function ($scope, $rootScope, $timeout, layoutService, urlService, BaseService) {
              //controller code here
      });
  </code></pre>
  
  <p>Layout Service: </p>
  
  <pre><code> angular.module('myApp.layout')
      .service('layoutService', ['$http', '$resource', '$rootScope', '$location', '$route', 'errorHandlingService', 'utilService',
          function ($http, $resource, $rootScope, $location, $route, errorHandlingService, utilService) {
              //service code here
      });
  </code></pre>
  
  <p>From what I understand, if I simply include <code>beforeEach(module('myApp.layout'));</code>, I should have access to my controllers, services, filters, and directives in my layout module.</p>
  
  <p>Instead, the following code fails: </p>
  
  <pre><code>describe('Layout Controller', function() {
    var ctrl, scope, service;
  
    beforeEach(module('myApp'));
    beforeEach(module('myApp.layout'));
    beforeEach(inject(function($controller, $rootScope, layoutService) {
  
        scope = $rootScope.$new();
        service = layoutService;
        //Create the controller with the new scope
        ctrl = $controller('LayoutCtrl', {$scope: scope, layoutService: service});
        dump(scope);
      }));
      it('should exist', function() {
          expect(ctrl).toBeDefined();
      });
  });
  </code></pre>
  
  <p>With this error: </p>
  
  <pre><code>Chrome 26.0 (Mac) Layout Controller should exist FAILED
      Error: Unknown provider: layoutServiceProvider &lt;- layoutService
          at Error (&lt;anonymous&gt;)
          at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js:28:236
          at Object.c [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js:26:13)
          at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js:28:317
          at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js:26:13)
          at Object.d [as invoke] (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js:26:147)
          at workFn (http://code.angularjs.org/1.0.4/angular-mocks.js:1754:20)
      Error: Declaration Location
          at window.jasmine.window.inject.angular.mock.inject (http://code.angularjs.org/1.0.4/angular-mocks.js:1740:25)
          at null.&lt;anonymous&gt; (/Users/scottsilvi/svn/BARO/web/src/test/js/unit/myApp.layoutModule.js:6:14)
          at /Users/scottsilvi/svn/BARO/web/src/test/js/unit/myApp.layoutModule.js:1:1
      Expected undefined to be defined.
      Error: Expected undefined to be defined.
          at null.&lt;anonymous&gt; (/Users/scottsilvi/svn/BARO/web/src/test/js/unit/myApp.layoutModule.js:15:16)
  Chrome 26.0 (Mac): Executed 10 of 10 (1 FAILED) (0.36 secs / 0.014 secs)
  </code></pre>
  
  <p>Thoughts? </p>