Submit angular form in unit test

Question

Is there a way to submit a form in unit test ?

I have a form like

<!-- notice that the controller is defined using controllerAs syntax -->
<form name="sign_up" ng-submit="auth.signUp(email, password)" role="form">

for example

SignUpCtrl = new _$controller_ 'SignUpCtrl', $scope: scope
SignUpForm = scope.sign_up # this holds the signup form

it '#signUp(email, password)', ->
  controllerSignUpMethod = sinon.spy SignUpCtrl, 'signUp'

  SignUpForm.email.$setViewValue 'em@il.com'
  SignUpForm.password.$setViewValue 'pa$$word'
  SignUpForm.confirm_password.$setViewValue 'pa$$word'
  # I can't find a way to submit the form here
  expect(controllerSignUpMethod).to.be.called

the SignUpForm is angular fromController.. but it I can't find a way to use it or the scope to submit the form...

One last thing... due some unfortunates I cannot use protractor or any other e2e package... my only option is to go with the unit tests... and the views (signup form) could be changed later... so there must exist a unit test for it to insure that it's still calling the correct controller with the correct parameters... the SignUpForm is loaded from templates in each test... so it's the actual form not just a mocked $templateCache of it

Okay I see now. You can't just SignUpCtrl.signUp()? or is it SignUpCtrl.auth.signUp()? — naneer, Feb 27 '15 at 03:11
This is the view.. And it uses controller as syntax... So `auth.signUp` calls the `SignUpCtrl.SignUp` method... The views would be modified later by the designer... So we have to make sure that its still working after the modifications — a14m, Feb 27 '15 at 03:35
So the `SignUpForm` loads the template and do some unit testing on validations of the model... Then it has to make sure that its calling the correct controller method (`SignUpCtrl.signUp(email, password)`) — a14m, Feb 27 '15 at 03:37
Oh okay, I wouldn't know the answer to this, but I found this [link](http://stackoverflow.com/questions/26675196/trigger-click-event-on-an-angularjs-directive-in-mocha-test-suite). Maybe it could help? It's testing a directive, but it's very similar. Using [jqlite](https://docs.angularjs.org/api/ng/function/angular.element) `.triggerHandler('submit')`, but I'm not sure on what. `SignUpForm.triggerHandler('submit')` maybe? Best of luck. — naneer, Feb 27 '15 at 18:48

naneer · Accepted Answer · 2015-02-27T22:33:45.353

since the controller is defined using controllerAs: 'auth' syntax..

use the following code :

SignUpCtrl = new _$controller_ 'SignUpCtrl as auth', $scope: scope
SignUpForm = scope.sign_up

it '#signUp(email, password)', ->
  controllerSignUpMethod = sinon.spy SignUpCtrl, 'signUp'

  SignUpForm.email.$setViewValue 'em@i.l'
  SignUpForm.password.$setViewValue 'pa$$word'
  SignUpForm.confirm_password.$setViewValue 'pa$$word'

  #=> trigger the submit event on the anugular element (or the compiled form)
  #=> you can get this using element.find('form')
  #=> or save it as the output of $compile(form)(scope)
  FormElement.triggerHandler('submit')

  expect(spy).to.be.calledWith 'em@i.l', 'pa$$word'

Submit angular form in unit test

1 Answers1