test(type): can't write past maxLength

testing-library · Jan 29, 2020 · cb0f5e9 · cb0f5e9
1 parent 215fac3
commit cb0f5e9
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/__tests__/react/type.js b/__tests__/react/type.js
@@ -135,4 +135,37 @@ describe("userEvent.type", () => {
       expect(getByTestId("input")).toHaveProperty("value", text);
     }
   );
+
+  it.each(["input", "textarea"])(
+    "should type text in <%s> up to maxLength if provided",
+    type => {
+      const onChange = jest.fn();
+      const maxLength = 10;
+
+      const { getByTestId } = render(
+        React.createElement(type, {
+          "data-testid": "input",
+          onChange: onChange,
+          maxLength
+        })
+      );
+
+      const text = "superlongtext";
+      const slicedText = text.slice(0, maxLength);
+
+      const inputEl = getByTestId("input");
+
+      userEvent.type(inputEl, text, {
+        allAtOnce: true
+      });
+      expect(inputEl).toHaveProperty("value", slicedText);
+
+      inputEl.value = "";
+      onChange.mockClear();
+
+      userEvent.type(inputEl, text);
+      expect(inputEl).toHaveProperty("value", slicedText);
+      expect(onChange).toHaveBeenCalledTimes(slicedText.length);
+    }
+  );
 });
diff --git a/__tests__/vue/type.js b/__tests__/vue/type.js
@@ -145,4 +145,31 @@ describe("userEvent.type", () => {
       expect(input).toHaveBeenCalledTimes(1);
     }
   );
+
+  it.each(["input", "textarea"])(
+    "should type text in <%s> up to maxLength if provided",
+    type => {
+      const input = jest.fn();
+      const maxLength = 10;
+
+      const { getByTestId } = renderComponent(type, { input }, { maxLength });
+
+      const text = "superlongtext";
+      const slicedText = text.slice(0, maxLength);
+
+      const inputEl = getByTestId("input");
+
+      userEvent.type(inputEl, text, {
+        allAtOnce: true
+      });
+      expect(inputEl).toHaveProperty("value", slicedText);
+
+      inputEl.value = "";
+      input.mockClear();
+
+      userEvent.type(inputEl, text);
+      expect(inputEl).toHaveProperty("value", slicedText);
+      expect(input).toHaveBeenCalledTimes(slicedText.length);
+    }
+  );
 });