Unit test controller that depends on form validation in AngularJS

Question

In my controller I want to invoke an action (say on Tab press) only when form is valid. Also I need to clear form as soon as form gets submitted succesfully. I have something like this

app.controller('CommentFormController', function($scope) {
  $scope.submit = function() {
    if($scope.commentForm.$valid) {
      // submit form
      $scope.comment = '';
      $scope.commentForm.$setPristine();
    }
  }
});

I'd like to test this, but it looks like I have to create this $scope.contactForm by hand and stub out $setPristine() function.

Is there any other way to test it? I mean can I somehow get instance of underlying FormController in my test?

How do you handle such cases?

If I find a decent way to achieve this I'll add it as an answer but I'm in the same situation at the mo and have some thoughts. The form is automatically bound to scope when the template loads, which is when the validation is wired in. We aren't accessing the template in these unit tests which implies we should be e2e testing instead but that's a bit of a pain if you need to mock out your backend. The team are also switching to Protractor for e2e tests but these aren't very TDD friendly. Will update if I make any progress. — daddywoodland
– daddywoodland, Commented Oct 18, 2013 at 8:48
I would also like to know the best way to do this as at the moment I am doing something like: $scope.commentForm = { $setPristine: function(){} }; — CallumD
– CallumD, Commented Oct 22, 2013 at 11:38
Yeah as @daddywoodland said, it's the lack of template it seems - it works in a directive (since you add in and $compile the html).. — Luke Madera
– Luke Madera, Commented Dec 21, 2013 at 5:57

Zimon · Accepted Answer · 2014-01-10 03:59:28Z

1

Setting the form to pristine will affect the state of the form but won't reset the form to your defaults values (if you've provided them). Instead you can use the DOM element method reset().

Something like this:

document.getElementById("yourform").reset();

or, since angularJS and jQuery play nicely, you can use css selectors (especially useful if you have multiple forms you want to clear at once.

So something like:

$("#yourform")[0].reset();

There are pure javascript ways to do it also: http://www.javascript-coder.com/javascript-form/javascript-reset-form.phtml

--- So in summary, you don't need to use specific methods to do this, simply use the DOM methods, jQuery, or pure javascript. Google will probably come out with a way to do this soon. Hope this helps.

answered Jan 10, 2014 at 3:59

Zimon

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:43:48Z

0

@grafthez I got same problem when try validate the form is valid in my controller by $scope.myForm.$valid.

I found a solution on https://stackoverflow.com/a/17129354. You can try to inject $compile then $compile(yourFormTemplate)($scope).

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Jul 7, 2014 at 2:41

Kien

1532 silver badges7 bronze badges

Collectives™ on Stack Overflow

Unit test controller that depends on form validation in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related