[js-testing] more tests for SelectControl

superset/assets/javascripts/explore/components/controls/SelectControl.jsx

@@ -34,7 +34,6 @@ export default class SelectControl extends React.PureComponent {
     super(props);
     this.state = { options: this.getOptions(props) };
     this.onChange = this.onChange.bind(this);
-    this.renderOption = this.renderOption.bind(this);
   }
   componentWillReceiveProps(nextProps) {
     if (nextProps.choices !== this.props.choices) {
@@ -60,7 +59,6 @@ export default class SelectControl extends React.PureComponent {
           value: c[0],
           label,
         };
-        if (c[2]) option.imgSrc = c[2];
       } else if (Object.is(c)) {
         option = c;
       } else {
@@ -88,17 +86,6 @@ export default class SelectControl extends React.PureComponent {
     }
     return options;
   }
-  renderOption(opt) {
-    if (opt.imgSrc) {
-      return (
-        <div>
-          <img className="viz-thumb-option" src={opt.imgSrc} alt={opt.value} />
-          <span>{opt.label}</span>
-        </div>
-      );
-    }
-    return opt.label;
-  }
   render() {
     //  Tab, comma or Enter will trigger a new option created for FreeFormSelect
     const selectProps = {
@@ -111,7 +98,7 @@ export default class SelectControl extends React.PureComponent {
       clearable: this.props.clearable,
       isLoading: this.props.isLoading,
       onChange: this.onChange,
-      optionRenderer: this.renderOption,
+      optionRenderer: () => opt.label,
     };
     //  Tab, comma or Enter will trigger a new option created for FreeFormSelect
     const selectWrap = this.props.freeForm ?

superset/assets/spec/javascripts/explore/components/SelectControl_spec.jsx

@@ -0,0 +1,79 @@
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import Select, { Creatable } from 'react-select';
+import sinon from 'sinon';
+import { expect } from 'chai';
+import { describe, it, beforeEach } from 'mocha';
+import { shallow } from 'enzyme';
+import SelectControl from '../../../../javascripts/explore/components/controls/SelectControl';
+
+const defaultProps = {
+  choices: [['1 year ago', '1 year ago'], ['today', 'today']],
+  name: 'row_limit',
+  label: 'Row Limit',
+  onChange: sinon.spy(),
+};
+
+const options = [
+  { value: '1 year ago', label: '1 year ago' },
+  { value: 'today', label: 'today' },
+];
+
+describe('SelectControl', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<SelectControl {...defaultProps} />);
+  });
+
+  it('renders a Select', () => {
+    expect(wrapper.find(Select)).to.have.lengthOf(1);
+  });
+
+  it('calls onChange when toggled', () => {
+    const select = wrapper.find(Select);
+    select.simulate('change', { value: 50 });
+    expect(defaultProps.onChange.calledWith(50)).to.be.true;
+  });
+
+  it('renders a Creatable for freeform', () => {
+    wrapper = shallow(<SelectControl {...defaultProps} freeForm />);
+    expect(wrapper.find(Creatable)).to.have.lengthOf(1);
+  });
+
+  describe('getOptions', () => {
+    it('returns the correct options', () => {
+      expect(wrapper.instance().getOptions(defaultProps)).to.deep.equal(options);
+    });
+
+    it('returns the correct options when freeform is set to true', () => {
+      const freeFormProps = Object.assign(defaultProps, {
+        choices: [],
+        freeForm: true,
+        value: ['one', 'two'],
+      });
+      const newOptions = [
+        { value: 'one', label: 'one' },
+        { value: 'two', label: 'two' },
+      ];
+      expect(wrapper.instance().getOptions(freeFormProps)).to.deep.equal(newOptions);
+    });
+  });
+
+  describe('componentWillReceiveProps', () => {
+    it('sets state.options if props.choices has changed', () => {
+      const updatedOptions = [
+        { value: 'three', label: 'three' },
+        { value: 'four', label: 'four' },
+      ];
+      const newProps = {
+        choices: [['three', 'three'], ['four', 'four']],
+        name: 'name',
+        freeForm: false,
+        value: null,
+      };
+      wrapper.setProps(newProps);
+      expect(wrapper.state().options).to.deep.equal(updatedOptions);
+    });
+  });
+});