fix: use isVisible helper to exclude hidden elements

.all-contributorsrc

@@ -725,6 +725,62 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "benadamstyles",
+      "name": "Ben Styles",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4380655?v=4",
+      "profile": "https://benadamstyles.com",
+      "contributions": [
+        "code",
+        "test"
+      ]
+    },
+    {
+      "login": "LauraBeatris",
+      "name": "Laura Beatris",
+      "avatar_url": "https://avatars.githubusercontent.com/u/48022589?v=4",
+      "profile": "http://laurabeatris.com",
+      "contributions": [
+        "code",
+        "test"
+      ]
+    },
+    {
+      "login": "just-boris",
+      "name": "Boris Serdiuk",
+      "avatar_url": "https://avatars.githubusercontent.com/u/812240?v=4",
+      "profile": "https://twitter.com/boriscoder",
+      "contributions": [
+        "bug"
+      ]
+    },
+    {
+      "login": "bozdoz",
+      "name": "bozdoz",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1410985?v=4",
+      "profile": "https://bozdoz.com",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "jKatt",
+      "name": "Jan Kattelans",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5550790?v=4",
+      "profile": "https://github.com/jKatt",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "schoeneu",
+      "name": "schoeneu",
+      "avatar_url": "https://avatars.githubusercontent.com/u/3261341?v=4",
+      "profile": "https://github.com/schoeneu",
+      "contributions": [
+        "bug"
+      ]
     }
   ],
   "commitConvention": "none",

README.md

@@ -271,12 +271,15 @@ test('types into the input', () => {
 })
 ```
 
-### `upload(element, file, [{ clickInit, changeInit }])`
+### `upload(element, file, [{ clickInit, changeInit }], [options])`
 
 Uploads file to an `<input>`. For uploading multiple files use `<input>` with
 `multiple` attribute and the second `upload` argument must be array then. Also
 it's possible to initialize click or change event with using third argument.
 
+If `options.applyAccept` is set to `true` and there is an `accept` attribute on
+the element, files that don't match will be discarded.
+
 ```jsx
 import React from 'react'
 import {render, screen} from '@testing-library/react'
@@ -533,6 +536,8 @@ method.
 | arrowRight | `{arrowright}` |
 | arrowDown  | `{arrowdown}`  |
 | arrowUp    | `{arrowup}`    |
+| home       | `{home}`       |
+| end        | `{end}`        |
 | enter      | `{enter}`      |
 | escape     | `{esc}`        |
 | delete     | `{del}`        |
@@ -683,6 +688,14 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://github.com/vasilii-kovalev"><img src="https://avatars0.githubusercontent.com/u/10310491?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vasilii Kovalev</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=vasilii-kovalev" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/commits?author=vasilii-kovalev" title="Documentation">📖</a></td>
     <td align="center"><a href="https://www.daleseo.com"><img src="https://avatars1.githubusercontent.com/u/5466341?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dale Seo</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=daleseo" title="Documentation">📖</a></td>
     <td align="center"><a href="http://www.alex-boyce.me/"><img src="https://avatars.githubusercontent.com/u/4050934?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alex Boyce</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=curiosity26" title="Code">💻</a></td>
+    <td align="center"><a href="https://benadamstyles.com"><img src="https://avatars.githubusercontent.com/u/4380655?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ben Styles</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=benadamstyles" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/commits?author=benadamstyles" title="Tests">⚠️</a></td>
+    <td align="center"><a href="http://laurabeatris.com"><img src="https://avatars.githubusercontent.com/u/48022589?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Laura Beatris</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=LauraBeatris" title="Code">💻</a> <a href="https://github.com/testing-library/user-event/commits?author=LauraBeatris" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://twitter.com/boriscoder"><img src="https://avatars.githubusercontent.com/u/812240?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Boris Serdiuk</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3Ajust-boris" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://bozdoz.com"><img src="https://avatars.githubusercontent.com/u/1410985?v=4?s=100" width="100px;" alt=""/><br /><sub><b>bozdoz</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=bozdoz" title="Documentation">📖</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/jKatt"><img src="https://avatars.githubusercontent.com/u/5550790?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jan Kattelans</b></sub></a><br /><a href="https://github.com/testing-library/user-event/commits?author=jKatt" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/schoeneu"><img src="https://avatars.githubusercontent.com/u/3261341?v=4?s=100" width="100px;" alt=""/><br /><sub><b>schoeneu</b></sub></a><br /><a href="https://github.com/testing-library/user-event/issues?q=author%3Aschoeneu" title="Bug reports">🐛</a></td>
   </tr>
 </table>
 

