Angular Controller Test Example

angular_controller.md

Example Controller

    angular.module('sportAdmin')
      .controller('TournamentListController', function ($scope, Tournament, Sports, Alerts) {

        this.getTournaments = function(){
          this.tournaments = Tournament.all()
          this.sports = Sports.all()
          this.organization = $scope.organization
        }

        this.create = function(tournament) {

          Tournament.create(tournament, function(result) {
            Alerts.success('TOURNAMENT.create_success')
            this.add(result.tournament)
          }.bind(this), function(error) {
            Alerts.error('TOURNAMENT.create_error')
          })

        }

        this.delete = function(tournament){
          Tournament.destroy(tournament.id, function() {
            this.remove(tournament)
            Alerts.success('TOURNAMENT.delete_success')
          }.bind(this), function (error) {
            Alerts.error('TOURNAMENT.delete_error')
          })
        }

        this.add = function(tournament) {
          this.tournaments.unshift(tournament)
        }

        this.remove = function(tournament) {
          var idx = this.tournaments.indexOf(tournament)
          this.tournaments.splice(idx, 1)
        }

        this.getTournaments()
      })

Example Service Mocks

var mockTournament =  {
  all: function() {
    return tournamentFixture()
  },

  create: function(tournament, success, error) {
    tournament.id = 1
    return success({tournament: tournament})
  },

  destroy: function(id, success, error) {
    return success()
  }
}

var mockAlerts=  {
  success: function(message) {
    return true
  },
  error: function(message) {
    return true
  }
}

Example Controller Tests:

    describe('TournamentListController', function() {

      var $rootScope, $controller, createController, tournament,  anyFunction, controller

      beforeEach(module('sportAdmin'))

      beforeEach(inject(function($injector) {

        $rootScope = $injector.get('$rootScope')
        $controller = $injector.get('$controller')
        anyFunction = jasmine.any(Function)

        createController = function(tournament) {
          return $controller('TournamentListController', {
              '$scope' : $rootScope, 'Tournament':  tournament, 'Alerts': mockAlerts
          })
        }
      }))

      ...

      describe('TournamentListController#create success', function() {

        beforeEach(function() {

          spyOn(mockTournament, 'create').and.callThrough()
          spyOn(mockAlerts, 'success').and.callThrough()
          spyOn(mockAlerts, 'error').and.callThrough()

          controller = createController(mockTournament)

          tournament = { name: "New Tournament", sport_id: 1 }

          controller.create(tournament)
        })

        it('should delegate tournament create to the service', function() {
          expect(mockTournament.create).toHaveBeenCalled()
        })

        it('should add the tournament to the list', function() {
          expect(controller.tournaments.length).toEqual(3)
        })

        it('should add the tournament to the top of the list', function() {
          expect(controller.tournaments[0].name).toEqual(tournament.name)
        })

        it('should display the success alert message', function() {
          expect(mockAlerts.success).toHaveBeenCalledWith('TOURNAMENT.create_success')
        })
      })

      ...

      describe('TournamentListController#delete error', function() {

        beforeEach(function() {

          mockTournament.destroy = function(id, success, error) {
            return error()
          }
          spyOn(mockTournament, 'destroy').and.callThrough()
          controller = createController(mockTournament)
          tournament = controller.tournaments[0]
          controller.delete(tournament)
        })

        it('should delegate tournament destroy to the service', function() {
          expect(mockTournament.destroy).toHaveBeenCalledWith(tournament.id, anyFunction, anyFunction)
        })

        it('should not remove the tournament when destroy fails', function() {
          expect(controller.tournaments).toEqual(tournamentFixture())
        })
      })

    })