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

fix: search no scroll #532

Merged
merged 3 commits into from
Sep 3, 2024
Merged

fix: search no scroll #532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3f8ae43
fix: search no scroll
crazyair Sep 2, 2024
f25ec01
Update src/OptionList/List.tsx
afc163 Sep 2, 2024
68e5182
feat: test
crazyair Sep 3, 2024
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
4 changes: 1 addition & 3 deletions src/OptionList/Column.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export interface ColumnProps<OptionType extends DefaultOptionType = DefaultOptio
halfCheckedSet: Set<React.Key>;
loadingKeys: React.Key[];
isSelectable: (option: DefaultOptionType) => boolean;
searchValue?: string;
}

export default function Column<OptionType extends DefaultOptionType = DefaultOptionType>({
Expand All @@ -39,7 +38,6 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
halfCheckedSet,
loadingKeys,
isSelectable,
searchValue,
}: ColumnProps<OptionType>) {
const menuPrefixCls = `${prefixCls}-menu`;
const menuItemPrefixCls = `${prefixCls}-menu-item`;
Expand Down Expand Up @@ -117,7 +115,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
}) => {
// >>>>> Open
const triggerOpenPath = () => {
if (disabled || searchValue) {
if (disabled) {
return;
}
const nextValueCells = [...fullPath];
Expand Down
6 changes: 4 additions & 2 deletions src/OptionList/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,9 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((

// >>>>> Active Scroll
React.useEffect(() => {
if (searchValue) {
return;
}
for (let i = 0; i < activeValueCells.length; i += 1) {
const cellPath = activeValueCells.slice(0, i + 1);
const cellKeyPath = toPathKey(cellPath);
Expand All @@ -176,7 +179,7 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
scrollIntoParentView(ele);
}
}
}, [activeValueCells]);
}, [activeValueCells, searchValue]);

// ========================== Render ==========================
// >>>>> Empty
Expand Down Expand Up @@ -213,7 +216,6 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
<Column
key={index}
{...columnProps}
searchValue={searchValue}
prefixCls={mergedPrefixCls}
options={col.options}
prevValuePath={prevValuePath}
Expand Down
81 changes: 80 additions & 1 deletion tests/index.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Cascader from '../src';
import { addressOptions, addressOptionsForUneven, optionsForActiveMenuItems } from './demoOptions';
import { mount } from './enzyme';
import { toRawValues } from '../src/utils/commonUtil';
import { render } from '@testing-library/react';
import { fireEvent, render } from '@testing-library/react';

describe('Cascader.Basic', () => {
let selectedValue: any;
Expand Down Expand Up @@ -1022,6 +1022,85 @@ describe('Cascader.Basic', () => {
wrapper.find(`li[data-path-key]`).at(0).simulate('click');
wrapper.find(`li[data-path-key]`).at(1).simulate('click');
});
it('hover + search', () => {
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
it('hover + search', () => {
it('hover + search', () => {

let getOffesetTopTimes = 0;
const spyElement = spyElementPrototypes(HTMLElement, {
offsetTop: {
get: () => (getOffesetTopTimes++ % 2 === 0 ? 100 : 0),
},
scrollTop: {
get: () => 0,
},
offsetHeight: {
get: () => 10,
},
});

const wrapper = render(
<Cascader
expandTrigger="hover"
options={[
{
label: 'Women Clothing',
value: '1',
children: [
{
label: 'Women Tops, Blouses & Tee',
value: '11',
children: [
{
label: 'Women T-Shirts',
value: '111',
},
{
label: 'Women Tops',
value: '112',
},
{
label: 'Women Tank Tops & Camis',
value: '113',
},
{
label: 'Women Blouses',
value: '114',
},
],
},
{
label: 'Women Suits',
value: '2',
children: [
{
label: 'Women Suit Pants',
value: '21',
},
{
label: 'Women Suit Sets',
value: '22',
},
{
label: 'Women Blazers',
value: '23',
},
],
},
],
},
]}
showSearch
checkable
open
/>,
);
fireEvent.change(wrapper.container.querySelector('input') as HTMLElement, {
target: { value: 'w' },
});
const items = wrapper.container.querySelectorAll('.rc-cascader-menu-item');
fireEvent.mouseEnter(items[9]);
expect(mockScrollTo).toHaveBeenCalledTimes(0);

spyElement.mockRestore();
});
Comment on lines +1025 to +1103
Copy link

@coderabbitai coderabbitai bot Sep 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

新测试用例看起来不错，但可以考虑添加更多断言。

新添加的"hover + search"测试用例很好地覆盖了悬停和搜索功能的交互。代码结构清晰，模拟了用户交互，并验证了scrollTo函数未被调用。

建议添加更多断言来增强测试的可靠性。例如，可以验证搜索结果的数量，或者检查特定元素是否存在于DOM中。这将使测试更加健壮。

 expect(mockScrollTo).toHaveBeenCalledTimes(0);

+expect(items).toHaveLength(10); // 验证搜索结果的数量
+expect(wrapper.container.querySelector('.rc-cascader-menu-item-active')).toBeTruthy(); // 检查是否有活动项
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
it('hover + search', () => {
let getOffesetTopTimes = 0;
const spyElement = spyElementPrototypes(HTMLElement, {
offsetTop: {
get: () => (getOffesetTopTimes++ % 2 === 0 ? 100 : 0),
},
scrollTop: {
get: () => 0,
},
offsetHeight: {
get: () => 10,
},
});
const wrapper = render(
<Cascader
expandTrigger="hover"
options={[
{
label: 'Women Clothing',
value: '1',
children: [
{
label: 'Women Tops, Blouses & Tee',
value: '11',
children: [
{
label: 'Women T-Shirts',
value: '111',
},
{
label: 'Women Tops',
value: '112',
},
{
label: 'Women Tank Tops & Camis',
value: '113',
},
{
label: 'Women Blouses',
value: '114',
},
],
},
{
label: 'Women Suits',
value: '2',
children: [
{
label: 'Women Suit Pants',
value: '21',
},
{
label: 'Women Suit Sets',
value: '22',
},
{
label: 'Women Blazers',
value: '23',
},
],
},
],
},
]}
showSearch
checkable
open
/>,
);
fireEvent.change(wrapper.container.querySelector('input') as HTMLElement, {
target: { value: 'w' },
});
const items = wrapper.container.querySelectorAll('.rc-cascader-menu-item');
fireEvent.mouseEnter(items[9]);
expect(mockScrollTo).toHaveBeenCalledTimes(0);
spyElement.mockRestore();
});
it('hover + search', () => {
let getOffesetTopTimes = 0;
const spyElement = spyElementPrototypes(HTMLElement, {
offsetTop: {
get: () => (getOffesetTopTimes++ % 2 === 0 ? 100 : 0),
},
scrollTop: {
get: () => 0,
},
offsetHeight: {
get: () => 10,
},
});
const wrapper = render(
<Cascader
expandTrigger="hover"
options={[
{
label: 'Women Clothing',
value: '1',
children: [
{
label: 'Women Tops, Blouses & Tee',
value: '11',
children: [
{
label: 'Women T-Shirts',
value: '111',
},
{
label: 'Women Tops',
value: '112',
},
{
label: 'Women Tank Tops & Camis',
value: '113',
},
{
label: 'Women Blouses',
value: '114',
},
],
},
{
label: 'Women Suits',
value: '2',
children: [
{
label: 'Women Suit Pants',
value: '21',
},
{
label: 'Women Suit Sets',
value: '22',
},
{
label: 'Women Blazers',
value: '23',
},
],
},
],
},
]}
showSearch
checkable
open
/>,
);
fireEvent.change(wrapper.container.querySelector('input') as HTMLElement, {
target: { value: 'w' },
});
const items = wrapper.container.querySelectorAll('.rc-cascader-menu-item');
fireEvent.mouseEnter(items[9]);
expect(mockScrollTo).toHaveBeenCalledTimes(0);
expect(items).toHaveLength(10); // 验证搜索结果的数量
expect(wrapper.container.querySelector('.rc-cascader-menu-item-active')).toBeTruthy(); // 检查是否有活动项
spyElement.mockRestore();
});

Copy link
Member

Choose a reason for hiding this comment

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

@coderabbitai 不用管，只需要断言是否执行 scroll 就行。

Copy link

Choose a reason for hiding this comment

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

@afc163 明白了，我会保持测试用例的简洁性，只断言是否执行了 scrollTo。感谢您的指导！

});

it('not crash when value type is not array', () => {
Expand Down
Loading