Why won't $scope be found in my AngularJS / Karma unit test?

Question

My controller:

angularMoonApp.controller('SourceController', ['$scope', '$rootScope', '$routeParams', 'fileService', function ($scope, $rootScope, $routeParams, fileService) {
  $scope.init = function() {
    $rootScope.currentItem = 'source';

    fileService.getContents($routeParams.path).then(function(response) {
      $scope.contents = response.data;
      $scope.fileContents = null;
      if(_.isArray($scope.contents)) {
        // We have a listing of files
        $scope.breadcrumbPath = response.data[0].path.split('/'); 
      } else {
        // We have one file
        $scope.breadcrumbPath = response.data.path.split('/');
        $scope.breadcrumbPath.push('');

        $scope.fileContents = atob(response.data.content);

        fileService.getCommits(response.data.path).then(function(response) {
          $scope.commits = response.data;
        });
      }
    });
  }

  $scope.init();
}]);

My unit test:

(function() {
  describe('SourceController', function() {
    var $scope, $rootScope, $httpBackend, $routeParams, $q, createController, fileService, deferred;

    beforeEach(module('angularMoon'));

    beforeEach(inject(function($injector) {
      $httpBackend = $injector.get('$httpBackend');
      $rootScope = $injector.get('$rootScope');
      $routeParams = $injector.get('$routeParams');
      $scope = $rootScope.$new();
      $q = $injector.get('$q');
      deferred = $q.defer();

      fileService = $injector.get('fileService');
      var $controller = $injector.get('$controller');

      createController = function() {
        return $controller('SourceController', {
          '$scope': $scope,
          '$routeParams': $routeParams,
          'fileService': fileService
        });
      };
    }));

    it("should set the current menu item to 'source'", function() {
      createController();
      $scope.init();
      expect($rootScope.currentItem).toBe('source');
    });

    it("should get test the getContents call of the fileService", function() {
      spyOn(fileService, 'getContents').andCallThrough();
      createController();
      $scope.init();

      expect(fileService.getContents).toHaveBeenCalled();
    });

    it("should return an object with multiple files", function() {
      var multipleFiles = [{path: '.DS_Store'}, {path: '.bowerrc'}];
      deferred.resolve(multipleFiles);
      spyOn(fileService, 'getContents').andReturn(deferred.promise);

      createController();
      $scope.init();

      expect($scope.contents).toBe(multipleFiles);
      expect($scope.breadcrumbPath).toBe('');
    });
  });
})();

The last test fails with:

Expected undefined to be [ { path : '.DS_Store' }, { path : '.bowerrc' } ].
Expected undefined to be ''.

Why is the $scope undefined here?

Answer 1

Your controller is expecting you to inject in $rootScope which you are not doing in your unit test.

You have:

  createController = function() {
    return $controller('SourceController', {
      '$scope': $scope,
      '$routeParams': $routeParams,
      'fileService': fileService
    });

But but should have:

  createController = function() {
    return $controller('SourceController', {
      '$scope': $scope,
      '$rootScope': $rootScope,
      '$routeParams': $routeParams,
      'fileService': fileService
    });

Also, you will want to call this code:

createController();
$scope.init();

before you resolve your promise:

deferred.resolve(multipleFiles);

Answer 2

The scope is not undefined. What is undefined is $scope.contents and $scope.breadcrumbPath.

And that's because promise callbacks are always being called asynchronously. You need to call

$scope.$apply()

before verifying your expectations.