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

fix: groupLabel feat and test error #942

Merged
merged 4 commits into from
May 19, 2023
Merged

fix: groupLabel feat and test error #942

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
685a3dc
fix: groupLabel
May 19, 2023
e2e461b
chore: less bundle
May 19, 2023
a086fad
fix
May 19, 2023
8b7e562
chore: add test case
May 19, 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
2 changes: 1 addition & 1 deletion src/utils/valueUtil.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export function flattenOptions<OptionType extends BaseOptionType = DefaultOption
function dig(list: OptionType[], isGroupOption: boolean) {
list.forEach((data) => {

const label = data[isGroupOption ? groupLabel : fieldLabel];
const label = data[isGroupOption ? fieldLabel : groupLabel];
BoyYangzai marked this conversation as resolved.
Show resolved Hide resolved

if (isGroupOption || !(fieldOptions in data)) {
const value = data[fieldValue];
Expand Down
43 changes: 20 additions & 23 deletions tests/Select.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { fireEvent, render as testingRender } from '@testing-library/react';
import { mount, render } from 'enzyme';
import { fireEvent,render as testingRender } from '@testing-library/react';
import { mount,render } from 'enzyme';
import KeyCode from 'rc-util/lib/KeyCode';
import { spyElementPrototype } from 'rc-util/lib/test/domHook';
import { resetWarned } from 'rc-util/lib/warning';
Expand All @@ -8,7 +8,7 @@ import type { ScrollConfig } from 'rc-virtual-list/lib/List';
import React from 'react';
import { act } from 'react-dom/test-utils';
import type { SelectProps } from '../src';
import Select, { OptGroup, Option, useBaseProps } from '../src';
import Select,{ OptGroup,Option,useBaseProps } from '../src';
import type { BaseSelectRef } from '../src/BaseSelect';
import allowClearTest from './shared/allowClearTest';
import blurTest from './shared/blurTest';
Expand All @@ -17,11 +17,11 @@ import inputFilterTest from './shared/inputFilterTest';
import keyDownTest from './shared/keyDownTest';
import openControlledTest from './shared/openControlledTest';
import {
expectOpen,
findSelection,
injectRunAllTimers,
selectItem,
toggleOpen,
expectOpen,
findSelection,
injectRunAllTimers,
selectItem,
toggleOpen
} from './utils/common';

describe('Select.Basic', () => {
Expand Down Expand Up @@ -107,13 +107,13 @@ describe('Select.Basic', () => {

it('should support fieldName', () => {
// groupLabel > fieldNames > self-label
function genOpts(OptLabelName) {
function genOpts(OptLabelName, groupLabel) {
return [
{
groupLabel: 'Manager',
[groupLabel]: 'groupLabel',
options: [
{
data: 'value',
value: 'value',
[OptLabelName]: 'label',
},
],
Expand All @@ -123,31 +123,28 @@ describe('Select.Basic', () => {

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

提一个意见, 这里的快照测试, 直接 match container 估计有点问题, 建议可以先把 palen select 出来去再去 match.

expect(document.querySelector('.rc-virtual-list')).toMatchSnapshot();

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

目前冲快照信息有点难得到有哪些改动🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done✅


// these generate the same snapshots
expect(containerFirst).toMatchSnapshot();
expect(containerSecond).toMatchSnapshot();
expect(containerThird).toMatchSnapshot();
expect(containerFirst.querySelector('.rc-virtual-list')).toMatchSnapshot();
expect(containerSecond.querySelector('.rc-virtual-list')).toMatchSnapshot();
expect(containerThird.querySelector('.rc-virtual-list')).toMatchSnapshot();
});
});

Expand Down
228 changes: 114 additions & 114 deletions tests/__snapshots__/Select.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -434,142 +434,142 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
`;

exports[`Select.Basic render should support fieldName 1`] = `
<div>
<div
class="rc-virtual-list"
style="position: relative;"
>
<div
class="rc-select rc-select-single rc-select-show-arrow"
class="rc-virtual-list-holder"
style="max-height: 200px; overflow-y: auto;"
>
<div
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<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
class="rc-select-item rc-select-item-group"
title="groupLabel"
>
groupLabel
</div>
<div
aria-selected="false"
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
title="label"
>
<div
class="rc-select-item-option-content"
>
label
</div>
<span
aria-hidden="true"
class="rc-select-item-option-state"
style="user-select: none;"
unselectable="on"
>
<span
class="rc-select-item-option-state-icon"
/>
</span>
</div>
</div>
</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-virtual-list"
style="position: relative;"
>
<div
class="rc-select rc-select-single rc-select-show-arrow"
class="rc-virtual-list-holder"
style="max-height: 200px; overflow-y: auto;"
>
<div
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<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
class="rc-select-item rc-select-item-group"
title="groupLabel"
>
groupLabel
</div>
<div
aria-selected="false"
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
title="label"
>
<div
class="rc-select-item-option-content"
>
label
</div>
<span
aria-hidden="true"
class="rc-select-item-option-state"
style="user-select: none;"
unselectable="on"
>
<span
class="rc-select-item-option-state-icon"
/>
</span>
</div>
</div>
</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-virtual-list"
style="position: relative;"
>
<div
class="rc-select rc-select-single rc-select-show-arrow"
class="rc-virtual-list-holder"
style="max-height: 200px; overflow-y: auto;"
>
<div
class="rc-select-selector"
>
<span
class="rc-select-selection-search"
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<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
class="rc-select-item rc-select-item-group"
title="groupLabel"
>
groupLabel
</div>
<div
aria-selected="false"
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active"
title="label"
>
<div
class="rc-select-item-option-content"
>
label
</div>
<span
aria-hidden="true"
class="rc-select-item-option-state"
style="user-select: none;"
unselectable="on"
>
<span
class="rc-select-item-option-state-icon"
/>
</span>
</div>
</div>
</div>
<span
aria-hidden="true"
class="rc-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
class="rc-select-arrow-icon"
/>
</span>
</div>
</div>
`;
Expand Down