feat: showSizeChanger accept SelectProps #597
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Waiting for the code review of this pull request. This pull request depends on fixing the Ant Design pagination issue |
|
@afc163 Code review changes have been addressed. Please review these changes. |
… showSearch, size options, and onChange together.
afc163
force-pushed
the
feature/development/pageSizeChanger-option-for-pagination
branch
from
4194f22 to
af3e072
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range and nitpick comments (5)
tests/options.test.tsx (1)
15-16: 添加showSizeChanger属性是个好的改进这个改动符合 PR 的目标，将分页大小选择器的属性进行分组。
为了更好的可读性和明确性，建议显式设置属性值：
- showSizeChanger + showSizeChanger={true}这样可以让代码的意图更加清晰，特别是对于不熟悉 JSX 语法的开发者来说。
package.json (1)
53-53: 新增的测试依赖项将提升测试质量添加
@testing-library/user-event依赖项是一个很好的决定。这个库能够模拟用户交互，有助于编写更真实和全面的测试用例，特别是对于分页组件这样的交互性组件。考虑在项目的测试文件中充分利用这个新的依赖项，特别是在测试分页大小选择器的交互时。这将有助于确保新功能的可靠性和用户体验的一致性。
tests/sizer.test.tsx (3)
87-94: 测试结构组织得很好新增的 describe 块很好地组织了与 showSizeChanger 相关的测试。options 数组的定义也很全面。
建议：考虑将 options 数组定义为常量，并移到 describe 块外部。这样可以提高其重用性，并使测试更加清晰。
const PAGE_SIZE_OPTIONS = [ { value: '10', label: '10 条每页' }, { value: '25', label: '25 条每页' }, { value: '50', label: '50 条每页' }, { value: '75', label: '75 条每页' }, { value: '100', label: '100 条每页' }, ]; describe('Pagination with showSizeChanger', () => { // 使用 PAGE_SIZE_OPTIONS });
95-120: 页面大小更改测试案例设计合理这个测试案例很好地覆盖了更改页面大小的基本功能。它正确地模拟了用户交互并验证了 onChange 回调的调用及其参数。
建议：考虑添加一个额外的断言，以确保选择新的页面大小后，分页组件的状态也相应更新。例如：
expect(container.querySelector('.rc-select-selection-item')).toHaveTextContent('25 条每页');这将确保 UI 也正确反映了更改。
122-155: 搜索功能测试案例设计全面这个测试案例很好地覆盖了通过搜索更改页面大小的功能。使用 userEvent 模拟输入是一个很好的做法，能更真实地模拟用户行为。测试全面检查了 UI 更新和 onChange 回调。
建议：考虑添加一个测试场景，验证当用户输入一个不存在的页面大小时的行为。例如：
await userEvent.type(container.querySelector('input'), '999'); expect(container.querySelectorAll('.rc-select-item-option-content')).toHaveLength(0);这将确保组件在无效输入时的行为符合预期。
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
tests/__snapshots__/demo.test.tsx.snapis excluded by!**/*.snap
Files selected for processing (7)
- README.md (1 hunks)
- docs/examples/showSizeChanger.tsx (1 hunks)
- package.json (1 hunks)
- src/Options.tsx (5 hunks)
- src/Pagination.tsx (3 hunks)
- tests/options.test.tsx (2 hunks)
- tests/sizer.test.tsx (2 hunks)
Files skipped from review as they are similar to previous changes (2)
- docs/examples/showSizeChanger.tsx
- src/Options.tsx
Additional context used
LanguageTool
README.md
[grammar] ~66-~66: Comparison requires “than”, not ‘then’ nor ‘as’.
Context: ...ect.tsx#L112) |falsewhen total less thentotalBoundaryShowSizeChanger,true...(COMP_THAN)
GitHub Check: codecov/patch
src/Pagination.tsx
[warning] 193-193: src/Pagination.tsx#L193
Added line #L193 was not covered by tests
Additional comments not posted (7)
README.md (2)
55-57: 代码格式和表格结构改进添加的
prettier-ignore注释有助于保持一致的格式，这是一个很好的做法。表格的标题和对齐方式已经标准化，提高了可读性。
Line range hint
1-84: 整体文档改进README 文件的整体结构和内容有了显著改善。API 文档更加清晰和详细，特别是对于
showSizeChanger等参数的描述。这些更改将有助于开发者更好地理解和使用该分页组件。建议在未来的更新中考虑添加一些使用示例，以进一步提高文档的实用性。
Tools
LanguageTool
[grammar] ~66-~66: Comparison requires “than”, not ‘then’ nor ‘as’.
Context: ...ect.tsx#L112) |falsewhen total less thentotalBoundaryShowSizeChanger,true...(COMP_THAN)
tests/sizer.test.tsx (2)
3-3: 导入 userEvent 是个好主意！引入 userEvent 可以更真实地模拟用户交互，这对于测试分页组件的交互行为非常有用。这是一个很好的改进。
Line range hint
1-156: 总体评价：测试用例质量高，覆盖全面这些新增的测试用例显著提高了对 showSizeChanger 功能的覆盖率。它们不仅测试了直接选择页面大小的情况，还包括了基于搜索选择页面大小的场景，这些都是关键的用户交互。测试结构良好，使用了适当的测试库和方法。
建议：
- 考虑添加对边缘情况的测试，如处理无效输入或异常情况。
- 可以探索使用 test.each 来参数化测试，减少代码重复。
- 确保这些测试与组件的其他功能（如页面切换）集成良好，可能需要添加一些集成测试。
总的来说，这些测试用例为 Pagination 组件的 showSizeChanger 功能提供了强有力的质量保证。
src/Pagination.tsx (3)
66-66: 优化了showSizeChanger属性的默认值设置这个改动通过使用
total和totalBoundaryShowSizeChanger来动态设置showSizeChanger的默认值，提高了组件的灵活性和易用性。这种方法可以根据数据总量自动决定是否显示页面大小选择器，减少了使用者的配置负担。
590-595: 优化了Options组件的属性传递这些改动简化了属性传递逻辑，提高了代码的一致性和可维护性：
changeSize属性现在始终设置为changePageSize函数，消除了之前的条件判断。- 新增了
showSizeChanger属性的传递，使Options组件能够更精确地控制其行为。这些变更使得组件之间的交互更加清晰和可预测。
192-194: 改进了changePageSize函数的逻辑添加的守卫语句提高了函数的效率和逻辑一致性。当
showSizeChanger为 false 时，函数会立即返回，避免不必要的计算。建议为这个新添加的守卫语句添加测试用例，以确保代码覆盖率和功能正确性。可以使用以下命令来查找现有的测试文件：
然后在相应的测试文件中添加新的测试用例，确保当
showSizeChanger为 false 时，changePageSize函数不会执行后续逻辑。Tools
GitHub Check: codecov/patch
[warning] 193-193: src/Pagination.tsx#L193
Added line #L193 was not covered by tests
afc163
changed the title
pageSizeChanger prop on rc-pagination
Ant Design Pagination enhanced feature added in ant-design/ant-design#46757 depends on this PR changes
Summary by CodeRabbit
showSizeChanger参数的详细描述。showSizeChanger功能的演示文档和示例组件，展示了如何在用户界面中实现可调整页面大小的分页。Options组件现在集成了showSizeChanger功能，支持条件显示搜索输入和通知外部组件大小变化。Pagination组件的单元测试，确保其正常工作。