test: add tests for functional keys (#590)

* chore: mv plugin test files * test: add getEvents filter * test: add tests for functional keys
testing-library · Mar 17, 2021 · 0ffb5f3 · 0ffb5f3
1 parent fa9299e
commit 0ffb5f3
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 1 deletion.
diff --git a/src/__tests__/helpers/utils.js b/src/__tests__/helpers/utils.js
@@ -241,7 +241,10 @@ function addListeners(element, {eventHandlers = {}} = {}) {
     generalListener.mockClear()
     eventHandlerCalls.current = []
   }
-  const getEvents = () => generalListener.mock.calls.map(([e]) => e)
+  const getEvents = type =>
+    generalListener.mock.calls
+      .map(([e]) => e)
+      .filter(e => !type || e.type === type)
   const eventWasFired = eventType => getEvents().some(e => e.type === eventType)
 
   function getClickEventsSnapshot() {

diff --git a/src/__tests__/type/plugin/arrow.ts → src/__tests__/keyboard/plugin/arrow.ts b/src/__tests__/type/plugin/arrow.ts → src/__tests__/keyboard/plugin/arrow.ts
diff --git a/src/__tests__/type/plugin/character.ts → src/__tests__/keyboard/plugin/character.ts b/src/__tests__/type/plugin/character.ts → src/__tests__/keyboard/plugin/character.ts
diff --git a/src/__tests__/type/plugin/control.ts → src/__tests__/keyboard/plugin/control.ts b/src/__tests__/type/plugin/control.ts → src/__tests__/keyboard/plugin/control.ts
diff --git a/src/__tests__/type/plugin/functional.ts → src/__tests__/keyboard/plugin/functional.ts b/src/__tests__/type/plugin/functional.ts → src/__tests__/keyboard/plugin/functional.ts
@@ -74,3 +74,88 @@ test('backspace to valid value', () => {
     input[value="5"] - keyup: Backspace (8)
   `)
 })
+
+test('trigger click event on [Enter] keydown on HTMLAnchorElement', () => {
+  const {element, getEventSnapshot, getEvents} = setup(
+    `<a href="example.com" target="_blank"/>`,
+  )
+  ;(element as HTMLAnchorElement).focus()
+
+  userEvent.keyboard('[Enter]')
+
+  expect(getEvents('click')).toHaveLength(1)
+  expect(getEvents('click')[0]).toHaveProperty('detail', 0)
+
+  // this snapshot should probably not contain a keypress event
+  // see https://github.com/testing-library/user-event/issues/589
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: a
+
+    a - focus
+    a - focusin
+    a - keydown: Enter (13)
+    a - keypress: Enter (13)
+    a - click: Left (0)
+    a - keyup: Enter (13)
+  `)
+})
+
+test('trigger click event on [Enter] keypress on HTMLButtonElement', () => {
+  const {element, getEventSnapshot, getEvents} = setup(`<button/>`)
+  ;(element as HTMLButtonElement).focus()
+
+  userEvent.keyboard('[Enter]')
+
+  expect(getEvents('click')).toHaveLength(1)
+  expect(getEvents('click')[0]).toHaveProperty('detail', 0)
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: button
+
+    button - focus
+    button - focusin
+    button - keydown: Enter (13)
+    button - keypress: Enter (13)
+    button - click: Left (0)
+    button - keyup: Enter (13)
+  `)
+})
+
+test('trigger click event on [Space] keyup on HTMLButtonElement', () => {
+  const {element, getEventSnapshot, getEvents} = setup(`<button/>`)
+  ;(element as HTMLButtonElement).focus()
+
+  userEvent.keyboard('[Space]')
+
+  expect(getEvents('click')).toHaveLength(1)
+  expect(getEvents('click')[0]).toHaveProperty('detail', 0)
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: button
+
+    button - focus
+    button - focusin
+    button - keydown: (32)
+    button - keypress: (32)
+    button - keyup: (32)
+    button - click: Left (0)
+  `)
+})
+
+test('trigger click event on [Space] keyup on HTMLInputElement type=button', () => {
+  const {element, getEventSnapshot, getEvents} = setup(`<button/>`)
+  ;(element as HTMLButtonElement).focus()
+
+  userEvent.keyboard('[Space]')
+
+  expect(getEvents('click')).toHaveLength(1)
+  expect(getEvents('click')[0]).toHaveProperty('detail', 0)
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: button
+
+    button - focus
+    button - focusin
+    button - keydown: (32)
+    button - keypress: (32)
+    button - keyup: (32)
+    button - click: Left (0)
+  `)
+})