fix(type): type on no value elements (testing-library#414)

Closes: testing-library#407

Author: visualjerk

src/__tests__/type-modifiers.js

@@ -443,6 +443,36 @@ test('{enter} on a button', () => {
   `)
 })
 
+test('{enter} with preventDefault on a button', () => {
+  const {element, getEventSnapshot} = setup('<button />', {
+    eventHandlers: {
+      keyDown: e => e.preventDefault(),
+    },
+  })
+
+  userEvent.type(element, '{enter}')
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: button
+
+    button - pointerover
+    button - pointerenter
+    button - mouseover: Left (0)
+    button - mouseenter: Left (0)
+    button - pointermove
+    button - mousemove: Left (0)
+    button - pointerdown
+    button - mousedown: Left (0)
+    button - focus
+    button - focusin
+    button - pointerup
+    button - mouseup: Left (0)
+    button - click: Left (0)
+    button - keydown: Enter (13)
+    button - keyup: Enter (13)
+  `)
+})
+
 test('{space} on a button', () => {
   const {element, getEventSnapshot} = setup('<button />')
 
@@ -471,6 +501,34 @@ test('{space} on a button', () => {
   `)
 })
 
+test(`' ' on a button is the same as '{space}'`, () => {
+  const {element, getEventSnapshot} = setup('<button />')
+
+  userEvent.type(element, ' ')
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: button
+
+    button - pointerover
+    button - pointerenter
+    button - mouseover: Left (0)
+    button - mouseenter: Left (0)
+    button - pointermove
+    button - mousemove: Left (0)
+    button - pointerdown
+    button - mousedown: Left (0)
+    button - focus
+    button - focusin
+    button - pointerup
+    button - mouseup: Left (0)
+    button - click: Left (0)
+    button - keydown: (32)
+    button - keypress: (32)
+    button - keyup: (32)
+    button - click: Left (0)
+  `)
+})
+
 test('{space} with preventDefault keydown on button', () => {
   const {element, getEventSnapshot} = setup('<button />', {
     eventHandlers: {
@@ -498,14 +556,17 @@ test('{space} with preventDefault keydown on button', () => {
     button - click: Left (0)
     button - keydown: (32)
     button - keyup: (32)
-    button - click: Left (0)
   `)
 })
 
-test(`' ' on a button`, () => {
-  const {element, getEventSnapshot} = setup('<button />')
+test('{space} with preventDefault keyup on button', () => {
+  const {element, getEventSnapshot} = setup('<button />', {
+    eventHandlers: {
+      keyUp: e => e.preventDefault(),
+    },
+  })
 
-  userEvent.type(element, ' ')
+  userEvent.type(element, '{space}')
 
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
     Events fired on: button
@@ -526,7 +587,6 @@ test(`' ' on a button`, () => {
     button - keydown: (32)
     button - keypress: (32)
     button - keyup: (32)
-    button - click: Left (0)
   `)
 })
 
@@ -559,7 +619,7 @@ test('{space} on an input', () => {
   `)
 })
 
-test('{enter} on an input type="color"', () => {
+test('{enter} on an input type="color" fires same events as a button', () => {
   const {element, getEventSnapshot} = setup(
     `<input value="#ffffff" type="color" />`,
   )
@@ -589,7 +649,7 @@ test('{enter} on an input type="color"', () => {
   `)
 })
 
-test('{space} on an input type="color"', () => {
+test('{space} on an input type="color" fires same events as a button', () => {
   const {element, getEventSnapshot} = setup(
     `<input value="#ffffff" type="color" />`,
   )
@@ -619,7 +679,7 @@ test('{space} on an input type="color"', () => {
   `)
 })
 
-test('" " on an input type="color"', () => {
+test(`' ' on input type="color" is the same as '{space}'`, () => {
   const {element, getEventSnapshot} = setup(
     `<input value="#ffffff" type="color" />`,
   )

src/__tests__/type.js

@@ -707,13 +707,12 @@ test('typing an invalid input value', () => {
   expect(element.validity.badInput).toBe(false)
 })
 
-test('should give error if we are trying to call type on an invalid element', async () => {
-  const {element} = setup('<div  />')
-  await expect(() =>
-    userEvent.type(element, "I'm only a div :("),
-  ).rejects.toThrowErrorMatchingInlineSnapshot(
-    `"the current element is of type BODY and doesn't have a valid value"`,
-  )
+test('should not throw error if we are trying to call type on an element without a value', () => {
+  const {element} = setup('<div />')
+  expect.assertions(0)
+  return userEvent
+    .type(element, "I'm only a div :(")
+    .catch(e => expect(e).toBeUndefined())
 })
 
 test('typing on button should not alter its value', () => {
@@ -752,11 +751,8 @@ test('typing on input type submit should not alter its value', () => {
   expect(element).toHaveValue('foo')
 })
 
-test('typing on input type file should not trigger input event', () => {
-  const inputHandler = jest.fn()
-  const {element} = setup('<input type="file" />', {
-    eventHandlers: {input: inputHandler},
-  })
-  userEvent.type(element, 'bar')
-  expect(inputHandler).toHaveBeenCalledTimes(0)
+test('typing on input type file should not result in an error', () => {
+  const {element} = setup('<input type="file" />')
+  expect.assertions(0)
+  return userEvent.type(element, 'bar').catch(e => expect(e).toBeUndefined())
 })

src/paste.js

@@ -38,11 +38,7 @@ function paste(
   fireEvent.paste(element, init)
 
   if (!element.readOnly) {
-    const {newValue, newSelectionStart} = calculateNewValue(
-      text,
-      element,
-      element.value,
-    )
+    const {newValue, newSelectionStart} = calculateNewValue(text, element)
     fireEvent.input(element, {
       inputType: 'insertFromPaste',
       target: {value: newValue},