After working a bit with angular 1 I've found some issues to automate promises testing. I had figure out that testing HTTP communication is not always a simple endevour and it could take some effort to test a controller that handles a couple of API calls and reacts on them.

So here is a simple case on a controller injecting a User $resource and its test spec. I would dive the case in 2 ways: Canonical Way and Testing Concerns Way.

Canonical Way

  @newco.controller 'SignUpController', ( $scope, User) ->

  $scope.saveUser = (form) ->
    new User($scope.account).$save().then (response) ->
      # Do something when Success
    , (response) ->
      # Do something else when fail

So the way to test this code would be to Mock the http request from User $resource and retuning 200 or 401 in case there is an error.

  # Simple Jasmine test to ensure the test suit is able to run

describe 'SignUpController', ->
  controller = null
  scope = null

  beforeEach(module('myModule'))

  beforeEach inject ($controller, $rootScope, User) ->
    scope = $rootScope.$new()

    controller = $controller 'SignUpController',
      $scope: scope
      User: User


  describe 'when Success', ->
    beforeEach inject ($httpBackend) ->
      $httpBackend.expectPOST("User/api/url").respond 200, { content: "some content" }

    it 'Should so something', ->
      scope.saveUser({})
      $httpBackend.flush()
      expect("#Do Something").toBeTruthy()

  describe 'when Fail', ->
    beforeEach inject ($httpBackend) ->
      $httpBackend.expectPOST("User/api/url").respond 422, { data: { errors: "A bunch of errors" } }

    it 'Should so something else', ->
      scope.saveUser({})
      $httpBackend.flush()
      expect("#Do Something else").toBeTruthy()

Testing Concerns Way

So in order to test actually what the controller does and not what the $resource object does I suggest to move the mocking one level up in the onion skins layers and mock the promise returned by the $resource instead of what the resource does. For doing this I would like to modify this controller in order to have a more clear vision of the mocked promised.

  @newco.controller 'SignUpController', ( $scope, User) ->

  $scope.saveUserObect= ()->
    new User($scope.account).$save()

  $scope.saveUser = (form) ->
    $scope.saveUserObect().then (response) ->
      # Do something when Success
    , (response) ->
      # Do something else when fail

and the spec could look like this:

  # Simple Jasmine test to ensure the test suit is able to run

describe 'SignUpController', ->
  controller = null
  scope = null

  beforeEach(module('myModule'))

  beforeEach inject ($controller, $rootScope, User) ->
    scope = $rootScope.$new()

    controller = $controller 'SignUpController',
      $scope: scope
      User: User


  describe 'when Success', ->
    beforeEach inject ($q) ->
      defferred = $q.defer()
      defferred.resolve({ content: "some content" })
      spyOn(scope, "saveUserObect").andReturn (defferred.promise)->

    it 'Should so something', ->
      scope.saveUser({})
      scope.$apply()
      expect("#Do Something").toBeTruthy()

  describe 'when Fail', ->
    beforeEach inject ($q) ->
      defferred = $q.defer()
      defferred.resolve({ data: { errors: "A bunch of errors" } })
      spyOn(scope, "saveUserObect").andReturn (defferred.promise)->

    it 'Should so something else', ->
      scope.saveUser({})
      scope.$apply()
      expect("#Do Something else").toBeTruthy()

After using this spec for a while I realize that I can extend the promise generation to a Jasmine Spy prototype method and reused as needed in other tests. So I came up whit this solution:

  # Simple Jasmine test to ensure the test suit is able to run

describe 'SignUpController', ->
  controller = null
  scope = null

  beforeEach(module('myModule'))

  beforeEach inject ($controller, $rootScope, User, $q) ->
    scope = $rootScope.$new()

    jasmine.Spy.prototype.andResolve = (value)->
      @plan = ()->
        defferred = $q.defer();
        defferred.resolve(value);
        defferred.promise;
      @

    jasmine.Spy.prototype.andReject = (value)->
      @plan = ()->
        defferred = $q.defer();
        defferred.reject(value);
        defferred.promise;
      @


    controller = $controller 'SignUpController',
      $scope: scope
      User: User


  describe 'when Success', ->

    it 'Should so something', ->
      spyOn(scope, "saveUserObect").andResolve({ content: "some content" })
      scope.saveUser({})
      scope.$apply()
      expect("#Do Something").toBeTruthy()

  describe 'when Fail', ->

    it 'Should so something else', ->
      spyOn(scope, "saveUserObect").andReject({ data: { errors: "A bunch of errors" } })
      scope.saveUser({})
      scope.$apply()
      expect("#Do Something else").toBeTruthy()
    

I would like to know how to extend this prototype to the whole test environment so I can reuse them in other test. So far here is my idea of how you can improve a littler your tests readability.

Do you know how to convert the beforeEach inside one describe to a general before each. Or do you know how to extend jasmine.Spy with and AngularJs dependency?

  # Extend this for whole test suite or in general as dependent on Angularjs $q.

    jasmine.Spy.prototype.andResolve = (value)->
      @plan = ()->
        defferred = $q.defer();
        defferred.resolve(value);
        defferred.promise;
      @

    jasmine.Spy.prototype.andReject = (value)->
      @plan = ()->
        defferred = $q.defer();
        defferred.reject(value);
        defferred.promise;
      @