From 44ab5322795b9b2e4697e8a0b2f85ac2586b85e9 Mon Sep 17 00:00:00 2001 From: Vasilii Kovalev Date: Wed, 2 Dec 2020 21:09:23 +0300 Subject: [PATCH 1/3] Create and expose specialCharMap --- README.md | 42 +++++++++++++++++++++++++++++++++++++++++- src/index.js | 4 +++- src/type.js | 32 ++++++++++++++++++++++---------- typings/index.d.ts | 12 ++++++++++++ 4 files changed, 78 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 1d7bbab6..284ac3b4 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,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) @@ -202,7 +203,7 @@ The following special character strings are supported: | `{ctrl}` | Control | `ctrlKey` | | | `{alt}` | Alt | `altKey` | | | `{meta}` | OS | `metaKey` | | -| `{capslock}` | CapsLock | `modifierCapsLock` | Fires both keydown and keyup when used (simulates a user clicking their "Caps Lock" button to enable caps lock). | +| `{capslock}` | CapsLock | `modifierCapsLock` | Fires both keydown and keyup when used (simulates a user clicking their "Caps Lock" button to enable caps lock). | > **A note about modifiers:** Modifier keys (`{shift}`, `{ctrl}`, `{alt}`, > `{meta}`) will activate their corresponding event modifiers for the duration @@ -491,6 +492,44 @@ 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](#type) method. + +| Key | Character | +| ---------- | -------------- | +| arrowLeft | `{arrowleft}` | +| arrowRight | `{arrowright}` | +| 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( +
+ + +
, + ) + 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] @@ -610,6 +649,7 @@ Thanks goes to these people ([emoji key][emojis]): + This project follows the [all-contributors][all-contributors] specification. diff --git a/src/index.js b/src/index.js index 5b0925fd..2b610d97 100644 --- a/src/index.js +++ b/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} diff --git a/src/type.js b/src/type.js index c7c0f58b..1bb1c003 100644 --- a/src/type.js +++ b/src/type.js @@ -85,16 +85,28 @@ const modifierCallbackMap = { }, } +const specialCharMap = { + arrowLeft: '{arrowleft}', + arrowRight: '{arrowright}', + enter: '{enter}', + escape: '{esc}', + delete: '{del}', + backspace: '{backspace}', + selectAll: '{selectall}', + space: '{space}', + whiteSpace: ' ', +} + const specialCharCallbackMap = { - '{arrowleft}': navigationKey('ArrowLeft'), - '{arrowright}': navigationKey('ArrowRight'), - '{enter}': handleEnter, - '{esc}': handleEsc, - '{del}': handleDel, - '{backspace}': handleBackspace, - '{selectall}': handleSelectall, - '{space}': handleSpace, - ' ': handleSpace, + [specialCharMap.arrowLeft]: navigationKey('ArrowLeft'), + [specialCharMap.arrowRight]: navigationKey('ArrowRight'), + [specialCharMap.enter]: handleEnter, + [specialCharMap.escape]: handleEsc, + [specialCharMap.delete]: handleDel, + [specialCharMap.backspace]: handleBackspace, + [specialCharMap.selectAll]: handleSelectall, + [specialCharMap.space]: handleSpace, + [specialCharMap.whiteSpace]: handleSpace, } function wait(time) { @@ -711,4 +723,4 @@ function handleSpaceOnClickable({currentElement, eventOverrides}) { } } -export {type} +export {type, specialCharMap} diff --git a/typings/index.d.ts b/typings/index.d.ts index 74158a08..91b9912c 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -73,3 +73,15 @@ declare const userEvent: { } export default userEvent + +export enum specialChars { + arrowLeft = '{arrowleft}', + arrowRight = '{arrowright}', + enter = '{enter}', + escape = '{esc}', + delete = '{del}', + backspace = '{backspace}', + selectAll = '{selectall}', + space = '{space}', + whiteSpace = ' ', +} From a94544371874aa4ecec1a0b266cb84cddc1353f9 Mon Sep 17 00:00:00 2001 From: Vasilii Kovalev Date: Wed, 2 Dec 2020 21:37:53 +0300 Subject: [PATCH 2/3] Fix the link to "type" section --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 284ac3b4..f624c867 100644 --- a/README.md +++ b/README.md @@ -494,7 +494,8 @@ You can use the `eventInit` if what you're pasting should have `clipboardData` ### `specialChars` -A handful set of special characters used in [type](#type) method. +A handful set of special characters used in [type](#typeelement-text-options) +method. | Key | Character | | ---------- | -------------- | From 89e55a87f79f0949dbc43152c8da0a16124c7fe4 Mon Sep 17 00:00:00 2001 From: Vasilii Kovalev Date: Thu, 3 Dec 2020 10:08:11 +0300 Subject: [PATCH 3/3] Change whiteSpace to whitespace (lowercase) --- README.md | 2 +- src/type.js | 4 ++-- typings/index.d.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index f624c867..37405dbc 100644 --- a/README.md +++ b/README.md @@ -507,7 +507,7 @@ method. | backspace | `{backspace}` | | selectAll | `{selectall}` | | space | `{space}` | -| whiteSpace | `' '` | +| whitespace | `' '` | Usage example: diff --git a/src/type.js b/src/type.js index 1bb1c003..557a2b04 100644 --- a/src/type.js +++ b/src/type.js @@ -94,7 +94,7 @@ const specialCharMap = { backspace: '{backspace}', selectAll: '{selectall}', space: '{space}', - whiteSpace: ' ', + whitespace: ' ', } const specialCharCallbackMap = { @@ -106,7 +106,7 @@ const specialCharCallbackMap = { [specialCharMap.backspace]: handleBackspace, [specialCharMap.selectAll]: handleSelectall, [specialCharMap.space]: handleSpace, - [specialCharMap.whiteSpace]: handleSpace, + [specialCharMap.whitespace]: handleSpace, } function wait(time) { diff --git a/typings/index.d.ts b/typings/index.d.ts index 91b9912c..f5763e70 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -83,5 +83,5 @@ export enum specialChars { backspace = '{backspace}', selectAll = '{selectall}', space = '{space}', - whiteSpace = ' ', + whitespace = ' ', }