Skip to content

Commit 0d30a79

Browse files
gndeliagndelia
authored
feat(type): add time input support (#502)
* feat(type): add time input support * docs: improved docs for input time support * refactor: renamed function in type * docs: improved example in time support
1 parent 67bf638 commit 0d30a79

File tree

4 files changed

+427
-0
lines changed

4 files changed

+427
-0
lines changed

‎README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,32 @@ test('delete characters within the selectedRange', () => {
240240
})
241241
```
242242

243+
#### <input type="time" /> support
244+
245+
The following is an example of usage of this library with
246+
`<input type="time" />`
247+
248+
```jsx
249+
import React from 'react
250+
import {render, screen} from '@testing-library/react'
251+
import userEvent from '@testing-library/user-event'
252+
253+
test('types into the input', () => {
254+
render(
255+
<>
256+
<label for="time">Enter a time</label>
257+
<input
258+
type="time"
259+
id="time"
260+
/>
261+
</>
262+
)
263+
const input = screen.getByLabelText(/enter a time/i)
264+
userEvent.type(input, '13:58')
265+
expect(input.value).toBe('13:58')
266+
})
267+
```
268+
243269
### `upload(element, file, [{ clickInit, changeInit }])`
244270
245271
Uploads file to an `<input>`. For uploading multiple files use `<input>` with
@@ -610,6 +636,7 @@ Thanks goes to these people ([emoji key][emojis]):
610636

611637
<!-- markdownlint-enable -->
612638
<!-- prettier-ignore-end -->
639+
613640
<!-- ALL-CONTRIBUTORS-LIST:END -->
614641

615642
This project follows the [all-contributors][all-contributors] specification.

‎src/__tests__/type.js

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1066,3 +1066,330 @@ test('navigation key: {arrowleft} and {arrowright} moves the cursor', () => {
10661066
input[value="abc"] - keyup: c (99)
10671067
`)
10681068
})
1069+
1070+
test('can type into an input with type `time`', () => {
1071+
const {element, getEventSnapshot} = setup('<input type="time" />')
1072+
userEvent.type(element, '01:05')
1073+
expect(getEventSnapshot()).toMatchInlineSnapshot(`
1074+
Events fired on: input[value="01:05"]
1075+
1076+
input[value=""] - pointerover
1077+
input[value=""] - pointerenter
1078+
input[value=""] - mouseover: Left (0)
1079+
input[value=""] - mouseenter: Left (0)
1080+
input[value=""] - pointermove
1081+
input[value=""] - mousemove: Left (0)
1082+
input[value=""] - pointerdown
1083+
input[value=""] - mousedown: Left (0)
1084+
input[value=""] - focus
1085+
input[value=""] - focusin
1086+
input[value=""] - pointerup
1087+
input[value=""] - mouseup: Left (0)
1088+
input[value=""] - click: Left (0)
1089+
input[value=""] - keydown: 0 (48)
1090+
input[value=""] - keypress: 0 (48)
1091+
input[value=""] - keyup: 0 (48)
1092+
input[value=""] - keydown: 1 (49)
1093+
input[value=""] - keypress: 1 (49)
1094+
input[value=""] - keyup: 1 (49)
1095+
input[value=""] - keydown: : (58)
1096+
input[value=""] - keypress: : (58)
1097+
input[value=""] - keyup: : (58)
1098+
input[value=""] - keydown: 0 (48)
1099+
input[value=""] - keypress: 0 (48)
1100+
input[value="01:00"] - input
1101+
"{CURSOR}" -> "{CURSOR}01:00"
1102+
input[value="01:00"] - change
1103+
input[value="01:00"] - keyup: 0 (48)
1104+
input[value="01:00"] - keydown: 5 (53)
1105+
input[value="01:00"] - keypress: 5 (53)
1106+
input[value="01:05"] - input
1107+
"{CURSOR}01:00" -> "{CURSOR}01:05"
1108+
input[value="01:05"] - change
1109+
input[value="01:05"] - keyup: 5 (53)
1110+
`)
1111+
expect(element.value).toBe('01:05')
1112+
})
1113+
1114+
test('can type into an input with type `time` without ":"', () => {
1115+
const {element, getEventSnapshot} = setup('<input type="time" />')
1116+
userEvent.type(element, '0105')
1117+
expect(getEventSnapshot()).toMatchInlineSnapshot(`
1118+
Events fired on: input[value="01:05"]
1119+
1120+
input[value=""] - pointerover
1121+
input[value=""] - pointerenter
1122+
input[value=""] - mouseover: Left (0)
1123+
input[value=""] - mouseenter: Left (0)
1124+
input[value=""] - pointermove
1125+
input[value=""] - mousemove: Left (0)
1126+
input[value=""] - pointerdown
1127+
input[value=""] - mousedown: Left (0)
1128+
input[value=""] - focus
1129+
input[value=""] - focusin
1130+
input[value=""] - pointerup
1131+
input[value=""] - mouseup: Left (0)
1132+
input[value=""] - click: Left (0)
1133+
input[value=""] - keydown: 0 (48)
1134+
input[value=""] - keypress: 0 (48)
1135+
input[value=""] - keyup: 0 (48)
1136+
input[value=""] - keydown: 1 (49)
1137+
input[value=""] - keypress: 1 (49)
1138+
input[value=""] - keyup: 1 (49)
1139+
input[value=""] - keydown: 0 (48)
1140+
input[value=""] - keypress: 0 (48)
1141+
input[value="01:00"] - input
1142+
"{CURSOR}" -> "{CURSOR}01:00"
1143+
input[value="01:00"] - change
1144+
input[value="01:00"] - keyup: 0 (48)
1145+
input[value="01:00"] - keydown: 5 (53)
1146+
input[value="01:00"] - keypress: 5 (53)
1147+
input[value="01:05"] - input
1148+
"{CURSOR}01:00" -> "{CURSOR}01:05"
1149+
input[value="01:05"] - change
1150+
input[value="01:05"] - keyup: 5 (53)
1151+
`)
1152+
expect(element.value).toBe('01:05')
1153+
})
1154+
1155+
test('can type more a number higher than 60 minutes into an input `time` and they are converted into 59 minutes', () => {
1156+
const {element, getEventSnapshot} = setup('<input type="time" />')
1157+
userEvent.type(element, '23:90')
1158+
1159+
expect(getEventSnapshot()).toMatchInlineSnapshot(`
1160+
Events fired on: input[value="23:59"]
1161+
1162+
input[value=""] - pointerover
1163+
input[value=""] - pointerenter
1164+
input[value=""] - mouseover: Left (0)
1165+
input[value=""] - mouseenter: Left (0)
1166+
input[value=""] - pointermove
1167+
input[value=""] - mousemove: Left (0)
1168+
input[value=""] - pointerdown
1169+
input[value=""] - mousedown: Left (0)
1170+
input[value=""] - focus
1171+
input[value=""] - focusin
1172+
input[value=""] - pointerup
1173+
input[value=""] - mouseup: Left (0)
1174+
input[value=""] - click: Left (0)
1175+
input[value=""] - keydown: 2 (50)
1176+
input[value=""] - keypress: 2 (50)
1177+
input[value=""] - keyup: 2 (50)
1178+
input[value=""] - keydown: 3 (51)
1179+
input[value=""] - keypress: 3 (51)
1180+
input[value=""] - keyup: 3 (51)
1181+
input[value=""] - keydown: : (58)
1182+
input[value=""] - keypress: : (58)
1183+
input[value=""] - keyup: : (58)
1184+
input[value=""] - keydown: 9 (57)
1185+
input[value=""] - keypress: 9 (57)
1186+
input[value="23:09"] - input
1187+
"{CURSOR}" -> "{CURSOR}23:09"
1188+
input[value="23:09"] - change
1189+
input[value="23:09"] - keyup: 9 (57)
1190+
input[value="23:09"] - keydown: 0 (48)
1191+
input[value="23:09"] - keypress: 0 (48)
1192+
input[value="23:59"] - input
1193+
"{CURSOR}23:09" -> "{CURSOR}23:59"
1194+
input[value="23:59"] - change
1195+
input[value="23:59"] - keyup: 0 (48)
1196+
`)
1197+
1198+
expect(element.value).toBe('23:59')
1199+
})
1200+
1201+
test('can type letters into an input `time` and they are ignored', () => {
1202+
const {element, getEventSnapshot} = setup('<input type="time" />')
1203+
userEvent.type(element, '1a6bc36abd')
1204+
1205+
expect(getEventSnapshot()).toMatchInlineSnapshot(`
1206+
Events fired on: input[value="16:36"]
1207+
1208+
input[value=""] - pointerover
1209+
input[value=""] - pointerenter
1210+
input[value=""] - mouseover: Left (0)
1211+
input[value=""] - mouseenter: Left (0)
1212+
input[value=""] - pointermove
1213+
input[value=""] - mousemove: Left (0)
1214+
input[value=""] - pointerdown
1215+
input[value=""] - mousedown: Left (0)
1216+
input[value=""] - focus
1217+
input[value=""] - focusin
1218+
input[value=""] - pointerup
1219+
input[value=""] - mouseup: Left (0)
1220+
input[value=""] - click: Left (0)
1221+
input[value=""] - keydown: 1 (49)
1222+
input[value=""] - keypress: 1 (49)
1223+
input[value=""] - keyup: 1 (49)
1224+
input[value=""] - keydown: a (97)
1225+
input[value=""] - keypress: a (97)
1226+
input[value=""] - keyup: a (97)
1227+
input[value=""] - keydown: 6 (54)
1228+
input[value=""] - keypress: 6 (54)
1229+
input[value=""] - keyup: 6 (54)
1230+
input[value=""] - keydown: b (98)
1231+
input[value=""] - keypress: b (98)
1232+
input[value=""] - keyup: b (98)
1233+
input[value=""] - keydown: c (99)
1234+
input[value=""] - keypress: c (99)
1235+
input[value=""] - keyup: c (99)
1236+
input[value=""] - keydown: 3 (51)
1237+
input[value=""] - keypress: 3 (51)
1238+
input[value="16:03"] - input
1239+
"{CURSOR}" -> "{CURSOR}16:03"
1240+
input[value="16:03"] - change
1241+
input[value="16:03"] - keyup: 3 (51)
1242+
input[value="16:03"] - keydown: 6 (54)
1243+
input[value="16:03"] - keypress: 6 (54)
1244+
input[value="16:36"] - input
1245+
"{CURSOR}16:03" -> "{CURSOR}16:36"
1246+
input[value="16:36"] - change
1247+
input[value="16:36"] - keyup: 6 (54)
1248+
input[value="16:36"] - keydown: a (97)
1249+
input[value="16:36"] - keypress: a (97)
1250+
input[value="16:36"] - keyup: a (97)
1251+
input[value="16:36"] - keydown: b (98)
1252+
input[value="16:36"] - keypress: b (98)
1253+
input[value="16:36"] - keyup: b (98)
1254+
input[value="16:36"] - keydown: d (100)
1255+
input[value="16:36"] - keypress: d (100)
1256+
input[value="16:36"] - keyup: d (100)
1257+
`)
1258+
1259+
expect(element.value).toBe('16:36')
1260+
})
1261+
1262+
test('can type a digit bigger in the hours section, bigger than 2 and it shows the time correctly', () => {
1263+
const {element, getEventSnapshot} = setup('<input type="time" />')
1264+
userEvent.type(element, '9:25')
1265+
1266+
expect(getEventSnapshot()).toMatchInlineSnapshot(`
1267+
Events fired on: input[value="09:25"]
1268+
1269+
input[value=""] - pointerover
1270+
input[value=""] - pointerenter
1271+
input[value=""] - mouseover: Left (0)
1272+
input[value=""] - mouseenter: Left (0)
1273+
input[value=""] - pointermove
1274+
input[value=""] - mousemove: Left (0)
1275+
input[value=""] - pointerdown
1276+
input[value=""] - mousedown: Left (0)
1277+
input[value=""] - focus
1278+
input[value=""] - focusin
1279+
input[value=""] - pointerup
1280+
input[value=""] - mouseup: Left (0)
1281+
input[value=""] - click: Left (0)
1282+
input[value=""] - keydown: 9 (57)
1283+
input[value=""] - keypress: 9 (57)
1284+
input[value=""] - keyup: 9 (57)
1285+
input[value=""] - keydown: : (58)
1286+
input[value=""] - keypress: : (58)
1287+
input[value=""] - keyup: : (58)
1288+
input[value=""] - keydown: 2 (50)
1289+
input[value=""] - keypress: 2 (50)
1290+
input[value="09:02"] - input
1291+
"{CURSOR}" -> "{CURSOR}09:02"
1292+
input[value="09:02"] - change
1293+
input[value="09:02"] - keyup: 2 (50)
1294+
input[value="09:02"] - keydown: 5 (53)
1295+
input[value="09:02"] - keypress: 5 (53)
1296+
input[value="09:25"] - input
1297+
"{CURSOR}09:02" -> "{CURSOR}09:25"
1298+
input[value="09:25"] - change
1299+
input[value="09:25"] - keyup: 5 (53)
1300+
`)
1301+
1302+
expect(element.value).toBe('09:25')
1303+
})
1304+
1305+
test('can type two digits in the hours section, equals to 24 and it shows the hours as 23', () => {
1306+
const {element, getEventSnapshot} = setup('<input type="time" />')
1307+
userEvent.type(element, '24:52')
1308+
1309+
expect(getEventSnapshot()).toMatchInlineSnapshot(`
1310+
Events fired on: input[value="23:52"]
1311+
1312+
input[value=""] - pointerover
1313+
input[value=""] - pointerenter
1314+
input[value=""] - mouseover: Left (0)
1315+
input[value=""] - mouseenter: Left (0)
1316+
input[value=""] - pointermove
1317+
input[value=""] - mousemove: Left (0)
1318+
input[value=""] - pointerdown
1319+
input[value=""] - mousedown: Left (0)
1320+
input[value=""] - focus
1321+
input[value=""] - focusin
1322+
input[value=""] - pointerup
1323+
input[value=""] - mouseup: Left (0)
1324+
input[value=""] - click: Left (0)
1325+
input[value=""] - keydown: 2 (50)
1326+
input[value=""] - keypress: 2 (50)
1327+
input[value=""] - keyup: 2 (50)
1328+
input[value=""] - keydown: 4 (52)
1329+
input[value=""] - keypress: 4 (52)
1330+
input[value=""] - keyup: 4 (52)
1331+
input[value=""] - keydown: : (58)
1332+
input[value=""] - keypress: : (58)
1333+
input[value=""] - keyup: : (58)
1334+
input[value=""] - keydown: 5 (53)
1335+
input[value=""] - keypress: 5 (53)
1336+
input[value="23:05"] - input
1337+
"{CURSOR}" -> "{CURSOR}23:05"
1338+
input[value="23:05"] - change
1339+
input[value="23:05"] - keyup: 5 (53)
1340+
input[value="23:05"] - keydown: 2 (50)
1341+
input[value="23:05"] - keypress: 2 (50)
1342+
input[value="23:52"] - input
1343+
"{CURSOR}23:05" -> "{CURSOR}23:52"
1344+
input[value="23:52"] - change
1345+
input[value="23:52"] - keyup: 2 (50)
1346+
`)
1347+
1348+
expect(element.value).toBe('23:52')
1349+
})
1350+
1351+
test('can type two digits in the hours section, bigger than 24 and less than 30, and it shows the hours as 23', () => {
1352+
const {element, getEventSnapshot} = setup('<input type="time" />')
1353+
userEvent.type(element, '27:52')
1354+
1355+
expect(getEventSnapshot()).toMatchInlineSnapshot(`
1356+
Events fired on: input[value="23:52"]
1357+
1358+
input[value=""] - pointerover
1359+
input[value=""] - pointerenter
1360+
input[value=""] - mouseover: Left (0)
1361+
input[value=""] - mouseenter: Left (0)
1362+
input[value=""] - pointermove
1363+
input[value=""] - mousemove: Left (0)
1364+
input[value=""] - pointerdown
1365+
input[value=""] - mousedown: Left (0)
1366+
input[value=""] - focus
1367+
input[value=""] - focusin
1368+
input[value=""] - pointerup
1369+
input[value=""] - mouseup: Left (0)
1370+
input[value=""] - click: Left (0)
1371+
input[value=""] - keydown: 2 (50)
1372+
input[value=""] - keypress: 2 (50)
1373+
input[value=""] - keyup: 2 (50)
1374+
input[value=""] - keydown: 7 (55)
1375+
input[value=""] - keypress: 7 (55)
1376+
input[value=""] - keyup: 7 (55)
1377+
input[value=""] - keydown: : (58)
1378+
input[value=""] - keypress: : (58)
1379+
input[value=""] - keyup: : (58)
1380+
input[value=""] - keydown: 5 (53)
1381+
input[value=""] - keypress: 5 (53)
1382+
input[value="23:05"] - input
1383+
"{CURSOR}" -> "{CURSOR}23:05"
1384+
input[value="23:05"] - change
1385+
input[value="23:05"] - keyup: 5 (53)
1386+
input[value="23:05"] - keydown: 2 (50)
1387+
input[value="23:05"] - keypress: 2 (50)
1388+
input[value="23:52"] - input
1389+
"{CURSOR}23:05" -> "{CURSOR}23:52"
1390+
input[value="23:52"] - change
1391+
input[value="23:52"] - keyup: 2 (50)
1392+
`)
1393+
1394+
expect(element.value).toBe('23:52')
1395+
})

0 commit comments

Comments
 (0)