fix(userEvent): correct events fired for several things

Author: kentcdodds

src/user-event/__mocks__/utils.js

@@ -1,6 +1,5 @@
 // this helps us track what the state is before and after an event is fired
 // this is needed for determining the snapshot values
-const {getElementDisplayName} = require('../__tests__/helpers/utils')
 const actual = jest.requireActual('../utils')
 
 function getTrackedElementValues(element) {
@@ -18,10 +17,7 @@ function getTrackedElementValues(element) {
 function wrapWithTestData(fn) {
   return async (element, init) => {
     const before = getTrackedElementValues(element)
-    const testData = {
-      before,
-      elementDisplayName: getElementDisplayName(element),
-    }
+    const testData = {before}
 
     // put it on the element so the event handler can grab it
     element.testData = testData

src/user-event/__tests__/blur.js

@@ -0,0 +1,65 @@
+import {userEvent} from '../../'
+import {setup} from './helpers/utils'
+
+test('blur a button', async () => {
+  const {element, getEventSnapshot, clearEventCalls} = setup(`<button />`)
+  await userEvent.focus(element)
+  clearEventCalls()
+  await userEvent.blur(element)
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: button
+
+    button - blur
+    button - focusout
+  `)
+  expect(element).not.toHaveFocus()
+})
+
+test('no events fired on an unblurable input', async () => {
+  const {element, getEventSnapshot, clearEventCalls} = setup(`<div />`)
+  await userEvent.focus(element)
+  clearEventCalls()
+  await userEvent.blur(element)
+  expect(getEventSnapshot()).toMatchInlineSnapshot(
+    `No events were fired on: div`,
+  )
+  expect(element).not.toHaveFocus()
+})
+
+test('blur with tabindex', async () => {
+  const {element, getEventSnapshot, clearEventCalls} = setup(
+    `<div tabindex="0" />`,
+  )
+  await userEvent.focus(element)
+  clearEventCalls()
+  await userEvent.blur(element)
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: div
+
+    div - blur
+    div - focusout
+  `)
+  expect(element).not.toHaveFocus()
+})
+
+test('no events fired on a disabled blurable input', async () => {
+  const {element, getEventSnapshot, clearEventCalls} = setup(
+    `<button disabled />`,
+  )
+  await userEvent.focus(element)
+  clearEventCalls()
+  await userEvent.blur(element)
+  expect(getEventSnapshot()).toMatchInlineSnapshot(
+    `No events were fired on: button`,
+  )
+  expect(element).not.toHaveFocus()
+})
+
+test('no events fired if the element is not focused', async () => {
+  const {element, getEventSnapshot} = setup(`<button />`)
+  await userEvent.blur(element)
+  expect(getEventSnapshot()).toMatchInlineSnapshot(
+    `No events were fired on: button`,
+  )
+  expect(element).not.toHaveFocus()
+})

src/user-event/__tests__/clear.js

@@ -11,7 +11,7 @@ test('clears text', async () => {
     input[value="hello"] - focus
     input[value="hello"] - select
     input[value="hello"] - keydown: Delete (46)
-    input[value="hello"] - input
+    input[value=""] - input
       "{SELECTION}hello{/SELECTION}" -> "{CURSOR}"
     input[value=""] - keyup: Delete (46)
   `)