src/__tests__/click.js

@@ -442,3 +442,20 @@ test('calls FocusEvents with relatedTarget', () => {
     element0,
   )
 })
+
+test('move focus to closest focusable element', () => {
+  const {element} = setup(`
+    <div tabIndex="0">
+      <div>this is not focusable</div>
+      <button>this is focusable</button>
+    </div>
+  `)
+
+  document.body.focus()
+  userEvent.click(element.children[1])
+  expect(element.children[1]).toHaveFocus()
+
+  document.body.focus()
+  userEvent.click(element.children[0])
+  expect(element).toHaveFocus()
+})

src/__tests__/type.js

@@ -1121,84 +1121,84 @@ 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)
-  `)
+      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).toHaveValue('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)
-  `)
+      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).toHaveValue('01:05')
 })
 
@@ -1208,7 +1208,7 @@ test('can type more a number higher than 60 minutes into an input `time` and the
 
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
     Events fired on: input[value="23:59"]
-    
+
     input[value=""] - pointerover
     input[value=""] - pointerenter
     input[value=""] - mouseover: Left (0)
@@ -1254,7 +1254,7 @@ test('can type letters into an input `time` and they are ignored', () => {
 
   expect(getEventSnapshot()).toMatchInlineSnapshot(`
     Events fired on: input[value="16:36"]
-    
+
     input[value=""] - pointerover
     input[value=""] - pointerenter
     input[value=""] - mouseover: Left (0)
@@ -1495,3 +1495,22 @@ test('{arrowup} fires keyup/keydown events', () => {
     input[value=""] - keyup: ArrowUp (38)
   `)
 })
+
+test('{enter} fires click on links', () => {
+  const {element, getEventSnapshot} = setup('<a href="#">link</a>')
+
+  element?.focus()
+
+  userEvent.type(element, '{enter}', {skipClick: true})
+
+  expect(getEventSnapshot()).toMatchInlineSnapshot(`
+    Events fired on: a
+
+    a - focus
+    a - focusin
+    a - keydown: Enter (13)
+    a - keypress: Enter (13)
+    a - click: Left (0)
+    a - keyup: Enter (13)
+  `)
+})

src/__tests__/upload.js

@@ -163,3 +163,59 @@ test('should call onChange/input bubbling up the event when a file is selected',
   expect(onInputInput).toHaveBeenCalledTimes(1)
   expect(onInputForm).toHaveBeenCalledTimes(1)
 })
+
+test.each([
+  [true, 'video/*,audio/*', 2],
+  [true, '.png', 1],
+  [true, 'text/csv', 1],
+  [true, '', 4],
+  [false, 'video/*', 4],
+])(
+  'should filter according to accept attribute applyAccept=%s, acceptAttribute=%s',
+  (applyAccept, acceptAttribute, expectedLength) => {
+    const files = [
+      new File(['hello'], 'hello.png', {type: 'image/png'}),
+      new File(['there'], 'there.jpg', {type: 'audio/mp3'}),
+      new File(['there'], 'there.csv', {type: 'text/csv'}),
+      new File(['there'], 'there.jpg', {type: 'video/mp4'}),
+    ]
+    const {element} = setup(`
+    <input 
+      type="file" 
+      accept="${acceptAttribute}" multiple 
+    />
+  `)
+
+    userEvent.upload(element, files, undefined, {applyAccept})
+
+    expect(element.files).toHaveLength(expectedLength)
+  },
+)
+
+test('should not trigger input event when selected files are the same', () => {
+  const {element, eventWasFired, clearEventCalls} = setup(
+    '<input type="file" multiple/>',
+  )
+  const files = [
+    new File(['hello'], 'hello.png', {type: 'image/png'}),
+    new File(['there'], 'there.png', {type: 'image/png'}),
+  ]
+
+  userEvent.upload(element, [])
+  expect(eventWasFired('input')).toBe(false)
+  expect(element.files).toHaveLength(0)
+
+  userEvent.upload(element, files)
+  expect(eventWasFired('input')).toBe(true)
+  expect(element.files).toHaveLength(2)
+
+  clearEventCalls()
+
+  userEvent.upload(element, files)
+  expect(eventWasFired('input')).toBe(false)
+  expect(element.files).toHaveLength(2)
+
+  userEvent.upload(element, [])
+  expect(eventWasFired('input')).toBe(true)
+  expect(element.files).toHaveLength(0)
+})