feat(userEvent): add {del} and {selectall}

Author: kentcdodds

src/user-event/__tests__/type-modifiers.js

@@ -342,3 +342,107 @@ test('{meta}{alt}{ctrl}a{/ctrl}{/alt}{/meta}', async () => {
     keyup: Meta (93)
   `)
 })
+
+test('{selectall} selects all the text', async () => {
+  const value = 'abcdefg'
+  const {element, clearEventCalls, getEventCalls} = setup(
+    `<input value="${value}" />`,
+  )
+  element.setSelectionRange(2, 6)
+
+  clearEventCalls()
+
+  await userEvent.type(element, '{selectall}')
+
+  expect(element.selectionStart).toBe(0)
+  expect(element.selectionEnd).toBe(value.length)
+  expect(getEventCalls()).toMatchInlineSnapshot(`
+    Events fired on: input[value="abcdefg"]
+
+    focus
+    select
+  `)
+})
+
+test('{del} at the start of the input', async () => {
+  const {element, getEventCalls} = setup(`<input value="hello" />`)
+
+  await userEvent.type(element, '{del}', {
+    initialSelectionStart: 0,
+    initialSelectionEnd: 0,
+  })
+
+  expect(element.selectionStart).toBe(0)
+  expect(element.selectionEnd).toBe(0)
+  expect(getEventCalls()).toMatchInlineSnapshot(`
+    Events fired on: input[value="ello"]
+
+    focus
+    select
+    keydown: Delete (46)
+    input: "{CURSOR}hello" -> "ello"
+    select
+    keyup: Delete (46)
+  `)
+})
+
+test('{del} at end of the input', async () => {
+  const {element, getEventCalls} = setup(`<input value="hello" />`)
+
+  await userEvent.type(element, '{del}')
+
+  expect(element.selectionStart).toBe(element.value.length)
+  expect(element.selectionEnd).toBe(element.value.length)
+  expect(getEventCalls()).toMatchInlineSnapshot(`
+    Events fired on: input[value="hello"]
+
+    focus
+    select
+    keydown: Delete (46)
+    keyup: Delete (46)
+  `)
+})
+
+test('{del} in the middle of the input', async () => {
+  const {element, getEventCalls} = setup(`<input value="hello" />`)
+
+  await userEvent.type(element, '{del}', {
+    initialSelectionStart: 2,
+    initialSelectionEnd: 2,
+  })
+
+  expect(element.selectionStart).toBe(2)
+  expect(element.selectionEnd).toBe(2)
+  expect(getEventCalls()).toMatchInlineSnapshot(`
+    Events fired on: input[value="helo"]
+
+    focus
+    select
+    keydown: Delete (46)
+    input: "he{CURSOR}llo" -> "helo"
+    select
+    keyup: Delete (46)
+  `)
+})
+
+test('{del} with a selection range', async () => {
+  const {element, getEventCalls} = setup(`<input value="hello" />`)
+
+  await userEvent.type(element, '{del}', {
+    initialSelectionStart: 1,
+    initialSelectionEnd: 3,
+  })
+
+  expect(element.selectionStart).toBe(1)
+  expect(element.selectionEnd).toBe(1)
+  expect(getEventCalls()).toMatchInlineSnapshot(`
+    Events fired on: input[value="hlo"]
+
+    focus
+    select
+    keydown: Delete (46)
+    input: "h{SELECTION}el{/SELECTION}lo" -> "hlo"
+    select
+    keyup: Delete (46)
+  `)
+})

src/user-event/index.js

@@ -403,6 +403,10 @@ async function upload(element, fileOrFiles, {clickInit, changeInit} = {}) {
 upload = wrapAsync(upload)
 
 async function tab({shift = false, focusTrap = document} = {}) {
+  // everything in user-event must be actually async, but since we're not
+  // calling fireEvent in here, we'll add this tick here...
+  await tick()
+
   const focusableElements = focusTrap.querySelectorAll(
     'input, button, select, textarea, a[href], [tabindex]',
   )
@@ -464,9 +468,6 @@ async function tab({shift = false, focusTrap = document} = {}) {
   } else {
     next.focus()
   }
-  // everything in user-event must be actually async, but since we're not
-  // calling fireEvent in here, we'll add this tick here...
-  await tick()
 }
 tab = wrapAsync(tab)
 

src/user-event/type.js

@@ -1,5 +1,6 @@
 import {wrapAsync} from '../wrap-async'
 import {fireEvent} from './tick-fire-event'
+import {tick} from './tick'
 
 function wait(time) {
   return new Promise(resolve => setTimeout(() => resolve(), time))
@@ -160,6 +161,37 @@ async function type(
           ...eventOverrides,
         })
       },
+      '{del}': async ({eventOverrides}) => {
+        const key = 'Delete'
+        const keyCode = 46
+
+        const keyPressDefaultNotPrevented = await fireEvent.keyDown(
+          currentElement(),
+          {
+            key,
+            keyCode,
+            which: keyCode,
+            ...eventOverrides,
+          },
+        )
+
+        if (keyPressDefaultNotPrevented) {
+          await fireInputEventIfNeeded({
+            ...calculateNewDeleteValue(),
+            eventOverrides: {
+              inputType: 'deleteContentForward',
+              ...eventOverrides,
+            },
+          })
+        }
+
+        await fireEvent.keyUp(currentElement(), {
+          key,
+          keyCode,
+          which: keyCode,
+          ...eventOverrides,
+        })
+      },
       '{backspace}': async ({eventOverrides}) => {
         const key = 'Backspace'
         const keyCode = 8
@@ -191,6 +223,10 @@ async function type(
           ...eventOverrides,
         })
       },
+      '{selectall}': async () => {
+        await tick()
+        currentElement().setSelectionRange(0, currentValue().length)
+      },
     }
     const eventCallbacks = []
     let remainingString = text
@@ -255,6 +291,7 @@ async function type(
       if (selectionStart === 0) {
         // at the beginning of the input
         newValue = value
+        newSelectionStart = selectionStart
       } else if (selectionStart === value.length) {
         // at the end of the input
         newValue = value.slice(0, value.length - 1)
@@ -275,6 +312,36 @@ async function type(
     return {newValue, newSelectionStart}
   }
 
+  function calculateNewDeleteValue() {
+    const {selectionStart, selectionEnd} = currentElement()
+    const value = currentValue()
+    let newValue
+
+    if (selectionStart === null) {
+      // at the end of an input type that does not support selection ranges
+      // https://github.com/testing-library/user-event/issues/316#issuecomment-639744793
+      newValue = value
+    } else if (selectionStart === selectionEnd) {
+      if (selectionStart === 0) {
+        // at the beginning of the input
+        newValue = value.slice(1)
+      } else if (selectionStart === value.length) {
+        // at the end of the input
+        newValue = value
+      } else {
+        // in the middle of the input
+        newValue =
+          value.slice(0, selectionStart) + value.slice(selectionEnd + 1)
+      }
+    } else {
+      // we have something selected
+      const firstPart = value.slice(0, selectionStart)
+      newValue = firstPart + value.slice(selectionEnd)
+    }
+
+    return {newValue, newSelectionStart: selectionStart}
+  }
+
   function calculateNewValue(newEntry) {
     const {selectionStart, selectionEnd} = currentElement()
     // can't use .maxLength property because of a jsdom bug: