feat!: remove support for user provided MouseEventInit (#784)

BREAKING CHANGE: `init` parameter has been removed from these APIs: - `userEvent.click` - `userEvent.dblClick` - `userEvent.tripleClick` - `userEvent.hover` - `userEvent.unhover` - `userEvent.selectOptions` - `userEvent.deselectOptions` BREAKING CHANGE: `userEvent.upload` no longer supports `clickInit` as part of its `init` parameter.
testing-library · Nov 16, 2021 · d598fb6 · d598fb6
1 parent 826cb63
commit d598fb6
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 57 deletions.
diff --git a/src/click.ts b/src/click.ts
@@ -9,7 +9,6 @@ export declare interface clickOptions {
 export function click(
   this: UserEvent,
   element: Element,
-  init?: MouseEventInit,
   {
     skipHover = false,
     skipPointerEventsCheck = false,
@@ -23,41 +22,37 @@ export function click(
   // istanbul ignore else
   if (!skipHover)
     // We just checked for `pointerEvents`. We can always skip this one in `hover`.
-    this.hover(element, init, {skipPointerEventsCheck: true})
+    this.hover(element, {skipPointerEventsCheck: true})
 
-  const keys =
-    init?.button === 2 || init?.buttons === 2 ? '[MouseRight]' : '[MouseLeft]'
-  this.pointer({keys, target: element})
+  this.pointer({keys: '[MouseLeft]', target: element})
 }
 
 export function dblClick(
   this: UserEvent,
   element: Element,
-  init?: MouseEventInit,
   {skipPointerEventsCheck = false}: clickOptions & PointerOptions = {},
 ) {
   if (!skipPointerEventsCheck && !hasPointerEvents(element)) {
     throw new Error(
       'unable to double-click element as it has or inherits pointer-events set to "none".',
     )
   }
-  this.hover(element, init, {skipPointerEventsCheck})
+  this.hover(element, {skipPointerEventsCheck: true})
 
   this.pointer({keys: '[MouseLeft][MouseLeft]', target: element})
 }
 
 export function tripleClick(
   this: UserEvent,
   element: Element,
-  init?: MouseEventInit,
   {skipPointerEventsCheck = false}: clickOptions & PointerOptions = {},
 ) {
   if (!skipPointerEventsCheck && !hasPointerEvents(element)) {
     throw new Error(
       'unable to triple-click element as it has or inherits pointer-events set to "none".',
     )
   }
-  this.hover(element, init, {skipPointerEventsCheck: true})
+  this.hover(element, {skipPointerEventsCheck: true})
 
   this.pointer({keys: '[MouseLeft][MouseLeft][MouseLeft]', target: element})
 }
diff --git a/src/hover.ts b/src/hover.ts
@@ -5,7 +5,6 @@ import {hasPointerEvents, PointerOptions} from './utils'
 export function hover(
   this: UserEvent,
   element: Element,
-  init?: MouseEventInit,
   {skipPointerEventsCheck = false}: PointerOptions = {},
 ) {
   if (!skipPointerEventsCheck && !hasPointerEvents(element)) {
@@ -23,7 +22,6 @@ export function hover(
 export function unhover(
   this: UserEvent,
   element: Element,
-  init?: MouseEventInit,
   {skipPointerEventsCheck = false}: PointerOptions = {},
 ) {
   if (!skipPointerEventsCheck && !hasPointerEvents(element)) {

diff --git a/src/selectOptions.ts b/src/selectOptions.ts
@@ -12,28 +12,25 @@ export function selectOptions(
   this: UserEvent,
   select: Element,
   values: HTMLElement | HTMLElement[] | string[] | string,
-  init?: MouseEventInit,
   options: PointerOptions = {},
 ) {
-  return selectOptionsBase.call(this, true, select, values, init, options)
+  return selectOptionsBase.call(this, true, select, values, options)
 }
 
 export function deselectOptions(
   this: UserEvent,
   select: Element,
   values: HTMLElement | HTMLElement[] | string[] | string,
-  init?: MouseEventInit,
   options: PointerOptions = {},
 ) {
-  return selectOptionsBase.call(this, false, select, values, init, options)
+  return selectOptionsBase.call(this, false, select, values, options)
 }
 
 function selectOptionsBase(
   this: UserEvent,
   newValue: boolean,
   select: Element,
   values: HTMLElement | HTMLElement[] | string[] | string,
-  init: MouseEventInit | undefined,
   {skipPointerEventsCheck}: PointerOptions,
 ) {
   if (!newValue && !(select as HTMLSelectElement).multiple) {
@@ -79,27 +76,27 @@ function selectOptionsBase(
 
         // events fired for multiple select are weird. Can't use hover...
         if (withPointerEvents) {
-          fireEvent.pointerOver(option, init)
-          fireEvent.pointerEnter(select, init)
+          fireEvent.pointerOver(option)
+          fireEvent.pointerEnter(select)
           fireEvent.mouseOver(option)
           fireEvent.mouseEnter(select)
-          fireEvent.pointerMove(option, init)
-          fireEvent.mouseMove(option, init)
-          fireEvent.pointerDown(option, init)
-          fireEvent.mouseDown(option, init)
+          fireEvent.pointerMove(option)
+          fireEvent.mouseMove(option)
+          fireEvent.pointerDown(option)
+          fireEvent.mouseDown(option)
         }
 
         focus(select)
 
         if (withPointerEvents) {
-          fireEvent.pointerUp(option, init)
-          fireEvent.mouseUp(option, init)
+          fireEvent.pointerUp(option)
+          fireEvent.mouseUp(option)
         }
 
         selectOption(option as HTMLOptionElement)
 
         if (withPointerEvents) {
-          fireEvent.click(option, init)
+          fireEvent.click(option)
         }
       }
     } else if (selectedOptions.length === 1) {
@@ -108,7 +105,7 @@ function selectOptionsBase(
         : hasPointerEvents(select)
       // the click to open the select options
       if (withPointerEvents) {
-        this.click(select, init, {skipPointerEventsCheck: true})
+        this.click(select, {skipPointerEventsCheck: true})
       } else {
         focus(select)
       }
@@ -118,13 +115,13 @@ function selectOptionsBase(
       if (withPointerEvents) {
         // the browser triggers another click event on the select for the click on the option
         // this second click has no 'down' phase
-        fireEvent.pointerOver(select, init)
-        fireEvent.pointerEnter(select, init)
+        fireEvent.pointerOver(select)
+        fireEvent.pointerEnter(select)
         fireEvent.mouseOver(select)
         fireEvent.mouseEnter(select)
-        fireEvent.pointerUp(select, init)
-        fireEvent.mouseUp(select, init)
-        fireEvent.click(select, init)
+        fireEvent.pointerUp(select)
+        fireEvent.mouseUp(select)
+        fireEvent.click(select)
       }
     } else {
       throw getConfig().getElementError(
@@ -134,9 +131,9 @@ function selectOptionsBase(
     }
   } else if (select.getAttribute('role') === 'listbox') {
     selectedOptions.forEach(option => {
-      this.hover(option, init, {skipPointerEventsCheck})
-      this.click(option, init, {skipPointerEventsCheck})
-      this.unhover(option, init, {skipPointerEventsCheck})
+      this.hover(option, {skipPointerEventsCheck})
+      this.click(option, {skipPointerEventsCheck})
+      this.unhover(option, {skipPointerEventsCheck})
     })
   } else {
     throw getConfig().getElementError(
@@ -153,9 +150,8 @@ function selectOptionsBase(
         bubbles: true,
         cancelable: false,
         composed: true,
-        ...init,
       }),
     )
-    fireEvent.change(select, init)
+    fireEvent.change(select)
   }
 }
diff --git a/src/setup.ts b/src/setup.ts
@@ -129,22 +129,22 @@ function _setup(
     },
 
     click: (...args: Parameters<typeof click>) => {
-      args[2] = {...pointerDefaults, ...clickDefaults, ...args[2]}
+      args[1] = {...pointerDefaults, ...clickDefaults, ...args[1]}
       return click.call(userEvent, ...args)
     },
 
     dblClick: (...args: Parameters<typeof dblClick>) => {
-      args[2] = {...pointerDefaults, ...clickDefaults, ...args[2]}
+      args[1] = {...pointerDefaults, ...clickDefaults, ...args[1]}
       return dblClick.call(userEvent, ...args)
     },
 
     deselectOptions: (...args: Parameters<typeof deselectOptions>) => {
-      args[3] = {...pointerDefaults, ...args[3]}
+      args[2] = {...pointerDefaults, ...args[2]}
       return deselectOptions.call(userEvent, ...args)
     },
 
     hover: (...args: Parameters<typeof hover>) => {
-      args[2] = {...pointerDefaults, ...args[2]}
+      args[1] = {...pointerDefaults, ...args[1]}
       return hover.call(userEvent, ...args)
     },
 
@@ -171,7 +171,7 @@ function _setup(
     }) as typeof pointer,
 
     selectOptions: (...args: Parameters<typeof selectOptions>) => {
-      args[3] = {...pointerDefaults, ...args[3]}
+      args[2] = {...pointerDefaults, ...args[2]}
       return selectOptions.call(userEvent, ...args)
     },
 
@@ -205,7 +205,7 @@ function _setup(
     }) as typeof type,
 
     unhover: (...args: Parameters<typeof unhover>) => {
-      args[2] = {...pointerDefaults, ...args[2]}
+      args[1] = {...pointerDefaults, ...args[1]}
       return unhover.call(userEvent, ...args)
     },
 

diff --git a/src/upload.ts b/src/upload.ts
@@ -3,7 +3,6 @@ import {blur, focus, isDisabled, isElementType} from './utils'
 import type {UserEvent} from './setup'
 
 interface uploadInit {
-  clickInit?: MouseEventInit
   changeInit?: EventInit
 }
 
@@ -29,7 +28,7 @@ export function upload(
   }
   if (isDisabled(element)) return
 
-  this.click(element, init?.clickInit)
+  this.click(element)
 
   const files = (Array.isArray(fileOrFiles) ? fileOrFiles : [fileOrFiles])
     .filter(file => !applyAccept || isAcceptableFile(file, input.accept))

diff --git a/tests/click/click.js b/tests/click/click.js
@@ -471,7 +471,7 @@ test('right click fires `contextmenu` instead of `click', () => {
 
   clearEventCalls()
 
-  userEvent.click(element, {buttons: 2})
+  userEvent.pointer({keys: '[MouseRight]', target: element})
   expect(getEvents('contextmenu')).toHaveLength(1)
   expect(getEvents('click')).toHaveLength(0)
 })
@@ -483,6 +483,6 @@ test('throws when clicking element with pointer-events set to none', () => {
 
 test('does not throws when clicking element with pointer-events set to none and skipPointerEventsCheck is set', () => {
   const {element, getEvents} = setup(`<div style="pointer-events: none"></div>`)
-  userEvent.click(element, undefined, {skipPointerEventsCheck: true})
+  userEvent.click(element, {skipPointerEventsCheck: true})
   expect(getEvents('click')).toHaveLength(1)
 })
diff --git a/tests/click/dblclick.js b/tests/click/dblclick.js
@@ -290,6 +290,6 @@ test('throws an error when dblClick element with pointer-events set to none', ()
 
 test('does not throws when clicking element with pointer-events set to none and skipPointerEventsCheck is set', () => {
   const {element, getEvents} = setup(`<div style="pointer-events: none"></div>`)
-  userEvent.dblClick(element, undefined, {skipPointerEventsCheck: true})
+  userEvent.dblClick(element, {skipPointerEventsCheck: true})
   expect(getEvents('click')).toHaveLength(2)
 })
diff --git a/tests/hover/hover.js b/tests/hover/hover.js
@@ -135,7 +135,7 @@ test('does not throws when hover element with pointer-events set to none and ski
   const {element, getEventSnapshot} = setup(
     `<div style="pointer-events: none"></div>`,
   )
-  userEvent.hover(element, undefined, {skipPointerEventsCheck: true})
+  userEvent.hover(element, {skipPointerEventsCheck: true})
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
     Events fired on: div
 

diff --git a/tests/hover/unhover.js b/tests/hover/unhover.js
@@ -55,7 +55,7 @@ test('does not throws when hover element with pointer-events set to none and ski
   const {element, getEventSnapshot} = setup(
     `<div style="pointer-events: none"></div>`,
   )
-  userEvent.unhover(element, undefined, {skipPointerEventsCheck: true})
+  userEvent.unhover(element, {skipPointerEventsCheck: true})
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
     Events fired on: div
 

diff --git a/tests/selectOptions/select.js b/tests/selectOptions/select.js
@@ -263,7 +263,7 @@ test('fires correct events when pointer events set to none but skipPointerEvents
   const {select, options, getEventSnapshot} = setupSelect({
     pointerEvents: 'none',
   })
-  userEvent.selectOptions(select, '2', undefined, {
+  userEvent.selectOptions(select, '2', {
     skipPointerEventsCheck: true,
   })
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
@@ -303,7 +303,7 @@ test('fires correct events on multi-selects when pointer events is set and skipP
     multiple: true,
     pointerEvents: 'none',
   })
-  userEvent.selectOptions(select, ['1', '3'], undefined, {
+  userEvent.selectOptions(select, ['1', '3'], {
     skipPointerEventsCheck: true,
   })
   expect(getEventSnapshot()).toMatchInlineSnapshot(`

diff --git a/tests/setup.ts b/tests/setup.ts
@@ -165,31 +165,31 @@ cases<APICase>(
     click: {
       api: 'click',
       elementArg: 0,
-      optionsArg: 2,
+      optionsArg: 1,
       options: {
         skipPointerEventsCheck: true,
       },
     },
     dblClick: {
       api: 'dblClick',
       elementArg: 0,
-      optionsArg: 2,
+      optionsArg: 1,
       options: {
         skipPointerEventsCheck: true,
       },
     },
     hover: {
       api: 'hover',
       elementArg: 0,
-      optionsArg: 2,
+      optionsArg: 1,
       options: {
         skipPointerEventsCheck: true,
       },
     },
     unhover: {
       api: 'unhover',
       elementArg: 0,
-      optionsArg: 2,
+      optionsArg: 1,
       options: {
         skipPointerEventsCheck: true,
       },
@@ -221,7 +221,7 @@ cases<APICase>(
       api: 'selectOptions',
       args: [null, ['foo']],
       elementArg: 0,
-      optionsArg: 3,
+      optionsArg: 2,
       options: {
         skipPointerEventsCheck: true,
       },
@@ -230,7 +230,7 @@ cases<APICase>(
       api: 'deselectOptions',
       args: [null, ['foo']],
       elementArg: 0,
-      optionsArg: 3,
+      optionsArg: 2,
       options: {
         skipPointerEventsCheck: true,
       },