diff --git a/.all-contributorsrc b/.all-contributorsrc
index d12217b7..c8b28c4c 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -90,7 +90,8 @@
"profile": "https://afontcu.dev",
"contributions": [
"bug",
- "test"
+ "test",
+ "code"
]
},
{
diff --git a/README.md b/README.md
index 258b0b62..b6430d82 100644
--- a/README.md
+++ b/README.md
@@ -186,7 +186,7 @@ Thanks goes to these wonderful people
Caleb Eby
💻 🐛 |
- 
Adrià Fontcuberta
🐛 ⚠️ |
+
Adrià Fontcuberta
🐛 ⚠️ 💻 |
Sky Wickenden
🐛 💻 |
Bodnar Bogdan
🐛 💻 |
diff --git a/__tests__/react/type.js b/__tests__/react/type.js
index bd2d8d76..52d01464 100644
--- 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
index 6f758ee9..04a88600 100644
--- 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
index 6461248d..1470ad10 100644
--- 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
+ });
}
}