fix: clear function on non text inputs

testing-library · May 8, 2020 · a81b43e · a81b43e
1 parent f15bec6
commit a81b43e
Show file tree

Hide file tree

Showing 4 changed files with 8,436 additions and 8,115 deletions.
diff --git a/__tests__/react/clear.js b/__tests__/react/clear.js
@@ -6,13 +6,13 @@ import userEvent from "../../src";
 afterEach(cleanup);
 
 describe("userEvent.clear", () => {
-  it.each(["input", "textarea"])("should clear text in <%s>", type => {
+  it.each(["input", "textarea"])("should clear text in <%s>", (type) => {
     const onChange = jest.fn();
     const { getByTestId } = render(
       React.createElement(type, {
         "data-testid": "input",
         onChange: onChange,
-        value: "Hello, world!"
+        value: "Hello, world!",
       })
     );
 
@@ -23,15 +23,15 @@ describe("userEvent.clear", () => {
 
   it.each(["input", "textarea"])(
     "should not clear when <%s> is disabled",
-    type => {
+    (type) => {
       const text = "Hello, world!";
       const onChange = jest.fn();
       const { getByTestId } = render(
         React.createElement(type, {
           "data-testid": "input",
           onChange: onChange,
           value: text,
-          disabled: true
+          disabled: true,
         })
       );
 
@@ -43,7 +43,7 @@ describe("userEvent.clear", () => {
 
   it.each(["input", "textarea"])(
     "should not clear when <%s> is readOnly",
-    type => {
+    (type) => {
       const onChange = jest.fn();
       const onKeyDown = jest.fn();
       const onKeyUp = jest.fn();
@@ -56,7 +56,7 @@ describe("userEvent.clear", () => {
           onKeyDown,
           onKeyUp,
           value: text,
-          readOnly: true
+          readOnly: true,
         })
       );
 
@@ -67,4 +67,28 @@ describe("userEvent.clear", () => {
       expect(input).toHaveProperty("value", text);
     }
   );
+
+  ["email", "password", "number"].forEach((type) => {
+    it.each(["input", "textarea"])(
+      `should clear when <%s> is of type="${type}"`,
+      (inputType) => {
+        const value = "12345";
+        const placeholder = "Enter password";
+
+        const element = React.createElement(inputType, {
+          value,
+          placeholder,
+          type,
+          onChange: jest.fn(),
+        });
+
+        const { getByPlaceholderText } = render(element);
+
+        const input = getByPlaceholderText("Enter password");
+        expect(input.value).toBe(value);
+        userEvent.clear(input);
+        expect(input.value).toBe("");
+      }
+    );
+  });
 });