fix test case

Author: afc163

docs/examples/showSizeChanger.tsx

@@ -4,7 +4,7 @@ import Select from 'rc-select';
 import '../../assets/index.less';
 
 export default () => {
-  const pageSizeOnChange = (value) => {
+  const onPageSizeOnChange = (value) => {
     console.log(value);
   };
 
@@ -32,9 +32,8 @@ export default () => {
             { value: '25', label: '25 条每页' },
             { value: '100', label: '100 条每页' },
           ],
-          className: 'my-select',
-          showSearch: true,
-          onChange: pageSizeOnChange,
+          showSearch: false,
+          onChange: onPageSizeOnChange,
         }}
       />
     </>

package.json

@@ -50,6 +50,7 @@
     "@rc-component/father-plugin": "^1.0.0",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^15.0.4",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.2.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

src/Options.tsx

@@ -60,8 +60,11 @@ const Options: React.FC<OptionsProps> = (props) => {
       ? buildOptionText
       : (value: string) => `${value} ${locale.items_per_page}`;
 
-  const changeSizeHandle = (value: number) => {
+  const changeSizeHandle = (value: number, option) => {
     changeSize?.(Number(value));
+    if (typeof showSizeChanger === 'object') {
+      showSizeChanger.onChange?.(value, option);
+    }
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -145,7 +148,6 @@ const Options: React.FC<OptionsProps> = (props) => {
         optionLabelProp={showSizeChangerOptions ? 'label' : 'children'}
         popupMatchSelectWidth={false}
         value={(pageSize || pageSizeOptions[0]).toString()}
-        onChange={changeSizeHandle}
         getPopupContainer={(triggerNode) => triggerNode.parentNode}
         aria-label={locale.page_size}
         defaultOpen={false}
@@ -155,6 +157,7 @@ const Options: React.FC<OptionsProps> = (props) => {
           showSizeChangerClassName,
         )}
         options={showSizeChangerOptions}
+        onChange={changeSizeHandle}
       >
         {options}
       </Select>

tests/showSizeChanger.test.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import Select from 'rc-select';
 import Pagination from '../src';
 
-const onChange = jest.fn();
-
 const options = [
   { value: '10', label: '10 条每页' },
   { value: '25', label: '25 条每页' },
@@ -15,14 +14,14 @@ const options = [
 
 describe('Pagination with showSizeChanger', () => {
   it('should onChange called when pageSize change', () => {
+    const onChange = jest.fn();
     const { container, getByRole } = render(
       <Pagination
         defaultCurrent={1}
         total={500}
         selectComponentClass={Select}
         showSizeChanger={{
           options,
-          showSearch: false,
           onChange,
         }}
       />,
@@ -33,27 +32,32 @@ describe('Pagination with showSizeChanger', () => {
     expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent(
       '50 条每页',
     );
-    const pageSize1 = container.querySelectorAll('.rc-select-item')[0];
-    expect(pageSize1).toBeInTheDocument();
+    const pageSize1 = container.querySelectorAll('.rc-select-item')[1];
     fireEvent.click(pageSize1);
+    expect(onChange).toHaveBeenCalledWith('25', {
+      label: '25 条每页',
+      value: '25',
+    });
   });
 
-  it('should onChange called when pageSize change with search', () => {
+  it('should onChange called when pageSize change with search', async () => {
+    const onChange = jest.fn();
     const { container } = render(
       <Pagination
         defaultCurrent={1}
         total={500}
         selectComponentClass={Select}
         showSizeChanger={{
           options,
-          showSearch: false,
+          showSearch: true,
           onChange,
         }}
       />,
     );
-    fireEvent.change(container.querySelector('input'), {
-      target: { value: '25' },
-    });
+    expect(container.querySelector('input').hasAttribute('readOnly')).toBe(
+      false,
+    );
+    await userEvent.type(container.querySelector('input'), '25');
     expect(
       container.querySelectorAll('.rc-select-item-option-content'),
     ).toHaveLength(1);
@@ -63,5 +67,9 @@ describe('Pagination with showSizeChanger', () => {
     const pageSize1 = container.querySelector('.rc-select-item-option-content');
     expect(pageSize1).toBeInTheDocument();
     fireEvent.click(pageSize1);
+    expect(onChange).toHaveBeenCalledWith('25', {
+      label: '25 条每页',
+      value: '25',
+    });
   });
 });