How to test form validation in Angular

Question

I'm attempting to write tests around a form that uses Angular.

After following this solution, I'm able to access the form's scope inside the e2e test. Now with this code:

scope('Form', function(scope) {
    scope.email = "test@test.com";
    scope.password = "abcd1234";

    expect(scope.form.$valid).toBe(true);
})

For whatever reason, scope.form.$valid is false. If I wrap that inside a setTimeout(), it works perfectly well. Angular's sleep() method is of no use.

Any pointers?

score 2 · Answer 1 · answered Dec 11 '13 at 00:54

2

You should $digest the scope adding scope.$digest() after the last scope.password.

answered Dec 11 '13 at 00:54

Mimo

6,015
6
36
46

Apologies, there were a few more steps necessary to get this working, but you are correct. Thanks! – DefZep Dec 11 '13 at 02:01

score 0 · Answer 2 · answered Dec 11 '13 at 02:04

Thanks to mimo's advice, I arrived at a final solution.

A custom dsl statement had to be constructed, in order to fool expect into taking a Future.

angular.scenario.dsl('expectScope', function() {
  var _retrieve = function(source, target) {
      if(target == '') return source;
      var targets = target.split('.');
      var nextTarget = targets[0];
      return _retrieve(source[nextTarget], targets.splice(1).join('.') );
  };
  var chain = angular.extend({}, angular.scenario.matcher);

  chain.not = function() {
      this.inverse = true;
      return chain;
  };

  return function(scope, name) {
      this.future = new angular.scenario.Future('scope.'+name, function() {});
      this.future.value = _retrieve(scope, name);
      return chain;
  };
});

By calling scope.$digest before expectScope(scope, 'value.othervalue'), everything now works as expected.

How to test form validation in Angular

2 Answers2