Merge pull request #160 from testing-library/disable-on-disabled

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

.all-contributorsrc

@@ -90,7 +90,8 @@
       "profile": "https://afontcu.dev",
       "contributions": [
         "bug",
-        "test"
+        "test",
+        "code"
       ]
     },
     {

README.md

@@ -186,7 +186,7 @@ Thanks goes to these wonderful people
     <td align="center"><a href="https://calebeby.ml"><img src="https://avatars1.githubusercontent.com/u/13206945?v=4" width="100px;" alt="Caleb Eby"/><br /><sub><b>Caleb Eby</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=calebeby" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/issues?q=author%3Acalebeby" title="Bug reports">🐛</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://afontcu.dev"><img src="https://avatars0.githubusercontent.com/u/9197791?v=4" width="100px;" alt="Adrià Fontcuberta"/><br /><sub><b>Adrià Fontcuberta</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3Aafontcu" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/user-event/commits?author=afontcu" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://afontcu.dev"><img src="https://avatars0.githubusercontent.com/u/9197791?v=4" width="100px;" alt="Adrià Fontcuberta"/><br /><sub><b>Adrià Fontcuberta</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3Aafontcu" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/user-event/commits?author=afontcu" title="Tests">⚠️</a> <a href="https://github.com/testing-library/user-event/commits?author=afontcu" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/skywickenden"><img src="https://avatars2.githubusercontent.com/u/4930551?v=4" width="100px;" alt="Sky Wickenden"/><br /><sub><b>Sky Wickenden</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3Askywickenden" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/user-event/commits?author=skywickenden" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/bogdanbodnar"><img src="https://avatars2.githubusercontent.com/u/9034868?v=4" width="100px;" alt="Bodnar Bogdan"/><br /><sub><b>Bodnar Bogdan</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3Abogdanbodnar" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/user-event/commits?author=bogdanbodnar" title="Code">💻</a></td>
   </tr>

__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();

__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();

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
+              });
           }
         }