Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add groupLabel FieldName #941

Merged
merged 8 commits into from
May 17, 2023
Merged

feat: add groupLabel FieldName #941

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
11a6d4d
fix: OptGroup label not display when set fieldNames
May 13, 2023
9cd6818
feat: groupLabel fieldName
May 16, 2023
0616d46
chore: add test case
May 16, 2023
96ef584
chore: put groupLabel api in fileName
May 16, 2023
a99d26a
chore: separate label and groupLabel
May 17, 2023
93389cd
chore: coding style
May 17, 2023
0d5673e
fix: coding style again
May 17, 2023
c9a7a2e
fix: style
May 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: add test case
  • Loading branch information
洋 committed May 16, 2023
commit 0616d469e6c0c4af879f58532b5d74ca77477563
1 change: 1 addition & 0 deletions src/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ const Select = React.forwardRef(
backfill,
fieldNames,
groupLabel,

// Search
inputValue,
searchValue,
Expand Down
65 changes: 45 additions & 20 deletions tests/Select.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,48 @@ describe('Select.Basic', () => {
);
expect(wrapper).toMatchSnapshot();
});

it('should support fieldName', () => {
// groupLabel > fieldNames > self-label
function genOpts(OptLabelName) {
return [
{
groupLabel: 'Manager',
options: [
{
data: 'value',
[OptLabelName]: 'label',
},
],
},
];
}

const { container: containerFirst } = testingRender(
<Select
options={genOpts('test')}
fieldNames={{ value: 'data', label: 'test' }}
groupLabel="groupLabel"
/>,
);
const { container: containerSecond } = testingRender(
<Select
options={genOpts('groupLabel')}
fieldNames={{ value: 'data', label: 'groupLabel' }}
/>,
);
const { container: containerThird } = testingRender(
<Select
options={genOpts('noGroupLabel')}
fieldNames={{ value: 'data', label: 'noGroupLabel' }}
/>,
);

// these generate the same snapshots
expect(containerFirst).toMatchSnapshot();
expect(containerSecond).toMatchSnapshot();
expect(containerThird).toMatchSnapshot();
});
});

it('convert value to array', () => {
Expand Down Expand Up @@ -1925,30 +1967,13 @@ describe('Select.Basic', () => {
});

it('should support title', () => {
const wrapper1 = mount(
<Select
defaultValue="lucy"
options={[]}
/>,
);
const wrapper1 = mount(<Select defaultValue="lucy" options={[]} />);
expect(wrapper1.find('.rc-select').prop('title')).toBe(undefined);
expect(wrapper1.find('.rc-select-selection-item').prop('title')).toBe('lucy');
const wrapper2 = mount(
<Select
defaultValue="lucy"
options={[]}
title=""
/>,
);
const wrapper2 = mount(<Select defaultValue="lucy" options={[]} title="" />);
expect(wrapper2.find('.rc-select').prop('title')).toBe('');
expect(wrapper2.find('.rc-select-selection-item').prop('title')).toBe('');
const wrapper3 = mount(
<Select
defaultValue="lucy"
options={[]}
title="title"
/>,
);
const wrapper3 = mount(<Select defaultValue="lucy" options={[]} title="title" />);
expect(wrapper3.find('.rc-select').prop('title')).toBe('title');
expect(wrapper3.find('.rc-select-selection-item').prop('title')).toBe('title');
});
Expand Down
141 changes: 141 additions & 0 deletions tests/__snapshots__/Select.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -433,6 +433,147 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
</div>
`;

exports[`Select.Basic render should support fieldName 1`] = `
<div>
<div
class="rc-select rc-select-single rc-select-show-arrow"
>
<div
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="rc-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="rc-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
class="rc-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
class="rc-select-arrow-icon"
/>
</span>
</div>
</div>
`;

exports[`Select.Basic render should support fieldName 2`] = `
<div>
<div
class="rc-select rc-select-single rc-select-show-arrow"
>
<div
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="rc-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="rc-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
class="rc-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
class="rc-select-arrow-icon"
/>
</span>
</div>
</div>
`;

exports[`Select.Basic render should support fieldName 3`] = `
<div>
<div
class="rc-select rc-select-single rc-select-show-arrow"
>
<div
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="rc-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="rc-select-selection-placeholder"
/>
</div>
<span
aria-hidden="true"
class="rc-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
class="rc-select-arrow-icon"
/>
</span>
</div>
</div>
`;

exports[`Select.Basic should contain falsy children 1`] = `
<div
class="rc-select-dropdown rc-select-dropdown-placement-bottomLeft"
Expand Down