Testing Angular controllers with Jasmine

<!DOCTYPE html>
<html>

  <head>
    <link data-require="jasmine@*" data-semver="2.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.css" />
    <script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.js"></script>
    <script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine-html.js"></script>
    <script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/boot.js"></script>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <script data-require="angular-mocks@*" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular-mocks.js"></script>
    <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="controllers.js"></script>
    <script src="mainControllerTest.js"></script>
    <script src="movieControllerTest.js"></script>
  </head>

  <body>
    <h1>Angular controller test with Jasmine</h1>
  </body>

</html>

'use strict';

var movieApp = angular.module('movieApp', ['ngMockE2E']);

movieApp.controller('MainController', function($scope) {

  $scope.appName = 'Popcorn Time';

  $scope.sMovies = true;
  $scope.sAdmin = false;

  $scope.showMovies = function() {
    $scope.sMovies = true;
    $scope.sAdmin = false;
  };

  $scope.showAdmin = function() {
    $scope.sMovies = false;
    $scope.sAdmin = true;
  };
});

movieApp.controller('MovieController', function($scope, $http) {

  $scope.loadMovies = function() {
    return $http.get("/movies").success(function(response) {
      $scope.movies = response;
    });
  };
});


// --------------- mock $http requests ----------------------
movieApp.run(function($httpBackend) {
  
  // hack for angular element (MAKES THE TESTS BREAK!!!)
    var elSelect = angular.element;
    angular.element = function(id) {
        try {
            return elSelect.call(angular, id);
        } catch(err) {
            return $(id);
        }
    };
  
  $httpBackend.whenGET('/movies').respond([{
    id: 1,
    title: "Commando",
    actors: "Arnold Schwarzenegger, Rae Dawn Chong",
    director: "Mark L. Lester",
    year: 1985
  }, {
    id: 2,
    title: "Raw Deal",
    actors: "Arnold Schwarzenegger, Kathryn Harrold, Darren McGavin",
    director: "John Irvin",
    year: 1986
  }, {
    id: 3,
    title: "Predator",
    actors: "Arnold Schwarzenegger, Carl Weathers, Bill Duke",
    director: "John McTiernan",
    year: 1987
  }])
});

'use strict';

describe('Main Controller test suite', function() {

  describe('MainController', function() {
    var $scope;

    beforeEach(module('movieApp'));

    beforeEach(inject(function($rootScope, $controller) {
      $scope = $rootScope.$new();
      $controller('MainController', {
        $scope: $scope
      });
    }));

    it('should return the right name of the application', function() {
      expect($scope.appName).toBe('Popcorn Time');
    });

    it('should select movies and unselect admin', function() {
      $scope.showMovies();
      expect($scope.sMovies).toBe(true);
      expect($scope.sAdmin).toBe(false);
    });

    it('should select admin and unselect movies', function() {
      $scope.showAdmin();
      expect($scope.sMovies).toBe(false);
      expect($scope.sAdmin).toBe(true);
    });
  });
});

'use strict';

describe('Movie Controller test suite', function() {

  describe('MovieController', function() {

    var $scope, $httpBackend, createController, $http;

    beforeEach(module('movieApp'));

    beforeEach(inject(function($controller, $rootScope, _$httpBackend_, _$http_) {
      $scope = $rootScope.$new();
      $httpBackend = _$httpBackend_;
      $http = _$http_;

      createController = function() {
        return $controller('MovieController', {
          $scope: $scope
        });
      };
    }));

    afterEach(function() {
      $httpBackend.verifyNoOutstandingExpectation();
      $httpBackend.verifyNoOutstandingRequest();
    });

    it("should GET all the movies", function() {
      $httpBackend.expectGET('/movies').respond(200, [{}, {}, {}]);
      createController();
      $scope.loadMovies();
      $httpBackend.flush();
      expect($scope.movies.length).toBe(3);
    });
  });
});