chore(select): forward refs to select dom element

__tests__/renderer/shared/components/Forms/Select/Select.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Select from 'shared/components/Forms/Select/Select';
+
+const mountContainer = (props = {}) => {
+  return shallow(<Select {...props} />);
+};
+
+describe('<Select />', () => {
+  it('renders a select', () => {
+    const children = (
+      <React.Fragment>
+        <option value="foo">Foo</option>
+        <option value="bar">Bar</option>
+      </React.Fragment>
+    );
+    const props = { id: 'name', defaultValue: 'foo', children };
+    const wrapper = mountContainer(props);
+    expect(wrapper.type()).toEqual('select');
+    expect(wrapper.props()).toEqual(expect.objectContaining(props));
+  });
+
+  it('applies a custom className', () => {
+    const wrapper = mountContainer({ className: 'currency' });
+    expect(wrapper.prop('className').split(' ')).toContain('currency');
+  });
+});

__tests__/renderer/shared/components/Forms/Select/index.test.js

@@ -1,28 +1,20 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 
-import Select from 'shared/components/Forms/Select';
+import SelectContainer from 'shared/components/Forms/Select';
+import Select from 'shared/components/Forms/Select/Select';
 
 const mountContainer = (props = {}) => {
-  return shallow(<Select {...props} />);
+  return mount(<SelectContainer {...props} />);
 };
 
 describe('<Select />', () => {
-  it('renders a select', () => {
-    const children = (
-      <React.Fragment>
-        <option value="foo">Foo</option>
-        <option value="bar">Bar</option>
-      </React.Fragment>
-    );
-    const props = { id: 'name', defaultValue: 'foo', children };
-    const wrapper = mountContainer(props);
-    expect(wrapper.type()).toEqual('select');
-    expect(wrapper.props()).toEqual(expect.objectContaining(props));
-  });
-
-  it('applies a custom className', () => {
-    const wrapper = mountContainer({ className: 'currency' });
-    expect(wrapper.prop('className').split(' ')).toContain('currency');
+  it('forwards the ref to the component', () => {
+    const ref = React.createRef();
+    const wrapper = mountContainer({ ref });
+    console.log(wrapper.debug());
+    console.log(wrapper.find(Select).props());
+    // expect(wrapper.find(Select).prop('forwardedRef')).toBe(ref.current);
+    // expect(wrapper.find(Select).find('input').prop('forwardedRef')).toBe(ref.current);
   });
 });

src/renderer/shared/components/Forms/Select/Select.js

@@ -1,24 +1,28 @@
 import React from 'react';
 import classNames from 'classnames';
-import { string } from 'prop-types';
+import { string, func } from 'prop-types';
 
 import styles from './Select.scss';
 
 export default class Select extends React.PureComponent {
   static propTypes = {
-    className: string
+    className: string,
+    forwardedRef: func
   };
 
   static defaultProps = {
-    className: null
+    className: null,
+    forwardedRef: null
   };
 
   render() {
-    const { className, ...passDownProps } = this.props;
+    const { className, forwardedRef, ...passDownProps } = this.props;
 
     return (
+
       <select
         {...passDownProps}
+        ref={forwardedRef}
         className={classNames(styles.select, className)}
       />
     );

src/renderer/shared/components/Forms/Select/index.js

@@ -1 +1,5 @@
-export { default } from './Select';
+import withForwardedRef from 'shared/hocs/withForwardedRef';
+
+import Select from './Select';
+
+export default withForwardedRef()(Select);