QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-16 22:55:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: Select component refactoring - SelectControl - Iteration 5 (#16510)

Browse Source 
* Refactor Select DatasourceEditor

* Fire onChange with allowNewOptions

* Clean up

* Refactor Select in AnnotationLayer

* Handle on clear

* Update tests

* Refactor Select in SpatialControl

* Show search

* Refactor Select in FilterBox

* Remove search where unnecessary

* Update SelectControl - WIP

* Refactor Controls

* Update SelectControl tests

* Clean up

* Test allowNewOptions false

* Use SelectControl AnnotationLayer

* Use SelectControl SpatialControl

* Clean up

* Render custom label

* Show search

* Implement filterOption

* Improve filterOption

* Update Cypress

* Update Cypress table test

* Use value for defaultValue

* Merge with latest changes

* Reconcile with latest Select changes

* Update superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.test.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Update superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.test.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Revert changes to test

* Call onPopoverClear when v value is undefined

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
This commit is contained in:
Geido
2021-10-04 18:24:41 +03:00
committed by GitHub
parent 1ab36c94f3
commit 3f0756f637
14 changed files with 233 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
superset-frontend/spec/javascripts/explore/components/SelectControl_spec.jsx
View File

@@ -20,8 +20,7 @@
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import { Select, CreatableSelect } from 'src/components/Select';
import OnPasteSelect from 'src/components/Select/OnPasteSelect';
import { Select as SelectComponent } from 'src/components';
import SelectControl from 'src/explore/components/controls/SelectControl';
import { styledMount as mount } from 'spec/helpers/theming';
@@ -48,59 +47,35 @@ describe('SelectControl', () => {
wrapper = shallow(<SelectControl {...defaultProps} />);
});
it('uses Select in onPasteSelect when freeForm=false', () => {
wrapper = shallow(<SelectControl {...defaultProps} multi />);
const select = wrapper.find(OnPasteSelect);
expect(select.props().selectWrap).toBe(Select);
});
it('uses Creatable in onPasteSelect when freeForm=true', () => {
wrapper = shallow(<SelectControl {...defaultProps} multi freeForm />);
const select = wrapper.find(OnPasteSelect);
expect(select.props().selectWrap).toBe(CreatableSelect);
});
it('calls props.onChange when select', () => {
const select = wrapper.instance();
select.onChange({ value: 50 });
select.onChange(50);
expect(defaultProps.onChange.calledWith(50)).toBe(true);
});
it('returns all options on select all', () => {
const expectedValues = ['one', 'two'];
const selectAllProps = {
multi: true,
allowAll: true,
choices: expectedValues,
name: 'row_limit',
label: 'Row Limit',
valueKey: 'value',
onChange: sinon.spy(),
};
wrapper.setProps(selectAllProps);
wrapper.instance().onChange([{ meta: true, value: 'Select all' }]);
expect(selectAllProps.onChange.calledWith(expectedValues)).toBe(true);
});
describe('render', () => {
it('renders with Select by default', () => {
expect(wrapper.find(OnPasteSelect)).not.toExist();
expect(wrapper.findWhere(x => x.type() === Select)).toHaveLength(1);
expect(wrapper.find(SelectComponent)).toExist();
});
it('renders with OnPasteSelect when multi', () => {
it('renders as mode multiple', () => {
wrapper.setProps({ multi: true });
expect(wrapper.find(OnPasteSelect)).toExist();
expect(wrapper.findWhere(x => x.type() === Select)).toHaveLength(0);
expect(wrapper.find(SelectComponent)).toExist();
expect(wrapper.find(SelectComponent).prop('mode')).toBe('multiple');
});
it('renders with Creatable when freeForm', () => {
it('renders with allowNewOptions when freeForm', () => {
wrapper.setProps({ freeForm: true });
expect(wrapper.find(OnPasteSelect)).not.toExist();
expect(wrapper.findWhere(x => x.type() === CreatableSelect)).toHaveLength(
1,
);
expect(wrapper.find(SelectComponent)).toExist();
expect(wrapper.find(SelectComponent).prop('allowNewOptions')).toBe(true);
});
it('renders with allowNewOptions=false when freeForm=false', () => {
wrapper.setProps({ freeForm: false });
expect(wrapper.find(SelectComponent)).toExist();
expect(wrapper.find(SelectComponent).prop('allowNewOptions')).toBe(false);
});
describe('empty placeholder', () => {
describe('withMulti', () => {
it('does not show a placeholder if there are no choices', () => {
@@ -161,16 +136,6 @@ describe('SelectControl', () => {
);
expect(wrapper.html()).not.toContain('add something');
});
it('shows numbers of options as a placeholder by default', () => {
wrapper = mount(<SelectControl {...defaultProps} multi />);
expect(wrapper.html()).toContain('2 option(s');
});
it('reduces the number of options in the placeholder by the value length', () => {
wrapper = mount(
<SelectControl {...defaultProps} multi value={['today']} />,
);
expect(wrapper.html()).toContain('1 option(s');
});
});
describe('when select is single', () => {
it('does not render the placeholder when a selection has been made', () => {
@@ -186,82 +151,12 @@ describe('SelectControl', () => {
});
});
describe('optionsRemaining', () => {
describe('isMulti', () => {
it('returns the options minus selected values', () => {
const wrapper = mount(
<SelectControl {...defaultProps} multi value={['today']} />,
);
expect(wrapper.instance().optionsRemaining()).toEqual(1);
});
});
describe('is not multi', () => {
it('returns the length of all options', () => {
wrapper = mount(
<SelectControl
{...defaultProps}
value={50}
placeholder="add something"
/>,
);
expect(wrapper.instance().optionsRemaining()).toEqual(2);
});
});
describe('with Select all', () => {
it('does not count it', () => {
const props = { ...defaultProps, multi: true, allowAll: true };
const wrapper = mount(<SelectControl {...props} />);
expect(wrapper.instance().getOptions(props).length).toEqual(3);
expect(wrapper.instance().optionsRemaining()).toEqual(2);
});
});
});
describe('getOptions', () => {
it('returns the correct options', () => {
wrapper.setProps(defaultProps);
expect(wrapper.instance().getOptions(defaultProps)).toEqual(options);
});
it('shows Select-All when enabled', () => {
const selectAllProps = {
choices: ['one', 'two'],
name: 'name',
freeForm: true,
allowAll: true,
multi: true,
valueKey: 'value',
};
wrapper.setProps(selectAllProps);
expect(wrapper.instance().getOptions(selectAllProps)).toContainEqual({
label: 'Select all',
meta: true,
value: 'Select all',
});
});
it('returns the correct options when freeform is set to true', () => {
const freeFormProps = {
choices: [],
freeForm: true,
value: ['one', 'two'],
name: 'row_limit',
label: 'Row Limit',
valueKey: 'custom_value_key',
onChange: sinon.spy(),
};
// the last added option is at the top
const expectedNewOptions = [
{ custom_value_key: 'two', label: 'two' },
{ custom_value_key: 'one', label: 'one' },
];
wrapper.setProps(freeFormProps);
expect(wrapper.instance().getOptions(freeFormProps)).toEqual(
expectedNewOptions,
);
});
});
describe('UNSAFE_componentWillReceiveProps', () => {
it('sets state.options if props.choices has changed', () => {
const updatedOptions = [