fix: Pass through data and aria attributes (#238)

* Add spread operator to pass through props

* Use dataOrAttributeProps function instead of omit

Credit to DylanVann for dataOrAriaAttributeProps function from
https://github.com/react-component/notification/pull/54/files

* Add tests for "role" attribute passthrough

Co-authored-by: Cameron Hessler <[email protected]>

Author: C-Hess

src/AjaxUploader.jsx

@@ -6,6 +6,18 @@ import getUid from './uid';
 import attrAccept from './attr-accept';
 import traverseFileTree from './traverseFileTree';
 
+const dataOrAriaAttributeProps = (props) => {
+  return Object.keys(props).reduce(
+    (acc, key) => {
+      if (key.substr(0, 5) === 'data-' || key.substr(0, 5) === 'aria-' || key === 'role') {
+        acc[key] = props[key];
+      }
+      return acc;
+    },
+    {},
+  );
+};
+
 class AjaxUploader extends Component {
   state = { uid: getUid() }
 
@@ -199,6 +211,7 @@ class AjaxUploader extends Component {
     const {
       component: Tag, prefixCls, className, disabled, id,
       style, multiple, accept, children, directory, openFileDialogOnClick,
+      ...otherProps,
     } = this.props;
     const cls = classNames({
       [prefixCls]: true,
@@ -220,6 +233,7 @@ class AjaxUploader extends Component {
         style={style}
       >
         <input
+          {...dataOrAriaAttributeProps(otherProps)}
           id={id}
           type="file"
           ref={this.saveFileInput}

tests/uploader.spec.js

@@ -5,6 +5,7 @@ import Uploader from '../index';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-dom/test-utils';
+import { format } from 'util';
 const { Simulate } = TestUtils;
 import sinon from 'sinon';
 
@@ -47,15 +48,24 @@ const makeDataTransferItem = item => {
 describe('uploader', () => {
   let requests;
   let xhr;
+  let errorMock;
 
   beforeEach(() => {
     xhr = sinon.useFakeXMLHttpRequest();
     requests = [];
     xhr.onCreate = req => requests.push(req);
+
+    const originalConsoleError = global.console.error;
+    errorMock = jest.spyOn(global.console, 'error');
+    errorMock.mockImplementation((message, ...otherParams) => {
+      originalConsoleError(message, ...otherParams);
+      throw new Error(format(message, ...otherParams));
+    });
   });
 
   afterEach(() => {
     xhr.restore();
+    errorMock.mockRestore();
   });
 
   describe('ajax uploader', () => {
@@ -116,6 +126,55 @@ describe('uploader', () => {
       });
     });
 
+    it('should pass through data attributes', done => {
+      ReactDOM.render(
+        (
+          <Uploader
+            data-testid="data-testid"
+            data-my-custom-attr="custom data attribute"
+          />
+        ),
+        node,
+        function init() {
+          expect(TestUtils.findRenderedDOMComponentWithTag(this, 'input')
+            .getAttribute('data-testid'))
+            .to.be('data-testid');
+          expect(TestUtils.findRenderedDOMComponentWithTag(this, 'input')
+            .getAttribute('data-my-custom-attr'))
+            .to.be('custom data attribute');
+          done();
+        }
+      );
+    });
+
+    it('should pass through aria attributes', done => {
+      ReactDOM.render(<Uploader aria-label="Upload a file"/>, node, function init() {
+        expect(TestUtils.findRenderedDOMComponentWithTag(this, 'input')
+          .getAttribute('aria-label'))
+          .to.be('Upload a file');
+        done();
+      });
+    });
+
+    it('should pass through role attributes', done => {
+      ReactDOM.render(<Uploader role="button"/>, node, function init() {
+        expect(TestUtils.findRenderedDOMComponentWithTag(this, 'input')
+          .getAttribute('role'))
+          .to.be('button');
+        done();
+      });
+    });
+
+    it('should not pass through unknown props', done => {
+      ReactDOM.render(<Uploader customProp="This shouldn't be rendered to DOM"/>,
+        node,
+        () => {
+          // Fails when React reports unrecognized prop is added to DOM in console.error
+          done();
+        }
+      );
+    });
+
     it('create works', () => {
       expect(TestUtils.scryRenderedDOMComponentsWithTag(uploader, 'span').length).to.be(1);
     });