zd - Add class to Select component when in Async mode for testing

This would simplify testing when this component is used in selenium tests. We can wait for the result set to be loaded, but doing so would require that change to made in every place this is being used in tests. Adding this class would allow the page object to be able to check itself and every test would benefit automatically.

src/components/Select.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactSelect from 'react-select-plus';
+import classnames from 'classnames';
 import Close from './Close';
 import Icon from './Icon';
 import noop from 'lodash.noop';
@@ -11,6 +12,7 @@ import './Select.scss';
 
 class Select extends React.Component {
   static propTypes = {
+    className: PropTypes.string,
     defaultValue: PropTypes.any,
     loadOptions: PropTypes.func,
     onChange: PropTypes.func,
@@ -48,9 +50,10 @@ class Select extends React.Component {
   }
 
   render() {
-    const { value, ...props } = this.props;
+    const { className, value, ...props } = this.props;
     delete props.onChange; // don't pass onChange prop to react-select
     const SelectElement = this.props.loadOptions ? ReactSelect.Async : ReactSelect;
+    const classNames = classnames(className, {'select-async': this.props.loadOptions});
 
     return (
       <SelectElement
@@ -61,6 +64,7 @@ class Select extends React.Component {
         onChange={this.onChange}
         value={value || this.state.value}
         ref={this.bindInput}
+        className={classNames}
         {...props}
       />
     );

test/components/Select.spec.js

@@ -21,6 +21,7 @@ describe('<Select />', () => {
       it('should have a blank default', () => {
         assert.equal(component.type(), ReactSelect);
         assert.equal(component.prop('value'), null);
+        assert(!component.hasClass('select-async'));
       });
 
       it('should clear input', () => {
@@ -78,6 +79,25 @@ describe('<Select />', () => {
 
     const component = shallow(<Select loadOptions={getOptions} />);
     assert.equal(component.type(), ReactSelect.Async);
+    assert(component.hasClass('select-async'));
+  });
+
+  it('should append the async class to the className prop', () => {
+    const getOptions = (input, callback) => {
+      callback(null, {
+        options: [
+          { value: 'oogah', label: 'Oogah' },
+          { value: 'chaka', label: 'Chaka' }
+        ],
+        complete: true
+      });
+    };
+
+    const component = shallow(<Select loadOptions={getOptions} className="foo bar" />);
+    assert.equal(component.type(), ReactSelect.Async);
+    assert(component.hasClass('foo'));
+    assert(component.hasClass('bar'));
+    assert(component.hasClass('select-async'));
   });
 
   it('should support focus', () => {