Fix pagination ellipsis item count shift#695
Conversation
|
@QDyanbing is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
总体说明此 PR 对分页组件的导航跳转项渲染逻辑进行重构，将原先内联的条件判断提取为显式的 变更内容分页跳转导航重构与测试
代码审查工作量🎯 3 (中等) | ⏱️ ~20 分钟 变更涉及分页核心逻辑的重构与条件判断的提取，需要理解页码边界调整与跳转项插入的交互关系；同时需要验证测试覆盖是否充分验证了重构后的行为一致性。 建议审查人员
诗文
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/Pagination.tsxESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. tests/index.test.tsxESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #695 +/- ##
==========================================
+ Coverage 99.03% 99.06% +0.02%
==========================================
Files 3 3
Lines 312 320 +8
Branches 140 146 +6
==========================================
+ Hits 309 317 +8
Misses 3 3 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the Pagination component to maintain a consistent pager item count when jump buttons are displayed. It introduces hasJumpPrev and hasJumpNext flags to dynamically adjust the range of visible page numbers when showLessItems is disabled. Additionally, a new test suite has been added to verify that the pager item count remains stable across various active pages, and the snapshot tests have been updated accordingly. I have no feedback to provide.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
tests/index.test.tsx (1)
321-343: 💤 Low value测试用例覆盖了关键边界场景，逻辑正确。
测试用例有效验证了在默认模式下（
showLessItems=false）分页项数量保持为 7 的一致性。currentList涵盖了起始、中间和末尾的关键边界值。可考虑补充
showLessItems={true}场景的测试用例，以验证 PR 描述中提到的"保留其他模式行为"的预期。💡 可选：补充 showLessItems 场景测试
it('should keep pager item count when jumpers appear', () => { currentList.forEach((current) => { const { container, unmount } = render( <Pagination total={1000} current={current} onChange={jest.fn()} showQuickJumper />, ); expect(getPagerItems(container)).toHaveLength(7); unmount(); }); }); + + it('should preserve pager behavior with showLessItems', () => { + const lessItemsCurrentList = [1, 2, 3, 50, 98, 99, 100]; + lessItemsCurrentList.forEach((current) => { + const { container, unmount } = render( + <Pagination + total={1000} + current={current} + onChange={jest.fn()} + showQuickJumper + showLessItems + />, + ); + + expect(getPagerItems(container)).toHaveLength(5); + unmount(); + }); + });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tests/index.test.tsx` around lines 321 - 343, Add a parallel test block for the showLessItems mode: replicate getPagerItems and iterate the same currentList but render <Pagination total={1000} current={current} onChange={jest.fn()} showQuickJumper showLessItems /> and assert the expected pager item count for the "less items" behavior (use the same currentList to cover start/middle/end); reference getPagerItems, Pagination, showQuickJumper, and showLessItems to locate where to change the render and assertions.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@tests/index.test.tsx`:
- Around line 321-343: Add a parallel test block for the showLessItems mode:
replicate getPagerItems and iterate the same currentList but render <Pagination
total={1000} current={current} onChange={jest.fn()} showQuickJumper
showLessItems /> and assert the expected pager item count for the "less items"
behavior (use the same currentList to cover start/middle/end); reference
getPagerItems, Pagination, showQuickJumper, and showLessItems to locate where to
change the render and assertions.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 4a532cfc-66d8-4d7b-874e-cf7208456e87
⛔ Files ignored due to path filters (2)
tests/__snapshots__/demo.test.tsx.snapis excluded by!**/*.snaptests/__snapshots__/index.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (2)
src/Pagination.tsxtests/index.test.tsx
2 participants
变更内容
showLessItems等其它模式的原有行为，避免扩大改动范围。背景原因
关联 ant-design/ant-design#58270。原逻辑会先渲染页码范围，再在需要时额外插入 jump-prev / jump-next，因此省略号出现后整体 item 数量会变多，带有 quick jumper 等右侧控件时会产生位置抖动。
验证
npm run lintnpx tsc --noEmitnpm test -- --runInBandSummary by CodeRabbit
Bug Fixes
Tests