resolved merge conflicts

testing-library · Dec 3, 2020 · 8e123a2 · 8e123a2
2 parents 33a498c + e9dd0a6
commit 8e123a2
Show file tree

Hide file tree

Showing 5 changed files with 438 additions and 0 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -685,6 +685,17 @@
         "test",
         "doc"
       ]
+    },
+    {
+      "login": "gndelia",
+      "name": "Gonzalo D'Elia",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/352474?v=4",
+      "profile": "https://github.com/gndelia",
+      "contributions": [
+        "code",
+        "test",
+        "doc"
+      ]
     }
   ],
   "commitConvention": "none",

diff --git a/README.md b/README.md
@@ -242,6 +242,32 @@ test('delete characters within the selectedRange', () => {
 })
 ```
 
+#### <input type="time" /> support
+
+The following is an example of usage of this library with
+`<input type="time" />`
+
+```jsx
+import React from 'react
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+test('types into the input', () => {
+  render(
+    <>
+      <label for="time">Enter a time</label>
+      <input
+        type="time"
+        id="time"
+      />
+    </>
+  )
+  const input = screen.getByLabelText(/enter a time/i)
+  userEvent.type(input, '13:58')
+  expect(input.value).toBe('13:58')
+})
+```
+
 ### `upload(element, file, [{ clickInit, changeInit }])`
 
 Uploads file to an `<input>`. For uploading multiple files use `<input>` with
@@ -607,6 +633,7 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="http://saul-mirone.github.io/"><img src="https://avatars0.githubusercontent.com/u/10047788?v=4" width="100px;" alt=""/><br /><sub><b>Mirone</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3ASaul-Mirone" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://github.com/amandapouget"><img src="https://avatars3.githubusercontent.com/u/12855692?v=4" width="100px;" alt=""/><br /><sub><b>Amanda Pouget</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=amandapouget" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/Sonic12040"><img src="https://avatars3.githubusercontent.com/u/21055893?v=4" width="100px;" alt=""/><br /><sub><b>Sonic12040</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=Sonic12040" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/commits?author=Sonic12040" title="Tests">⚠️</a> <a href="https://github.com/testing-library/user-event/commits?author=Sonic12040" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/gndelia"><img src="https://avatars1.githubusercontent.com/u/352474?v=4" width="100px;" alt=""/><br /><sub><b>Gonzalo D'Elia</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=gndelia" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/commits?author=gndelia" title="Tests">⚠️</a> <a href="https://github.com/testing-library/user-event/commits?author=gndelia" title="Documentation">📖</a></td>
   </tr>
 </table>
 

diff --git a/src/__tests__/type.js b/src/__tests__/type.js
@@ -1067,6 +1067,333 @@ test('navigation key: {arrowleft} and {arrowright} moves the cursor', () => {
   `)
 })
 
