`upload` method doesn't account for input `accept` attribute

• @testing-library/user-event version: 12.0.11
• Testing Framework and version: Mocha 6.1.4, Chai 3.5.0, Sinon 9.0.2
• DOM Environment: JSDOM 16.2.2

Relevant code or config:

it('restricts accepted file types', () => {
  const onChange = sinon.spy();
  const { getByTestId } = render(
    <input data-testid="upload" type="file" accept="image/*" onChange={onChange} />,
  );
  const file = new window.File([''], 'upload.txt', { type: 'text/plain' });
  userEvent.upload(getByTestId('upload'), file);

  expect(onChange.called).to.be.false();
});

What you did:

1. Assign accept to <input type="file" /> to limit accepted file types
2. Trigger userEvent.upload with an unacceptable file type and expect change callback not to be fired

What happened:

Change callback is triggered.

  1) demo
       restricts accepted file types:
     AssertionError: expected true to be false
      at execDeferred (node_modules/dirty-chai/lib/dirty-chai.js:43:29)
      at Assertion.newMethod (node_modules/dirty-chai/lib/dirty-chai.js:68:18)
      at Assertion.assert (node_modules/chai/lib/chai/utils/addChainableMethod.js:84:49)
      at Context.<anonymous> (spec/demo.js:29:3)
      at processImmediate (internal/timers.js:456:21)

Problem description:

If the scope of @testing-library/user-event should include validations that a user would encounter in interacting with page elements, I would expect accept attribute to be respected.

Suggested solution:

There is currently one validation in upload:

https://github.com/testing-library/user-event/blob/448046c237482837d18439ed9fc1128065e641f3/src/upload.js#L7

It’s suggested this could be expanded to cover fileOrFiles validation based on target element’s accept attribute:

Pseudo-code:

if (!every(fileOrFiles, createIsAcceptableByAttribute(element.getAttribute('accept'))) return

[kentcdodds]

What I would do is add an assertion that the attribute is there and then trust the browser to do what it should based on its presence.

[kentcdodds]

That suggested solution seems reasonable to me 👍