testing-library / testing-library/user-event
File Input bug when Uploading
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 258
- PR merge metrics
- No merged PRs in 30d
Description
Reproduction example
https://codesandbox.io/p/sandbox/test-file-upload-xtg77s
Prerequisites
- Have an input element using the file type with an accept attribute with a comma-separated list that adds spaces between each value.
- Write a test that uses the upload function on a file that matches one of the latter values in the accept attribute.
Expected behavior
The file input should have the uploaded file.
Actual behavior
The onChange event is not triggered, and the file input doesn't have the uploaded file.
User-event version
^14.1.1
Environment
No response
Additional context
The problem lies in the isAcceptableFile function. After splitting the string by its commas, it doesn't trim the whitespace, so some valid comma-separated tokens fail this test.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/utility/upload.ts at the isAcceptableFile function linked in the issue, then reproduce the comma-separated accept attribute case from the CodeSandbox. Check the existing upload tests and add coverage for whitespace around later tokens. Done means a matching file is retained by the input and its onChange event is triggered.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- testing
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100