title: TypeError: Cannot read property 'then' of undefined in testing AngularJS controller with Karma
body: <p>I am trying to write unit tests for a controller that gets a promise from a service, but in Jasmine I am getting:</p>
  
  <pre><code>TypeError: Cannot read property 'then' of undefined
  </code></pre>
  
  <p>In controller I call <code>.then()</code> on returned promise from service.</p>
  
  <p>Can anybody help please? I am surely missing something obvious.</p>
  
  <p>Here is a plunk: <a href="http://plnkr.co/edit/vJOopys7pWTrTQ2vLgXS?p=preview" rel="nofollow">http://plnkr.co/edit/vJOopys7pWTrTQ2vLgXS?p=preview</a></p>
  
  <pre><code>'use strict';
  
  describe('Language controller', function() {
      var scope, translationService, createController;
  
      beforeEach(function() {
          var mockTranslationService = {};
          module('dictApp', function($provide) {
              $provide.value('translationService', mockTranslationService);
          });
  
          inject(function($q) {
              mockTranslationService.languages = [
                  {
                      name: 'slovak'
                  },
                  {
                      name: 'czech'
                  }
              ];
  
              mockTranslationService.languagesWithWords = [{
                  name: 'slovak',
                  words: [{
                      key: 'Car',
                      translation: 'Auto',
                      createdOn: 0
                  }, {
                      key: 'Flower',
                      translation: 'Kvet',
                      createdOn: 0
                  }]
              }, {
                  name: 'czech',
                  words: {
                      key: 'Plaza',
                      translation: 'Namesti',
                      createdOn: 0
                  }
              }];
  
              mockTranslationService.getLanguages = function() {
                  var deferred = $q.defer();
  
                  deferred.resolve(this.languages);
                  return deferred.promise;
              };
          });
      });
  
      beforeEach(inject(function($controller, $rootScope, _translationService_) {
          scope = $rootScope.$new();
          translationService = _translationService_;
          createController = function () {
              return $controller('LanguageCtrl',
                      {$scope: scope, translationService: translationService});
          };
          scope.$digest();
      }));
  
      it('should get the language array', function() {
          spyOn(translationService, 'getLanguages');
          createController();
          expect(translationService.getLanguages).toHaveBeenCalled();
      });
  });
  </code></pre>
  
  <p>and this is the controller:</p>
  
  <pre><code>   dictControllers.controller('LanguageCtrl', ['$scope', 'translationService', function($scope, translationService){
  
  
          $scope.getLanguages = function() {
              translationService.getLanguages().then(function(){
                  $scope.languages = translationService.languages;
              });
          };
  
          $scope.getLanguages();
  
          $scope.getWords = function(language) {
              translationService.getWords(language);
          };
  
  
          $scope.newWord = {};
  
          $scope.addWord = function(language) {
              translationService.addWord($scope.newWord, language);
              $scope.newWord = {};
              };
  
      }]);
  </code></pre>