keep placeholder on multiselect (#11289)

This commit is contained in:
Elizabeth Thompson
2020-11-12 11:36:24 -08:00
committed by GitHub
parent 542d2e3b06
commit b277f19808
7 changed files with 386 additions and 52 deletions

View File

@@ -19,7 +19,7 @@
/* eslint-disable no-unused-expressions */
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import { shallow, mount } from 'enzyme';
import { Select, CreatableSelect } from 'src/components/Select';
import OnPasteSelect from 'src/components/Select/OnPasteSelect';
import SelectControl from 'src/explore/components/controls/SelectControl';
@@ -47,25 +47,6 @@ describe('SelectControl', () => {
wrapper = shallow(<SelectControl {...defaultProps} />);
});
it('renders with Select by default', () => {
expect(wrapper.find(OnPasteSelect)).not.toExist();
expect(wrapper.findWhere(x => x.type() === Select)).toHaveLength(1);
});
it('renders with OnPasteSelect when multi', () => {
wrapper.setProps({ multi: true });
expect(wrapper.find(OnPasteSelect)).toExist();
expect(wrapper.findWhere(x => x.type() === Select)).toHaveLength(0);
});
it('renders with Creatable when freeForm', () => {
wrapper.setProps({ freeForm: true });
expect(wrapper.find(OnPasteSelect)).not.toExist();
expect(wrapper.findWhere(x => x.type() === CreatableSelect)).toHaveLength(
1,
);
});
it('uses Select in onPasteSelect when freeForm=false', () => {
wrapper = shallow(<SelectControl {...defaultProps} multi />);
const select = wrapper.find(OnPasteSelect);
@@ -100,6 +81,141 @@ describe('SelectControl', () => {
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);
});
it('renders with OnPasteSelect when multi', () => {
wrapper.setProps({ multi: true });
expect(wrapper.find(OnPasteSelect)).toExist();
expect(wrapper.findWhere(x => x.type() === Select)).toHaveLength(0);
});
it('renders with Creatable when freeForm', () => {
wrapper.setProps({ freeForm: true });
expect(wrapper.find(OnPasteSelect)).not.toExist();
expect(wrapper.findWhere(x => x.type() === CreatableSelect)).toHaveLength(
1,
);
});
describe('empty placeholder', () => {
describe('withMulti', () => {
it('does not show a placeholder if there are no choices', () => {
const withMulti = mount(
<SelectControl
{...defaultProps}
choices={[]}
multi
placeholder="add something"
/>,
);
expect(withMulti.html()).not.toContain('placeholder=');
});
});
describe('withSingleChoice', () => {
it('does not show a placeholder if there are no choices', () => {
const singleChoice = mount(
<SelectControl
{...defaultProps}
choices={[]}
multi
placeholder="add something"
/>,
);
expect(singleChoice.html()).not.toContain('placeholder=');
});
});
describe('default placeholder', () => {
it('does not show a placeholder if there are no options', () => {
const defaultPlaceholder = mount(
<SelectControl {...defaultProps} choices={[]} multi />,
);
expect(defaultPlaceholder.html()).not.toContain('placeholder=');
});
});
describe('all choices selected', () => {
it('does not show a placeholder', () => {
const allChoicesSelected = mount(
<SelectControl
{...defaultProps}
multi
value={['today', '1 year ago']}
/>,
);
expect(allChoicesSelected.html()).toContain('placeholder=""');
});
});
});
describe('when select is multi', () => {
it('renders the placeholder when a selection has been made', () => {
wrapper = mount(
<SelectControl
{...defaultProps}
multi
value={50}
placeholder="add something"
/>,
);
expect(wrapper.html()).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', () => {
wrapper = mount(
<SelectControl
{...defaultProps}
value={50}
placeholder="add something"
/>,
);
expect(wrapper.html()).not.toContain('add something');
});
});
});
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);