Angularjs - how to unit test form validation

Question

I'm using Jasmine to unit test my Angular App. How can I test form validation in my controller? For example, I have a login function:

$scope.login = function() {
    if($scope.form_login.$valid) {
      //send request with username and password
    };
};

I'm trying to set $valid to true, but I can't access the form here. I got an error TypeError: Cannot set property '$valid' of undefined:

it('should not send request if form validation fails', function() {
    $controller('loginController', {$scope: $scope});
    $scope.form_login.$valid = true;
    $scope.login();
})

Community · Accepted Answer · 2017-05-23 12:32:27Z

3

Unit test should not really test the form. To test the form and other not controller related things use e2e testing.

However if you really want to test validation in unit test see To test a custom validation angularjs directive or How to unit test angularjs form?

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Apr 29, 2016 at 3:04

Alex Ryltsov

3,0391 gold badge22 silver badges29 bronze badges

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

2 Comments

danday74 Over a year ago

Correct answer, move as much code logic as possible from view into controller and test controller code with unit tests, use protractor e2e testing for form testing

Gonzalo Pincheira Arancibia Over a year ago

@danday74 If use a service to login, I could be testing that service not have been called the method in a unit testing approach, and also, i could be testing in a integration approach using e2e protractor

Gonzalo Pincheira Arancibia · Accepted Answer · 2016-04-29 16:25:01Z

If you uses a service for save the data

$scope.login = function() {
    if($scope.form_login.$valid) {
      //send request with username and password
      MyService.login();
    };
};

Check if your service have not been called and mock the $scope.form_login.$valid property to false;

var MyService, controllerInjector, rootScope;
beforeEach(inject(function($controller, _MyService_, $rootScope){

  controllerInjector = $controller;
  MyService = _MyService_;
  rootScope = $rootScope;

}))

it('should not send request if form validation fails', function() {
  var scope, controller;
  scope = rootScope.$new();
  scope.form_login = {
    $valid : false;
  }
  var loginController = controllerInjector('loginController', {
    $scope : scope
  });

  spyOn(MyService,'login');

  scope.login();

  expect(MyService.login).not.toHaveBeenCalled();

});

Collectives™ on Stack Overflow

Angularjs - how to unit test form validation

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related