fix: 🐛 don't type on disabled or readonly inputs

Closes #152 BREAKING CHANGE: disabled or readonly inputs won't be typeable anymore
testing-library · Aug 27, 2019 · 1177c46 · 1177c46
1 parent 9477e30
commit 1177c46
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 9 deletions.
diff --git a/__tests__/react/type.js b/__tests__/react/type.js
@@ -35,6 +35,51 @@ describe("userEvent.type", () => {
     expect(getByTestId("input")).not.toHaveProperty("value", text);
   });
 
+  it.each(["input", "textarea"])(
+    "should not type when <%s> is disabled",
+    type => {
+      const onChange = jest.fn();
+      const { getByTestId } = render(
+        React.createElement(type, {
+          "data-testid": "input",
+          onChange: onChange,
+          disabled: true
+        })
+      );
+      const text = "Hello, world!";
+      userEvent.type(getByTestId("input"), text);
+      expect(onChange).not.toHaveBeenCalled();
+      expect(getByTestId("input")).toHaveProperty("value", "");
+    }
+  );
+
+  it.each(["input", "textarea"])(
+    "should not type when <%s> is readOnly",
+    type => {
+      const onChange = jest.fn();
+      const onKeyDown = jest.fn();
+      const onKeyPress = jest.fn();
+      const onKeyUp = jest.fn();
+      const { getByTestId } = render(
+        React.createElement(type, {
+          "data-testid": "input",
+          onChange,
+          onKeyDown,
+          onKeyPress,
+          onKeyUp,
+          readOnly: true
+        })
+      );
+      const text = "Hello, world!";
+      userEvent.type(getByTestId("input"), text);
+      expect(onKeyDown).toHaveBeenCalledTimes(text.length);
+      expect(onKeyPress).toHaveBeenCalledTimes(text.length);
+      expect(onKeyUp).toHaveBeenCalledTimes(text.length);
+      expect(onChange).not.toHaveBeenCalled();
+      expect(getByTestId("input")).toHaveProperty("value", "");
+    }
+  );
+
   it("should delay the typing when opts.delay is not 0", async () => {
     jest.useFakeTimers();
     const onChange = jest.fn();

diff --git a/__tests__/vue/type.js b/__tests__/vue/type.js
@@ -4,11 +4,11 @@ import userEvent from "../../src";
 
 afterEach(cleanup);
 
-const renderComponent = (type, events = {}) =>
+const renderComponent = (type, events = {}, attrs = {}) =>
   render({
     render: function(h) {
       return h(type, {
-        attrs: { "data-testid": "input" },
+        attrs: { "data-testid": "input", ...attrs },
         on: events
       });
     }
@@ -48,6 +48,55 @@ describe("userEvent.type", () => {
     expect(getByTestId("input")).not.toHaveProperty("value", text);
   });
 
+  it.each(["input", "textarea"])(
+    "should not type when <%s> is disabled",
+    type => {
+      const change = jest.fn();
+      const { getByTestId } = renderComponent(
+        type,
+        {
+          change
+        },
+        {
+          disabled: true
+        }
+      );
+      const text = "Hello, world!";
+      userEvent.type(getByTestId("input"), text);
+      expect(change).not.toHaveBeenCalled();
+      expect(getByTestId("input")).toHaveProperty("value", "");
+    }
+  );
+
+  it.each(["input", "textarea"])(
+    "should not type when <%s> is readOnly",
+    type => {
+      const change = jest.fn();
+      const keydown = jest.fn();
+      const keypress = jest.fn();
+      const keyup = jest.fn();
+      const { getByTestId } = renderComponent(
+        type,
+        {
+          change,
+          keydown,
+          keypress,
+          keyup
+        },
+        {
+          readOnly: true
+        }
+      );
+      const text = "Hello, world!";
+      userEvent.type(getByTestId("input"), text);
+      expect(keydown).toHaveBeenCalledTimes(text.length);
+      expect(keypress).toHaveBeenCalledTimes(text.length);
+      expect(keyup).toHaveBeenCalledTimes(text.length);
+      expect(change).not.toHaveBeenCalled();
+      expect(getByTestId("input")).toHaveProperty("value", "");
+    }
+  );
+
   it("should delay the typing when opts.delay is not 0", async () => {
     jest.useFakeTimers();
     const change = jest.fn();

diff --git a/src/index.js b/src/index.js
@@ -174,12 +174,14 @@ const userEvent = {
   },
 
   async type(element, text, userOpts = {}) {
+    if (element.disabled) return;
     const defaultOpts = {
       allAtOnce: false,
       delay: 0
     };
     const opts = Object.assign(defaultOpts, userOpts);
     if (opts.allAtOnce) {
+      if (element.readOnly) return;
       fireEvent.input(element, { target: { value: text } });
     } else {
       let actuallyTyped = "";
@@ -203,13 +205,14 @@ const userEvent = {
           });
           if (pressEvent) {
             actuallyTyped += key;
-            fireEvent.input(element, {
-              target: {
-                value: actuallyTyped
-              },
-              bubbles: true,
-              cancelable: true
-            });
+            if (!element.readOnly)
+              fireEvent.input(element, {
+                target: {
+                  value: actuallyTyped
+                },
+                bubbles: true,
+                cancelable: true
+              });
           }
         }