userEvent(click): improve correctness for clicks

Author: kentcdodds

src/user-event/__tests__/dblclick.js

@@ -1,30 +1,6 @@
 import {userEvent} from '../../'
 import {setup, addEventListener, addListeners} from './helpers/utils'
 
-/*
-button#button[value=""] pointerover
-button#button[value=""] pointerenter
-button#button[value=""] mouseover
-button#button[value=""] mouseenter
-button#button[value=""] pointermove
-button#button[value=""] mousemove
-
-button#button[value=""] pointerdown
-button#button[value=""] mousedown
-button#button[value=""] focus
-button#button[value=""] focusin
-button#button[value=""] pointerup
-button#button[value=""] mouseup
-button#button[value=""] click
-
-button#button[value=""] pointerdown
-button#button[value=""] mousedown
-button#button[value=""] pointerup
-button#button[value=""] mouseup
-button#button[value=""] click
-button#button[value=""] dblclick
-
-*/
 test('fires the correct events on buttons', async () => {
   const {element, getEventSnapshot} = setup('<button />')
   await userEvent.dblClick(element)
@@ -37,18 +13,41 @@ test('fires the correct events on buttons', async () => {
     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 - pointerdown
     button - mousedown: Left (0)
+    button - pointerup
     button - mouseup: Left (0)
     button - click: Left (0)
     button - dblclick: Left (0)
   `)
 })
 
+/*
+input[checked=false] - pointerdown
+input[checked=false] - mousedown
+input[checked=false] - focus
+input[checked=false] - focusin
+input[checked=false] - pointerup
+input[checked=false] - mouseup
+input[checked=true] - click
+input[checked=true] - input
+input[checked=true] - change
+input[checked=true] - pointerdown
+input[checked=true] - mousedown
+input[checked=true] - pointerup
+input[checked=true] - mouseup
+input[checked=false] - click
+input[checked=false] - input
+input[checked=false] - change
+input[checked=false] - dblclick
+*/
 test('fires the correct events on checkboxes', async () => {
   const {element, getEventSnapshot} = setup('<input type="checkbox" />')
   await userEvent.dblClick(element)
@@ -61,22 +60,25 @@ test('fires the correct events on checkboxes', async () => {
     input[checked=false] - mouseenter: Left (0)
     input[checked=false] - pointermove
     input[checked=false] - mousemove: Left (0)
-    input[checked=false] - mouseover: Left (0)
-    input[checked=false] - mousemove: Left (0)
+    input[checked=false] - pointerdown
     input[checked=false] - mousedown: Left (0)
     input[checked=false] - focus
     input[checked=false] - focusin
+    input[checked=false] - pointerup
     input[checked=false] - mouseup: Left (0)
     input[checked=true] - click: Left (0)
       unchecked -> checked
     input[checked=true] - input
     input[checked=true] - change
+    input[checked=true] - pointerdown
     input[checked=true] - mousedown: Left (0)
+    input[checked=true] - pointerup
     input[checked=true] - mouseup: Left (0)
     input[checked=false] - click: Left (0)
       checked -> unchecked
     input[checked=false] - input
     input[checked=false] - change
+    input[checked=false] - dblclick: Left (0)
   `)
 })
 
@@ -92,12 +94,16 @@ test('fires the correct events on regular inputs', async () => {
     input[value=""] - mouseenter: Left (0)
     input[value=""] - pointermove
     input[value=""] - mousemove: Left (0)
+    input[value=""] - pointerdown
     input[value=""] - mousedown: Left (0)
     input[value=""] - focus
     input[value=""] - focusin
+    input[value=""] - pointerup
     input[value=""] - mouseup: Left (0)
     input[value=""] - click: Left (0)
+    input[value=""] - pointerdown
     input[value=""] - mousedown: Left (0)
+    input[value=""] - pointerup
     input[value=""] - mouseup: Left (0)
     input[value=""] - click: Left (0)
     input[value=""] - dblclick: Left (0)
@@ -116,10 +122,14 @@ test('fires the correct events on divs', async () => {
     div - mouseenter: Left (0)
     div - pointermove
     div - mousemove: Left (0)
+    div - pointerdown
     div - mousedown: Left (0)
+    div - pointerup
     div - mouseup: Left (0)
     div - click: Left (0)
+    div - pointerdown
     div - mousedown: Left (0)
+    div - pointerup
     div - mouseup: Left (0)
     div - click: Left (0)
     div - dblclick: Left (0)
@@ -159,7 +169,7 @@ test('does not fire focus event if the element is already focused', async () =>
 })
 
 test('clicking an element in a label gives the control focus', async () => {
-  const {element, getEventSnapshot} = setup(`
+  const {element} = setup(`
     <div>
       <label for="nested-input">
         <span>nested</span>
@@ -168,23 +178,7 @@ test('clicking an element in a label gives the control focus', async () => {
     </div>
   `)
   await userEvent.dblClick(element.querySelector('span'))
-  expect(getEventSnapshot()).toMatchInlineSnapshot(`
-    Events fired on: div
-
-    span - pointerover
-    span - mouseover: Left (0)
-    span - pointermove
-    span - mousemove: Left (0)
-    span - mousedown: Left (0)
-    span - mouseup: Left (0)
-    span - click: Left (0)
-    input#nested-input[value=""] - click: Left (0)
-    span - mousedown: Left (0)
-    span - mouseup: Left (0)
-    span - click: Left (0)
-    input#nested-input[value=""] - click: Left (0)
-    span - dblclick: Left (0)
-  `)
+  expect(element.querySelector('input')).toHaveFocus()
 })
 
 test('does not blur the previous element when mousedown prevents default', async () => {
@@ -220,10 +214,14 @@ test('fires mouse events with the correct properties', async () => {
     mouseenter - button=0; buttons=0; detail=0
     pointermove
     mousemove - button=0; buttons=0; detail=0
+    pointerdown
     mousedown - button=0; buttons=1; detail=1
+    pointerup
     mouseup - button=0; buttons=1; detail=1
     click - button=0; buttons=1; detail=1
+    pointerdown
     mousedown - button=0; buttons=1; detail=2
+    pointerup
     mouseup - button=0; buttons=1; detail=2
     click - button=0; buttons=1; detail=2
     dblclick - button=0; buttons=1; detail=2
@@ -243,10 +241,14 @@ test('fires mouse events with custom button property', async () => {
     mouseenter - button=0; buttons=0; detail=0
     pointermove
     mousemove - button=0; buttons=0; detail=0
+    pointerdown
     mousedown - button=1; buttons=4; detail=1
+    pointerup
     mouseup - button=1; buttons=4; detail=1
     click - button=1; buttons=4; detail=1
+    pointerdown
     mousedown - button=1; buttons=4; detail=2
+    pointerup
     mouseup - button=1; buttons=4; detail=2
     click - button=1; buttons=4; detail=2
     dblclick - button=1; buttons=4; detail=2
@@ -265,10 +267,14 @@ test('fires mouse events with custom buttons property', async () => {
     mouseenter - button=0; buttons=0; detail=0
     pointermove
     mousemove - button=0; buttons=0; detail=0
+    pointerdown
     mousedown - button=1; buttons=4; detail=1
+    pointerup
     mouseup - button=1; buttons=4; detail=1
     click - button=1; buttons=4; detail=1
+    pointerdown
     mousedown - button=1; buttons=4; detail=2
+    pointerup
     mouseup - button=1; buttons=4; detail=2
     click - button=1; buttons=4; detail=2
     dblclick - button=1; buttons=4; detail=2

src/user-event/__tests__/upload.js

@@ -10,6 +10,12 @@ test('should fire the correct events for input', async () => {
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
+    input[value=""] - pointerover
+    input[value=""] - pointerenter
+    input[value=""] - mouseover: Left (0)
+    input[value=""] - mouseenter: Left (0)
+    input[value=""] - pointermove
+    input[value=""] - mousemove: Left (0)
     input[value=""] - pointerdown
     input[value=""] - mousedown: Left (0)
     input[value=""] - focus
@@ -40,6 +46,12 @@ test('should fire the correct events with label', async () => {
   expect(getLabelEventCalls()).toMatchInlineSnapshot(`
     Events fired on: label[for="element"]
 
+    label[for="element"] - pointerover
+    label[for="element"] - pointerenter
+    label[for="element"] - mouseover: Left (0)
+    label[for="element"] - mouseenter: Left (0)
+    label[for="element"] - pointermove
+    label[for="element"] - mousemove: Left (0)
     label[for="element"] - pointerdown
     label[for="element"] - mousedown: Left (0)
     label[for="element"] - pointerup