From 0ffb5f3d28c6628c559007b679470302dc806382 Mon Sep 17 00:00:00 2001
From: Philipp Fritsche <ph.fritsche@gmail.com>
Date: Thu, 18 Mar 2021 00:45:52 +0100
Subject: [PATCH] test: add tests for functional keys (#590)

* chore: mv plugin test files

* test: add getEvents filter

* test: add tests for functional keys
---
 src/__tests__/helpers/utils.js                |  5 +-
 .../{type => keyboard}/plugin/arrow.ts        |  0
 .../{type => keyboard}/plugin/character.ts    |  0
 .../{type => keyboard}/plugin/control.ts      |  0
 .../{type => keyboard}/plugin/functional.ts   | 85 +++++++++++++++++++
 5 files changed, 89 insertions(+), 1 deletion(-)
 rename src/__tests__/{type => keyboard}/plugin/arrow.ts (100%)
 rename src/__tests__/{type => keyboard}/plugin/character.ts (100%)
 rename src/__tests__/{type => keyboard}/plugin/control.ts (100%)
 rename src/__tests__/{type => keyboard}/plugin/functional.ts (51%)

diff --git a/src/__tests__/helpers/utils.js b/src/__tests__/helpers/utils.js
index 69946df9..f72ba8d3 100644
--- 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 b/src/__tests__/keyboard/plugin/arrow.ts
similarity index 100%
rename from src/__tests__/type/plugin/arrow.ts
rename to src/__tests__/keyboard/plugin/arrow.ts
diff --git a/src/__tests__/type/plugin/character.ts b/src/__tests__/keyboard/plugin/character.ts
similarity index 100%
rename from src/__tests__/type/plugin/character.ts
rename to src/__tests__/keyboard/plugin/character.ts
diff --git a/src/__tests__/type/plugin/control.ts b/src/__tests__/keyboard/plugin/control.ts
similarity index 100%
rename from src/__tests__/type/plugin/control.ts
rename to src/__tests__/keyboard/plugin/control.ts
diff --git a/src/__tests__/type/plugin/functional.ts b/src/__tests__/keyboard/plugin/functional.ts
similarity index 51%
rename from src/__tests__/type/plugin/functional.ts
rename to src/__tests__/keyboard/plugin/functional.ts
index dbc34938..1b3814ec 100644
--- a/src/__tests__/type/plugin/functional.ts
+++ b/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)
+  `)
+})