Merge pull request testing-library#28 from weyert/master

Importing branch

Author: Gpx

.babelrc

@@ -1,3 +1,3 @@
 {
   "presets": ["env", "react"]
-}
+}

__tests__/type.js

@@ -1,26 +1,70 @@
-import React from "react";
-import { render, cleanup } from "react-testing-library";
 import "jest-dom/extend-expect";
+
+import { cleanup, render } from "react-testing-library";
+
+import React from "react";
 import userEvent from "../src";
 
 afterEach(cleanup);
 
 describe("userEvent.type", () => {
-  it.each(["input", "textarea"])("should type text in <%s>", type => {
+  it.each(["input", "textarea"])("should type text in <%s>", async type => {
+    const onChange = jest.fn();
+    const { getByTestId } = render(
+      React.createElement(type, {
+        "data-testid": "input",
+        onChange: onChange
+      })
+    );
+    const text = "Hello, world!";
+    await userEvent.type(getByTestId("input"), text);
+    expect(onChange).toHaveBeenCalledTimes(text.length);
+    expect(getByTestId("input")).toHaveProperty("value", text);
+  });
+
+  it.each(["input", "textarea"])(
+    "should not type <%s> when prevented",
+    async type => {
+      const onChange = jest.fn();
+      const onKeydown = jest
+        .fn()
+        .mockImplementation(event => event.preventDefault());
+      const { getByTestId } = render(
+        React.createElement(type, {
+          "data-testid": "input",
+          onKeyDown: onKeydown,
+          onChange: onChange
+        })
+      );
+      const text = "Hello, world!";
+      await userEvent.type(getByTestId("input"), text);
+      expect(onKeydown).toHaveBeenCalledTimes(text.length);
+      expect(onChange).toHaveBeenCalledTimes(0);
+      expect(getByTestId("input")).not.toHaveProperty("value", text);
+    }
+  );
+
+  it("test delayed typing of text", async () => {
     const onChange = jest.fn();
     const { getByTestId } = render(
-      React.createElement(type, { "data-testid": "input", onChange: onChange })
+      React.createElement("input", {
+        "data-testid": "input",
+        onChange: onChange
+      })
     );
     const text = "Hello, world!";
-    userEvent.type(getByTestId("input"), text);
+    await userEvent.type(getByTestId("input"), text, {
+      allAtOnce: false,
+      delay: 10
+    });
 
     expect(onChange).toHaveBeenCalledTimes(text.length);
     expect(getByTestId("input")).toHaveProperty("value", text);
   });
 
   it.each(["input", "textarea"])(
     "should type text in <%s> all at once",
-    type => {
+    async type => {
       const onChange = jest.fn();
       const { getByTestId } = render(
         React.createElement(type, {
@@ -29,7 +73,9 @@ describe("userEvent.type", () => {
         })
       );
       const text = "Hello, world!";
-      userEvent.type(getByTestId("input"), text, { allAtOnce: true });
+      await userEvent.type(getByTestId("input"), text, {
+        allAtOnce: true
+      });
 
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(getByTestId("input")).toHaveProperty("value", text);

src/index.js

@@ -1,5 +1,11 @@
 import { fireEvent } from "dom-testing-library";
 
+function delay(t, v) {
+  return new Promise(function(resolve) {
+    setTimeout(resolve.bind(null, v), t);
+  });
+}
+
 function findTagInParents(element, tagName) {
   if (element.parentNode == null) return undefined;
   if (element.parentNode.tagName === tagName) return element.parentNode;
@@ -122,19 +128,59 @@ const userEvent = {
     wasAnotherElementFocused && focusedElement.blur();
   },
 
-  type(element, text, userOpts = {}) {
-    const defaultOpts = { allAtOnce: false };
+  async type(element, text, userOpts = {}) {
+    const defaultOpts = {
+      allAtOnce: false,
+      delay: 0
+    };
     const opts = Object.assign(defaultOpts, userOpts);
-
-    this.click(element);
     if (opts.allAtOnce) {
-      fireEvent.change(element, { target: { value: text } });
+      fireEvent.change(element, {
+        target: {
+          value: text
+        }
+      });
     } else {
-      text
-        .split("")
-        .forEach((_, i) =>
-          fireEvent.change(element, { target: { value: text.slice(0, i + 1) } })
-        );
+      const typedCharacters = text.split("");
+
+      let actuallyTyped = "";
+      for (let index = 0; index < text.length; index++) {
+        const char = text[index];
+        const key = char; // TODO: check if this also valid for characters with diacritic markers e.g. úé etc
+        const keyCode = char.charCodeAt(0);
+
+        if (opts.delay > 0) await delay(opts.delay);
+
+        const downEvent = fireEvent.keyDown(element, {
+          key: key,
+          keyCode: keyCode,
+          which: keyCode
+        });
+        if (downEvent) {
+          const pressEvent = fireEvent.keyPress(element, {
+            key: key,
+            keyCode,
+            charCode: keyCode,
+            keyCode: keyCode
+          });
+          if (pressEvent) {
+            actuallyTyped += key;
+            fireEvent.change(element, {
+              target: {
+                value: actuallyTyped
+              },
+              bubbles: true,
+              cancelable: true
+            });
+          }
+        }
+
+        fireEvent.keyUp(element, {
+          key: key,
+          keyCode: keyCode,
+          which: keyCode
+        });
+      }
     }
   }
 };