0

I'd like to test a form in Jasmine, using Karma. When I enter wrong credentials and click the button, a notification appears with the appropriate message. Unfortunately, in the iframe in karma doesn't show this div, so the next expect fails because the selector does not match any element. 

it('Testing a form', function () {
     browser().navigateTo('/index.html');
     input('firstName').enter('Wrong');
     input('lastName').enter('Wrong');
     element(':button.btn').click();
     expect(element('.msg h1').text()).toMatch('Wrong Credentials');
}

The error I'm getting is

Selector .msg h1 did not match any elements.

When I use sleep(10) or pause() in order to see the form after the click event, the message is not appeared, that's why the selector doesn't match any element. Any idea please? Thank you very much!

jimakos17
  • 905
  • 4
  • 14
  • 33
  • How is the notification shown? I've seen a lot of similar issues if elements are brought in with a transition. – Andyrooger Oct 10 '13 at 16:50
  • There is a directive which shows the messages. It's not only a hidden div which I make it visible when the credentials are correct. – jimakos17 Oct 10 '13 at 19:38
  • Do you think you'd be able to boil down your code and tests into a small relevant sample for plunker or jsfiddle? I'm not sure there's enough information to see what's wrong here (for me at least). – Andyrooger Oct 10 '13 at 23:09
  • Unfortunately, I cannot do that but am I right to expect, using that test, to display the message in the iframe of karma when I'm getting it in the browser? Just to say that the firstName and lastName are not the id but the ng-model of the inputs. – jimakos17 Oct 10 '13 at 23:53
  • As far as I'm aware, if your ng-model names match up and your button selector is finding something, the test should be fine. All I can suggest is to pause after every line and manually test that those elements exist and the correct data is input. Otherwise it sounds like the test may be picking up a genuine bug from your app... – Andyrooger Oct 11 '13 at 00:02
  • I removed the directive that I used and I added $rootScope.errorMessage = "test"; in the ctrl.
    {{errorMessage}}
    in the html and now I'm trying to test that by expect(binding('$rootScope.errorMessage')).toBe('test'); but once again is not working. The error I'm getting is Cannot read property 'element' of undefined. I have also tried without $rootScope in the test. Any help please.     – jimakos17 Oct 11 '13 at 08:38
  • Is there any example how to test a form in which when I click a button to show an error message? I'm struggling to find but it seems impossible. – jimakos17 Oct 12 '13 at 18:02
  • This plunker does essentially this http://plnkr.co/edit/mfYLHu?p=preview. I think we'd really need to see more code to be able to help much more - the directive that shows your error and the code using it... – Andyrooger Oct 13 '13 at 00:30

2 Answers2

0

1.You can create same form element inside test script using $compile service and test it by setting values of text boxes and hit $('button class').click(); And set spy on method which is showing error or success msg.So that you can understand if msg is being displayed or not. 2.You must be creating JSON out of form data and validating it or assigning that form data to any $scope.variable_name.Before invoking validation function explicitly set that variable with wrong input.Then call the function on button click or $scope.$emit('click'); and set spy on method used for showing error message.

samyak bhalerao
  • 307
  • 2
  • 10
-1

You could try this;

Change expect(element('.msg h1').text()).toMatch('Wrong Credentials');

to

expect(element('[ng-view] .msg h1').text()).toMatch('Wrong Credentials');
BKM
  • 6,949
  • 7
  • 30
  • 45