Error when fillIn/ typeIn attempt to enter a value longer than maxlength

addon-test-support/@ember/test-helpers/dom/-is-maxlength-constrained.ts

@@ -0,0 +1,17 @@
+/**
+  @private
+  @param {Element} element the element to check
+  @returns {boolean} `true` when the element should constrain input by the maxlength attribute, `false` otherwise
+*/
+export default function isMaxLengthConstrained(
+  element: Element
+): element is HTMLInputElement | HTMLTextAreaElement {
+  // ref: https://html.spec.whatwg.org/multipage/input.html#concept-input-apply
+  const constrainedInputTypes = ['text', 'search', 'url', 'tel', 'email', 'password'];
+  return (
+    !!Number(element.getAttribute('maxLength')) &&
+    (element.tagName === 'TEXTAREA' ||
+      (element.tagName === 'INPUT' &&
+        constrainedInputTypes.indexOf((element as HTMLInputElement).type) > -1))
+  );
+}

addon-test-support/@ember/test-helpers/dom/fill-in.ts

@@ -1,5 +1,6 @@
 import getElement from './-get-element';
 import isFormControl from './-is-form-control';
+import isMaxLengthConstrained from './-is-maxlength-constrained';
 import { __focus__ } from './focus';
 import settled from '../settled';
 import fireEvent from './fire-event';
@@ -50,6 +51,13 @@ export default function fillIn(target: Target, text: string): Promise<void> {
         throw new Error(`Can not \`fillIn\` readonly '${target}'.`);
       }
 
+      const maxlength = element.getAttribute('maxlength');
+      if (isMaxLengthConstrained(element) && maxlength && text && text.length > Number(maxlength)) {
+        throw new Error(
+          `Can not \`fillIn\` with text: '${text}' that exceeds maxlength: '${maxlength}'.`
+        );
+      }
+
       __focus__(element);
 
       element.value = text;
@@ -60,7 +68,6 @@ export default function fillIn(target: Target, text: string): Promise<void> {
     } else {
       throw new Error('`fillIn` is only usable on form controls or contenteditable elements.');
     }
-
     fireEvent(element, 'input');
     fireEvent(element, 'change');
 

addon-test-support/@ember/test-helpers/dom/type-in.ts

@@ -5,6 +5,7 @@ import isFormControl, { FormControl } from './-is-form-control';
 import { __focus__ } from './focus';
 import { Promise } from 'rsvp';
 import fireEvent from './fire-event';
+import isMaxLengthConstrained from './-is-maxlength-constrained';
 import Target from './-target';
 import { __triggerKeyEvent__ } from './trigger-key-event';
 import { log } from '@ember/test-helpers/dom/-logging';
@@ -94,7 +95,20 @@ function keyEntry(element: FormControl, character: string): () => void {
       .then(() => __triggerKeyEvent__(element, 'keydown', characterKey, options))
       .then(() => __triggerKeyEvent__(element, 'keypress', characterKey, options))
       .then(() => {
-        element.value = element.value + character;
+        const newValue = element.value + character;
+        const maxlength = element.getAttribute('maxlength');
+        const shouldTruncate =
+          isMaxLengthConstrained(element) &&
+          maxlength &&
+          newValue &&
+          newValue.length > Number(maxlength);
+        if (shouldTruncate) {
+          throw new Error(
+            `Can not \`typeIn\` with text: '${newValue}' that exceeds maxlength: '${maxlength}'.`
+          );
+        }
+
+        element.value = newValue;
         fireEvent(element, 'input');
       })
       .then(() => __triggerKeyEvent__(element, 'keyup', characterKey, options));

tests/unit/dom/fill-in-test.js

@@ -199,4 +199,35 @@ module('DOM Helper: fillIn', function (hooks) {
     assert.strictEqual(document.activeElement, element, 'activeElement updated');
     assert.equal(element.value, '');
   });
+
+  test('filling an input with a maxlength with suitable value', async function (assert) {
+    element = buildInstrumentedElement('input');
+    const maxLengthString = 'f';
+    element.setAttribute('maxlength', maxLengthString.length);
+
+    await setupContext(context);
+
+    await fillIn(element, maxLengthString);
+
+    assert.verifySteps(clickSteps);
+    assert.equal(
+      element.value,
+      maxLengthString,
+      `fillIn respects input attribute [maxlength=${maxLengthString.length}]`
+    );
+  });
+
+  test('filling an input with a maxlength with too long value', async function (assert) {
+    element = buildInstrumentedElement('input');
+    const maxLengthString = 'f';
+    const tooLongString = maxLengthString.concat('oo');
+    element.setAttribute('maxlength', maxLengthString.length);
+
+    await setupContext(context);
+
+    assert.rejects(
+      fillIn(element, tooLongString),
+      new Error("Can not `fillIn` with text: 'foo' that exceeds maxlength: '1'.")
+    );
+  });
 });

tests/unit/dom/type-in-test.js

@@ -208,4 +208,38 @@ module('DOM Helper: typeIn', function (hooks) {
     assert.verifySteps(expectedEvents);
     assert.equal(runcount, 1, 'debounced function only called once');
   });
+
+  test('typing in an input with a maxlength with suitable value', async function (assert) {
+    element = buildInstrumentedElement('input');
+    const maxLengthString = 'foo';
+    element.setAttribute('maxlength', maxLengthString.length);
+
+    await setupContext(context);
+
+    await typeIn(element, maxLengthString);
+
+    assert.verifySteps(expectedEvents);
+    assert.equal(
+      element.value,
+      maxLengthString,
+      `typeIn respects input attribute [maxlength=${maxLengthString.length}]`
+    );
+  });
+
+  test('typing in an input with a maxlength with too long value', async function (assert) {
+    element = buildInstrumentedElement('input');
+    const maxLengthString = 'f';
+    const tooLongString = maxLengthString.concat('o');
+    element.setAttribute('maxlength', maxLengthString.length);
+
+    await setupContext(context);
+
+    await assert.rejects(
+      typeIn(element, tooLongString).finally(() => {
+        // should throw before the second input event
+        assert.verifySteps(expectedEvents.slice(0, 8));
+      }),
+      new Error("Can not `typeIn` with text: 'fo' that exceeds maxlength: '1'.")
+    );
+  });
 });