feat(specialChars): Create and expose specialChars map

README.md

@@ -47,6 +47,7 @@ change the state of the checkbox.
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
+
 - [Installation](#installation)
 - [API](#api)
   - [`click(element, eventInit, options)`](#clickelement-eventinit-options)
@@ -60,6 +61,7 @@ change the state of the checkbox.
   - [`hover(element)`](#hoverelement)
   - [`unhover(element)`](#unhoverelement)
   - [`paste(element, text, eventInit, options)`](#pasteelement-text-eventinit-options)
+  - [`specialChars`](#specialchars)
 - [Issues](#issues)
   - [🐛 Bugs](#-bugs)
   - [💡 Feature Requests](#-feature-requests)
@@ -519,6 +521,47 @@ test('should paste text in input', () => {
 You can use the `eventInit` if what you're pasting should have `clipboardData`
 (like `files`).
 
+### `specialChars`
+
+A handful set of special characters used in [type](#typeelement-text-options)
+method.
+
+| Key        | Character      |
+| ---------- | -------------- |
+| arrowLeft  | `{arrowleft}`  |
+| arrowRight | `{arrowright}` |
+| arrowDown  | `{arrowdown}`  |
+| arrowUp    | `{arrowup}`    |
+| enter      | `{enter}`      |
+| escape     | `{esc}`        |
+| delete     | `{del}`        |
+| backspace  | `{backspace}`  |
+| selectAll  | `{selectall}`  |
+| space      | `{space}`      |
+| whitespace | `' '`          |
+
+Usage example:
+
+```jsx
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import userEvent, {specialChars} from '@testing-library/user-event'
+
+test('delete characters within the selectedRange', () => {
+  render(
+    <div>
+      <label htmlFor="my-input">Example:</label>
+      <input id="my-input" type="text" value="This is a bad example" />
+    </div>,
+  )
+  const input = screen.getByLabelText(/example/i)
+  input.setSelectionRange(10, 13)
+  userEvent.type(input, `${specialChars.backspace}good`)
+
+  expect(input).toHaveValue('This is a good example')
+})
+```
+
 ## Issues
 
 _Looking to contribute? Look for the [Good First Issue][good-first-issue]

src/index.js

@@ -1,5 +1,5 @@
 import {click, dblClick} from './click'
-import {type} from './type'
+import {type, specialCharMap} from './type'
 import {clear} from './clear'
 import {tab} from './tab'
 import {hover, unhover} from './hover'
@@ -22,3 +22,5 @@ const userEvent = {
 }
 
 export default userEvent
+
+export {specialCharMap as specialChars}

src/type.js

@@ -87,18 +87,32 @@ const modifierCallbackMap = {
   },
 }
 
+const specialCharMap = {
+  arrowLeft: '{arrowleft}',
+  arrowRight: '{arrowright}',
+  arrowDown: '{arrowdown}',
+  arrowUp: '{arrowup}',
+  enter: '{enter}',
+  escape: '{esc}',
+  delete: '{del}',
+  backspace: '{backspace}',
+  selectAll: '{selectall}',
+  space: '{space}',
+  whitespace: ' ',
+}
+
 const specialCharCallbackMap = {
-  '{arrowleft}': navigationKey('ArrowLeft'),
-  '{arrowright}': navigationKey('ArrowRight'),
-  '{arrowdown}': handleArrowDown,
-  '{arrowup}': handleArrowUp,
-  '{enter}': handleEnter,
-  '{esc}': handleEsc,
-  '{del}': handleDel,
-  '{backspace}': handleBackspace,
-  '{selectall}': handleSelectall,
-  '{space}': handleSpace,
-  ' ': handleSpace,
+  [specialCharMap.arrowLeft]: navigationKey('ArrowLeft'),
+  [specialCharMap.arrowRight]: navigationKey('ArrowRight'),
+  [specialCharMap.arrowDown]: handleArrowDown,
+  [specialCharMap.arrowUp]: handleArrowUp,
+  [specialCharMap.enter]: handleEnter,
+  [specialCharMap.escape]: handleEsc,
+  [specialCharMap.delete]: handleDel,
+  [specialCharMap.backspace]: handleBackspace,
+  [specialCharMap.selectAll]: handleSelectall,
+  [specialCharMap.space]: handleSpace,
+  [specialCharMap.whitespace]: handleSpace,
 }
 
 function wait(time) {
@@ -773,4 +787,4 @@ function handleArrowUp({currentElement, eventOverrides}) {
   })
 }
 
-export {type}
+export {type, specialCharMap}

typings/index.d.ts

@@ -73,3 +73,17 @@ declare const userEvent: {
 }
 
 export default userEvent
+
+export enum specialChars {
+  arrowLeft = '{arrowleft}',
+  arrowRight = '{arrowright}',
+  arrowDown = '{arrowdown}',
+  arrowUp = '{arrowup}',
+  enter = '{enter}',
+  escape = '{esc}',
+  delete = '{del}',
+  backspace = '{backspace}',
+  selectAll = '{selectall}',
+  space = '{space}',
+  whitespace = ' ',
+}