maxlength on field not working with Karma

Question

I have a field with a maxlength of 6, but somehow the following way of entering data results in 7 chars being allowed:

<input type="text" name="myName" maxlength="6" ng-model="myModel">

this is the test bit:

input('myModel').enter('1111117');
expect(input('myModel').val()).toBe(111111);

and this is the result

expected 111111 but was "1111117"

I suppose this has to do with the model being used instead of the real field, but how would I test this then in Karma?

score 4 · Accepted Answer · edited Feb 01 '16 at 21:52

4

The problem is caused because maxlength only limits the input from the user, and not the actual value of the input. For example, if you try to use jQuery's val() on your input, it would accept any length of the value.

I tried to simulate input in more sophisticated ways, like triggering keyboard events or third party tools, but with no success. It looks like any programmatic way to change the input's value, is not limited by maxlength.

edited Feb 01 '16 at 21:52

marc_s

732,580
175
1,330
1,459

answered Jun 12 '14 at 16:15

Yaron Schwimmer

5,327
5
36
59

I tried the triggering of keyboard events to to no avail, so will consider this unsolvable. We're using Protractor more and more, so hopefully this won't be too much of a problem. – Maarten Jun 12 '14 at 18:34

score 1 · Answer 2 · answered Feb 05 '20 at 02:15

I know this is an old question, but this may be helpful to someone with the same problem.

In my case I just checked the the value length of the input manually, in the function used to set the input value:

function insertKey(input: HTMLInputElement, key: string) {
  input.dispatchEvent(new KeyboardEvent('keydown', {key: key}));
  if (input.value.length < input.maxLength) {
    input.value += key;
    input.dispatchEvent(new KeyboardEvent('change', null));
  }
  input.dispatchEvent(new KeyboardEvent('keyup', {key: key}));
}

maxlength on field not working with Karma

2 Answers2