chore(select): forward refs to select dom element

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import LabeledSelect from 'shared/components/Forms/LabeledSelect';
+import Label from 'shared/components/Forms/Label';
+import Select from 'shared/components/Forms/Select';
+
+const mountContainer = (props = {}) => {
+  return mount(<LabeledSelect {...props} />);
+};
+
+describe('<LabeledSelect />', () => {
+  it('renders a label', () => {
+    const wrapper = mountContainer({ id: 'currency', label: 'Currency' });
+    const label = wrapper.find(Label);
+    expect(label.exists()).toBe(true);
+    expect(label.props()).toEqual(expect.objectContaining({ label: 'Currency', htmlFor: 'currency' }));
+  });
+
+  it('renders a select', () => {
+    const children = (
+      <React.Fragment>
+        <option value="USD">United States Dollar</option>
+        <option value="EUR">Euro</option>
+      </React.Fragment>
+    );
+    const wrapper = mountContainer({ id: 'currency', label: 'Currency', children });
+    const select = wrapper.find(Select);
+    expect(select.exists()).toBe(true);
+    expect(select.props()).toEqual(expect.objectContaining({ id: 'currency', children }));
+  });
+});

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

@@ -1,32 +1,20 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import LabeledSelect from 'shared/components/Forms/LabeledSelect';
-import Label from 'shared/components/Forms/Label';
-import Select from 'shared/components/Forms/Select';
+import LabeledSelectContainer from 'shared/components/Forms/LabeledSelect';
+import LabeledSelect from 'shared/components/Forms/LabeledSelect/LabeledSelect';
 
 const mountContainer = (props = {}) => {
-  return mount(<LabeledSelect {...props} />);
+  return mount(<LabeledSelectContainer {...props} />);
 };
 
 describe('<LabeledSelect />', () => {
-  it('renders a label', () => {
-    const wrapper = mountContainer({ id: 'currency', label: 'Currency' });
-    const label = wrapper.find(Label);
-    expect(label.exists()).toBe(true);
-    expect(label.props()).toEqual(expect.objectContaining({ label: 'Currency', htmlFor: 'currency' }));
-  });
-
-  it('renders a select', () => {
-    const children = (
-      <React.Fragment>
-        <option value="USD">United States Dollar</option>
-        <option value="EUR">Euro</option>
-      </React.Fragment>
-    );
-    const wrapper = mountContainer({ id: 'currency', label: 'Currency', children });
-    const select = wrapper.find(Select);
-    expect(select.exists()).toBe(true);
-    expect(select.props()).toEqual(expect.objectContaining({ id: 'currency', children }));
+  it('forwards the ref to the component', () => {
+    const ref = React.createRef();
+    const wrapper = mountContainer({ ref });
+    console.log(wrapper.debug());
+    console.log(wrapper.find(LabeledSelect).props());
+    // expect(wrapper.find(LabeledSelect).prop('forwardedRef')).toBe(ref.current);
+    // expect(wrapper.find(LabeledSelect).find('input').prop('forwardedRef')).toBe(ref.current);
   });
 });

__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/LabeledSelect/LabeledSelect.js

@@ -6,22 +6,24 @@ import Label from '../Label';
 import Select from '../Select';
 import styles from './LabeledSelect.scss';
 
-export default function LabeledSelect(props) {
-  const { id, label, labelClass, ...passDownProps } = props;
+export default class LabeledSelect extends React.PureComponent {
+  static propTypes = {
+    id: string.isRequired,
+    label: node.isRequired,
+    labelClass: string
+  };
 
-  return (
-    <Label htmlFor={id} label={label} className={classNames(styles.labeledSelect, labelClass)}>
-      <Select id={id} {...passDownProps} />
-    </Label>
-  );
-}
+  static defaultProps = {
+    labelClass: null
+  };
 
-LabeledSelect.propTypes = {
-  id: string.isRequired,
-  label: node.isRequired,
-  labelClass: string
-};
+  render() {
+    const { id, label, labelClass, ...passDownProps } = this.props;
 
-LabeledSelect.defaultProps = {
-  labelClass: null
-};
+    return (
+      <Label htmlFor={id} label={label} className={classNames(styles.labeledSelect, labelClass)}>
+        <Select id={id} {...passDownProps} />
+      </Label>
+    );
+  }
+}

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

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

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);