fix(type): allow users to type decimal values

testing-library · Jun 11, 2020 · ba1c8d3 · ba1c8d3
1 parent a944015
commit ba1c8d3
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 12 deletions.
diff --git a/src/__tests__/type.js b/src/__tests__/type.js
@@ -414,8 +414,7 @@ test('can type into an input with type `email`', async () => {
 // https://github.com/testing-library/user-event/issues/336
 test('can type "-" into number inputs', async () => {
   const {element, getEventCalls} = setup('<input type="number" />')
-  const negativeNumber = '-3'
-  await userEvent.type(element, negativeNumber)
+  await userEvent.type(element, '-3')
   expect(element).toHaveValue(-3)
 
   // NOTE: the input event here does not actually change the value thanks to
@@ -436,17 +435,40 @@ test('can type "-" into number inputs', async () => {
   `)
 })
 
+// https://github.com/testing-library/user-event/issues/336
+test('can type "." into number inputs', async () => {
+  const {element, getEventCalls} = setup('<input type="number" />')
+  await userEvent.type(element, '0.3')
+  expect(element).toHaveValue(0.3)
+
+  expect(getEventCalls()).toMatchInlineSnapshot(`
+    Events fired on: input[value=".3"]
+
+    focus
+    keydown: 0 (48)
+    keypress: 0 (48)
+    input: "{CURSOR}" -> "0"
+    keyup: 0 (48)
+    keydown: . (46)
+    keypress: . (46)
+    input: "{CURSOR}0" -> ""
+    keyup: . (46)
+    keydown: 3 (51)
+    keypress: 3 (51)
+    input: "{CURSOR}" -> ".3"
+    keyup: 3 (51)
+  `)
+})
+
 test('-{backspace}3', async () => {
   const {element} = setup('<input type="number" />')
-  const negativeNumber = '-{backspace}3'
-  await userEvent.type(element, negativeNumber)
+  await userEvent.type(element, '-{backspace}3')
   expect(element).toHaveValue(3)
 })
 
 test('-a3', async () => {
   const {element} = setup('<input type="number" />')
-  const negativeNumber = '-a3'
-  await userEvent.type(element, negativeNumber)
+  await userEvent.type(element, '-a3')
   expect(element).toHaveValue(-3)
 })
 

diff --git a/src/type.js b/src/type.js
@@ -227,13 +227,18 @@ async function typeImpl(
       }
     }
     const eventOverrides = {}
-    let prevWasMinus
+    let prevWasMinus, prevWasPeriod
     for (const callback of eventCallbacks) {
       if (delay > 0) await wait(delay)
       if (!currentElement().disabled) {
-        const returnValue = await callback({prevWasMinus, eventOverrides})
+        const returnValue = await callback({
+          prevWasMinus,
+          prevWasPeriod,
+          eventOverrides,
+        })
         Object.assign(eventOverrides, returnValue?.eventOverrides)
         prevWasMinus = returnValue?.prevWasMinus
+        prevWasPeriod = returnValue?.prevWasPeriod
       }
     }
   }
@@ -339,10 +344,13 @@ async function typeImpl(
     }
   }
 
-  async function typeCharacter(char, {prevWasMinus = false, eventOverrides}) {
+  async function typeCharacter(
+    char,
+    {prevWasMinus = false, prevWasPeriod = false, eventOverrides},
+  ) {
     const key = char // TODO: check if this also valid for characters with diacritic markers e.g. úé etc
     const keyCode = char.charCodeAt(0)
-    let nextPrevWasMinus
+    let nextPrevWasMinus, nextPrevWasPeriod
 
     const keyDownDefaultNotPrevented = fireEvent.keyDown(currentElement(), {
       key,
@@ -362,7 +370,12 @@ async function typeImpl(
       })
 
       if (keyPressDefaultNotPrevented) {
-        const newEntry = prevWasMinus ? `-${char}` : char
+        let newEntry = char
+        if (prevWasMinus) {
+          newEntry = `-${char}`
+        } else if (prevWasPeriod) {
+          newEntry = `.${char}`
+        }
 
         const {prevValue} = await fireInputEventIfNeeded({
           ...calculateNewValue(newEntry),
@@ -385,6 +398,11 @@ async function typeImpl(
           } else {
             nextPrevWasMinus = newEntry === '-'
           }
+          if (newValue === prevValue && newEntry !== '.') {
+            nextPrevWasPeriod = prevWasPeriod
+          } else {
+            nextPrevWasPeriod = newEntry === '.'
+          }
         }
       }
     }
@@ -398,7 +416,7 @@ async function typeImpl(
       ...eventOverrides,
     })
 
-    return {prevWasMinus: nextPrevWasMinus}
+    return {prevWasMinus: nextPrevWasMinus, prevWasPeriod: nextPrevWasPeriod}
   }
 
   function modifier({name, key, keyCode, modifierProperty}) {