+test('can type into an input with type `time`', () => {
+  const {element, getEventSnapshot} = setup('<input type="time" />')
+  userEvent.type(element, '01:05')
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+  Events fired on: input[value="01:05"]
+  
+  input[value=""] - pointerover
+  input[value=""] - pointerenter
+  input[value=""] - mouseover: Left (0)
+  input[value=""] - mouseenter: Left (0)
+  input[value=""] - pointermove
+  input[value=""] - mousemove: Left (0)
+  input[value=""] - pointerdown
+  input[value=""] - mousedown: Left (0)
+  input[value=""] - focus
+  input[value=""] - focusin
+  input[value=""] - pointerup
+  input[value=""] - mouseup: Left (0)
+  input[value=""] - click: Left (0)
+  input[value=""] - keydown: 0 (48)
+  input[value=""] - keypress: 0 (48)
+  input[value=""] - keyup: 0 (48)
+  input[value=""] - keydown: 1 (49)
+  input[value=""] - keypress: 1 (49)
+  input[value=""] - keyup: 1 (49)
+  input[value=""] - keydown: : (58)
+  input[value=""] - keypress: : (58)
+  input[value=""] - keyup: : (58)
+  input[value=""] - keydown: 0 (48)
+  input[value=""] - keypress: 0 (48)
+  input[value="01:00"] - input
+    "{CURSOR}" -> "{CURSOR}01:00"
+  input[value="01:00"] - change
+  input[value="01:00"] - keyup: 0 (48)
+  input[value="01:00"] - keydown: 5 (53)
+  input[value="01:00"] - keypress: 5 (53)
+  input[value="01:05"] - input
+    "{CURSOR}01:00" -> "{CURSOR}01:05"
+  input[value="01:05"] - change
+  input[value="01:05"] - keyup: 5 (53)
+  `)
+  expect(element.value).toBe('01:05')
+})
+
+test('can type into an input with type `time` without ":"', () => {
+  const {element, getEventSnapshot} = setup('<input type="time" />')
+  userEvent.type(element, '0105')
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+  Events fired on: input[value="01:05"]
+  
+  input[value=""] - pointerover
+  input[value=""] - pointerenter
+  input[value=""] - mouseover: Left (0)
+  input[value=""] - mouseenter: Left (0)
+  input[value=""] - pointermove
+  input[value=""] - mousemove: Left (0)
+  input[value=""] - pointerdown
+  input[value=""] - mousedown: Left (0)
+  input[value=""] - focus
+  input[value=""] - focusin
+  input[value=""] - pointerup
+  input[value=""] - mouseup: Left (0)
+  input[value=""] - click: Left (0)
+  input[value=""] - keydown: 0 (48)
+  input[value=""] - keypress: 0 (48)
+  input[value=""] - keyup: 0 (48)
+  input[value=""] - keydown: 1 (49)
+  input[value=""] - keypress: 1 (49)
+  input[value=""] - keyup: 1 (49)
+  input[value=""] - keydown: 0 (48)
+  input[value=""] - keypress: 0 (48)
+  input[value="01:00"] - input
+    "{CURSOR}" -> "{CURSOR}01:00"
+  input[value="01:00"] - change
+  input[value="01:00"] - keyup: 0 (48)
+  input[value="01:00"] - keydown: 5 (53)
+  input[value="01:00"] - keypress: 5 (53)
+  input[value="01:05"] - input
+    "{CURSOR}01:00" -> "{CURSOR}01:05"
+  input[value="01:05"] - change
+  input[value="01:05"] - keyup: 5 (53)
+  `)
+  expect(element.value).toBe('01:05')
+})
+
+test('can type more a number higher than 60 minutes into an input `time` and they are converted into 59 minutes', () => {
+  const {element, getEventSnapshot} = setup('<input type="time" />')
+  userEvent.type(element, '23:90')
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: input[value="23:59"]
+    
+    input[value=""] - pointerover
+    input[value=""] - pointerenter
+    input[value=""] - mouseover: Left (0)
+    input[value=""] - mouseenter: Left (0)
+    input[value=""] - pointermove
+    input[value=""] - mousemove: Left (0)
+    input[value=""] - pointerdown
+    input[value=""] - mousedown: Left (0)
+    input[value=""] - focus
+    input[value=""] - focusin
+    input[value=""] - pointerup
+    input[value=""] - mouseup: Left (0)
+    input[value=""] - click: Left (0)
+    input[value=""] - keydown: 2 (50)
+    input[value=""] - keypress: 2 (50)
+    input[value=""] - keyup: 2 (50)
+    input[value=""] - keydown: 3 (51)
+    input[value=""] - keypress: 3 (51)
+    input[value=""] - keyup: 3 (51)
+    input[value=""] - keydown: : (58)
+    input[value=""] - keypress: : (58)
+    input[value=""] - keyup: : (58)
+    input[value=""] - keydown: 9 (57)
+    input[value=""] - keypress: 9 (57)
+    input[value="23:09"] - input
+      "{CURSOR}" -> "{CURSOR}23:09"
+    input[value="23:09"] - change
+    input[value="23:09"] - keyup: 9 (57)
+    input[value="23:09"] - keydown: 0 (48)
+    input[value="23:09"] - keypress: 0 (48)
+    input[value="23:59"] - input
+      "{CURSOR}23:09" -> "{CURSOR}23:59"
+    input[value="23:59"] - change
+    input[value="23:59"] - keyup: 0 (48)
+  `)
+
+  expect(element.value).toBe('23:59')
+})
+
+test('can type letters into an input `time` and they are ignored', () => {
+  const {element, getEventSnapshot} = setup('<input type="time" />')
+  userEvent.type(element, '1a6bc36abd')
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: input[value="16:36"]
+    
+    input[value=""] - pointerover
+    input[value=""] - pointerenter
+    input[value=""] - mouseover: Left (0)
+    input[value=""] - mouseenter: Left (0)
+    input[value=""] - pointermove
+    input[value=""] - mousemove: Left (0)
+    input[value=""] - pointerdown
+    input[value=""] - mousedown: Left (0)
+    input[value=""] - focus
+    input[value=""] - focusin
+    input[value=""] - pointerup
+    input[value=""] - mouseup: Left (0)
+    input[value=""] - click: Left (0)
+    input[value=""] - keydown: 1 (49)
+    input[value=""] - keypress: 1 (49)
+    input[value=""] - keyup: 1 (49)
+    input[value=""] - keydown: a (97)
+    input[value=""] - keypress: a (97)
+    input[value=""] - keyup: a (97)
+    input[value=""] - keydown: 6 (54)
+    input[value=""] - keypress: 6 (54)
+    input[value=""] - keyup: 6 (54)
+    input[value=""] - keydown: b (98)
+    input[value=""] - keypress: b (98)
+    input[value=""] - keyup: b (98)
+    input[value=""] - keydown: c (99)
+    input[value=""] - keypress: c (99)
+    input[value=""] - keyup: c (99)
+    input[value=""] - keydown: 3 (51)
+    input[value=""] - keypress: 3 (51)
+    input[value="16:03"] - input
+      "{CURSOR}" -> "{CURSOR}16:03"
+    input[value="16:03"] - change
+    input[value="16:03"] - keyup: 3 (51)
+    input[value="16:03"] - keydown: 6 (54)
+    input[value="16:03"] - keypress: 6 (54)
+    input[value="16:36"] - input
+      "{CURSOR}16:03" -> "{CURSOR}16:36"
+    input[value="16:36"] - change
+    input[value="16:36"] - keyup: 6 (54)
+    input[value="16:36"] - keydown: a (97)
+    input[value="16:36"] - keypress: a (97)
+    input[value="16:36"] - keyup: a (97)
+    input[value="16:36"] - keydown: b (98)
+    input[value="16:36"] - keypress: b (98)
+    input[value="16:36"] - keyup: b (98)
+    input[value="16:36"] - keydown: d (100)
+    input[value="16:36"] - keypress: d (100)
+    input[value="16:36"] - keyup: d (100)
+  `)
+
+  expect(element.value).toBe('16:36')
+})
+
+test('can type a digit bigger in the hours section, bigger than 2 and it shows the time correctly', () => {
+  const {element, getEventSnapshot} = setup('<input type="time" />')
+  userEvent.type(element, '9:25')
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: input[value="09:25"]
+
+    input[value=""] - pointerover
+    input[value=""] - pointerenter
+    input[value=""] - mouseover: Left (0)
+    input[value=""] - mouseenter: Left (0)
+    input[value=""] - pointermove
+    input[value=""] - mousemove: Left (0)
+    input[value=""] - pointerdown
+    input[value=""] - mousedown: Left (0)
+    input[value=""] - focus
+    input[value=""] - focusin
+    input[value=""] - pointerup
+    input[value=""] - mouseup: Left (0)
+    input[value=""] - click: Left (0)
+    input[value=""] - keydown: 9 (57)
+    input[value=""] - keypress: 9 (57)
+    input[value=""] - keyup: 9 (57)
+    input[value=""] - keydown: : (58)
+    input[value=""] - keypress: : (58)
+    input[value=""] - keyup: : (58)
+    input[value=""] - keydown: 2 (50)
+    input[value=""] - keypress: 2 (50)
+    input[value="09:02"] - input
+      "{CURSOR}" -> "{CURSOR}09:02"
+    input[value="09:02"] - change
+    input[value="09:02"] - keyup: 2 (50)
+    input[value="09:02"] - keydown: 5 (53)
+    input[value="09:02"] - keypress: 5 (53)
+    input[value="09:25"] - input
+      "{CURSOR}09:02" -> "{CURSOR}09:25"
+    input[value="09:25"] - change
+    input[value="09:25"] - keyup: 5 (53)
+  `)
+
+  expect(element.value).toBe('09:25')
+})
+
+test('can type two digits in the hours section, equals to 24 and it shows the hours as 23', () => {
+  const {element, getEventSnapshot} = setup('<input type="time" />')
+  userEvent.type(element, '24:52')
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: input[value="23:52"]
+
+    input[value=""] - pointerover
+    input[value=""] - pointerenter
+    input[value=""] - mouseover: Left (0)
+    input[value=""] - mouseenter: Left (0)
+    input[value=""] - pointermove
+    input[value=""] - mousemove: Left (0)
+    input[value=""] - pointerdown
+    input[value=""] - mousedown: Left (0)
+    input[value=""] - focus
+    input[value=""] - focusin
+    input[value=""] - pointerup
+    input[value=""] - mouseup: Left (0)
+    input[value=""] - click: Left (0)
+    input[value=""] - keydown: 2 (50)
+    input[value=""] - keypress: 2 (50)
+    input[value=""] - keyup: 2 (50)
+    input[value=""] - keydown: 4 (52)
+    input[value=""] - keypress: 4 (52)
+    input[value=""] - keyup: 4 (52)
+    input[value=""] - keydown: : (58)
+    input[value=""] - keypress: : (58)
+    input[value=""] - keyup: : (58)
+    input[value=""] - keydown: 5 (53)
+    input[value=""] - keypress: 5 (53)
+    input[value="23:05"] - input
+      "{CURSOR}" -> "{CURSOR}23:05"
+    input[value="23:05"] - change
+    input[value="23:05"] - keyup: 5 (53)
+    input[value="23:05"] - keydown: 2 (50)
+    input[value="23:05"] - keypress: 2 (50)
+    input[value="23:52"] - input
+      "{CURSOR}23:05" -> "{CURSOR}23:52"
+    input[value="23:52"] - change
+    input[value="23:52"] - keyup: 2 (50)
+  `)
+
+  expect(element.value).toBe('23:52')
+})
+
+test('can type two digits in the hours section, bigger than 24 and less than 30, and it shows the hours as 23', () => {
+  const {element, getEventSnapshot} = setup('<input type="time" />')
+  userEvent.type(element, '27:52')
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: input[value="23:52"]
+
+    input[value=""] - pointerover
+    input[value=""] - pointerenter
+    input[value=""] - mouseover: Left (0)
+    input[value=""] - mouseenter: Left (0)
+    input[value=""] - pointermove
+    input[value=""] - mousemove: Left (0)
+    input[value=""] - pointerdown
+    input[value=""] - mousedown: Left (0)
+    input[value=""] - focus
+    input[value=""] - focusin
+    input[value=""] - pointerup
+    input[value=""] - mouseup: Left (0)
+    input[value=""] - click: Left (0)
+    input[value=""] - keydown: 2 (50)
+    input[value=""] - keypress: 2 (50)
+    input[value=""] - keyup: 2 (50)
+    input[value=""] - keydown: 7 (55)
+    input[value=""] - keypress: 7 (55)
+    input[value=""] - keyup: 7 (55)
+    input[value=""] - keydown: : (58)
+    input[value=""] - keypress: : (58)
+    input[value=""] - keyup: : (58)
+    input[value=""] - keydown: 5 (53)
+    input[value=""] - keypress: 5 (53)
+    input[value="23:05"] - input
+      "{CURSOR}" -> "{CURSOR}23:05"
+    input[value="23:05"] - change
+    input[value="23:05"] - keyup: 5 (53)
+    input[value="23:05"] - keydown: 2 (50)
+    input[value="23:05"] - keypress: 2 (50)
+    input[value="23:52"] - input
+      "{CURSOR}23:05" -> "{CURSOR}23:52"
+    input[value="23:52"] - change
+    input[value="23:52"] - keyup: 2 (50)
+  `)
+
+  expect(element.value).toBe('23:52')
+})
+
 test('{arrowdown} fires keyup/keydown events', () => {
   const {element, getEventSnapshot} = setup('<input />')