diff --git a/__tests__/react/clear.js b/__tests__/react/clear.js index d07bcb83..63e0c904 100644 --- 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,7 +23,7 @@ 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( @@ -31,7 +31,7 @@ describe("userEvent.clear", () => { "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", "text"].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(placeholder); + expect(input.value).toBe(value); + userEvent.clear(input); + expect(input.value).toBe(""); + } + ); + }); }); diff --git a/src/index.js b/src/index.js index 44582d47..234719e7 100644 --- a/src/index.js +++ b/src/index.js @@ -134,7 +134,20 @@ function backspace(element) { function selectAll(element) { userEvent.dblClick(element); // simulate events (will not actually select) + const elementType = element.type; + // type is a readonly property on textarea, so check if element is an input before trying to modify it + if (isInputElement(element)) { + // setSelectionRange is not supported on certain types of inputs, e.g. "number" or "email" + element.type = "text"; + } element.setSelectionRange(0, element.value.length); + if (isInputElement(element)) { + element.type = elementType; + } +} + +function isInputElement(element) { + return element.tagName.toLowerCase() === "input"; } const userEvent = {