diff --git a/assets/index.less b/assets/index.less index 64ceac6d..7e63ee71 100644 --- a/assets/index.less +++ b/assets/index.less @@ -71,10 +71,17 @@ cursor: pointer; user-select: none; - a { + a, + button { display: block; + width: 100%; + height: 100%; padding: 0 6px; color: rgba(0, 0, 0, 0.85); + background: transparent; + border: 0; + cursor: pointer; + outline: none; transition: none; &:hover { @@ -83,10 +90,12 @@ } &:focus, + &:focus-within, &:hover { border-color: @primary-color; transition: all 0.3s; - a { + a, + button { color: @primary-color; } } @@ -96,17 +105,23 @@ background: @pagination-item-bg-active; border-color: @primary-color; - a { + a, + button { color: @primary-color; } &:focus, + &:focus-within, &:hover { border-color: #40a9ff; } &:focus a, - &:hover a { + &:hover a, + &:focus-within a, + &:focus button, + &:hover button, + &:focus-within button { color: #40a9ff; } } @@ -115,18 +130,6 @@ &-jump-prev, &-jump-next { outline: 0; - - button { - background: transparent; - border: none; - cursor: pointer; - color: #666; - } - - button:after { - display: block; - content: '•••'; - } } &-prev, @@ -153,20 +156,14 @@ } &-prev, - &-next { + &-next, + &-jump-prev, + &-jump-next { outline: 0; - button { - color: rgba(0, 0, 0, 0.85); - cursor: pointer; - user-select: none; - } - - &:hover button { - border-color: #40a9ff; - } - - .@{pagination-prefix-cls}-item-link { + button, + .@{pagination-prefix-cls}-item-link, + .@{pagination-prefix-cls}-item-button { display: block; width: 100%; height: 100%; @@ -176,32 +173,45 @@ border: 1px solid #d9d9d9; border-radius: 2px; outline: none; + cursor: pointer; + user-select: none; transition: all 0.3s; } + button:focus, &:focus .@{pagination-prefix-cls}-item-link, - &:hover .@{pagination-prefix-cls}-item-link { + &:focus .@{pagination-prefix-cls}-item-button, + &:hover .@{pagination-prefix-cls}-item-link, + &:hover .@{pagination-prefix-cls}-item-button, + &:hover button { color: @primary-color; border-color: @primary-color; } } - &-prev button:after { + &-prev .@{pagination-prefix-cls}-item-link::after { content: '‹'; display: block; } - &-next button:after { + &-next .@{pagination-prefix-cls}-item-link::after { content: '›'; display: block; } + &-jump-prev .@{pagination-prefix-cls}-item-link::after, + &-jump-next .@{pagination-prefix-cls}-item-link::after { + display: block; + content: '•••'; + } + &-disabled { &, &:hover, &:focus { cursor: not-allowed; - .@{pagination-prefix-cls}-item-link { + .@{pagination-prefix-cls}-item-link, + .@{pagination-prefix-cls}-item-button { color: fade(#000, 25%); border-color: #d9d9d9; cursor: not-allowed; @@ -250,7 +260,8 @@ height: @pagination-item-size-sm; line-height: @pagination-item-size-sm; vertical-align: top; - .@{pagination-prefix-cls}-item-link { + .@{pagination-prefix-cls}-item-link, + .@{pagination-prefix-cls}-item-button { height: @pagination-item-size-sm; background-color: transparent; border: 0; @@ -293,7 +304,8 @@ border-color: #d9d9d9; cursor: not-allowed; - a { + a, + button { color: fade(#000, 25%); background: transparent; border: none; @@ -303,13 +315,15 @@ &-active { background: @pagination-item-disabled-bg-active; border-color: transparent; - a { + a, + button { color: @pagination-item-disabled-color-active; } } } - .@{pagination-prefix-cls}-item-link { + .@{pagination-prefix-cls}-item-link, + .@{pagination-prefix-cls}-item-button { color: fade(#000, 25%); background: hsv(0, 0, 96%); border-color: #d9d9d9; diff --git a/src/Pager.tsx b/src/Pager.tsx index 5a512afd..cb48e8c7 100644 --- a/src/Pager.tsx +++ b/src/Pager.tsx @@ -3,10 +3,14 @@ import { clsx } from 'clsx'; import React from 'react'; import type { PaginationProps } from './interface'; -export interface PagerProps extends Pick { +export interface PagerProps extends Pick< + PaginationProps, + 'disabled' | 'itemRender' +> { rootPrefixCls: string; page: number; pageLabel?: string; + defaultItemRender?: boolean; active?: boolean; className?: string; style?: React.CSSProperties; @@ -24,6 +28,8 @@ const Pager: React.FC = (props) => { rootPrefixCls, page, pageLabel, + disabled, + defaultItemRender, active, className, style, @@ -52,24 +58,36 @@ const Pager: React.FC = (props) => { onKeyPress(e, onClick, page); }; - const pager = itemRender( - page, - 'page', - , - ); - const pagerLabel = `${pageLabel} ${page}`.trim(); + const pagerLabel = pageLabel ? `${pageLabel} ${page}` : String(page); + const itemTitle = showTitle ? String(page) : undefined; + + if (defaultItemRender) { + return ( +
  • + +
    • + ); + } + + const pager = itemRender(page, 'page', {page}); return pager ? (
  • diff --git a/src/Pagination.tsx b/src/Pagination.tsx index ac1c4b26..386567ca 100644 --- a/src/Pagination.tsx +++ b/src/Pagination.tsx @@ -114,25 +114,61 @@ const Pagination: React.FC = (props) => { calculatePage(undefined, pageSize, total), current + (showLessItems ? 3 : 5), ); + const isDefaultRender = itemRender === defaultItemRender; - function getItemIcon( + function getIconNode( icon: React.ReactNode | React.ComponentType, - _label: string, + ) { + let iconNode = icon; + if (typeof icon === 'function') { + iconNode = React.createElement(icon, props); + } + return iconNode as React.ReactNode; + } + + function getItemIcon(title?: string) { + return ; + } + + function getControlButtonContent( + icon: React.ReactNode | React.ComponentType, + ) { + const iconNode = getIconNode(icon); + + if ( + React.isValidElement<{ children?: React.ReactNode }>(iconNode) && + typeof iconNode.type === 'string' && + (iconNode.type === 'button' || iconNode.type === 'a') + ) { + return iconNode.props.children; + } + + return iconNode; + } + + function renderDefaultControlButton( + icon: React.ReactNode | React.ComponentType, + label?: string, title?: string, + onClick?: React.MouseEventHandler, + buttonDisabled?: boolean, ) { - let iconNode = icon || ( + const iconContent = getControlButtonContent(icon); + + return ( ); - if (typeof icon === 'function') { - iconNode = React.createElement(icon, props); - } - return iconNode as React.ReactNode; } function getValidValue(e: any): number { @@ -283,33 +319,43 @@ const Pagination: React.FC = (props) => { function renderPrev(prevPage: number) { const prevPageTitle = locale.prev_page || 'prev page'; - const prevButton = itemRender( - prevPage, - 'prev', - getItemIcon( - prevIcon, - prevPageTitle, - showTitle ? prevPageTitle : undefined, - ), - ); + const prevButton = isDefaultRender + ? renderDefaultControlButton( + prevIcon, + prevPageTitle, + showTitle ? prevPageTitle : undefined, + prevHandle, + !hasPrev, + ) + : itemRender( + prevPage, + 'prev', + getIconNode(prevIcon) || + getItemIcon(showTitle ? prevPageTitle : undefined), + ); return React.isValidElement(prevButton) - ? React.cloneElement(prevButton, { disabled: !hasPrev }) + ? React.cloneElement(prevButton, { disabled: disabled || !hasPrev }) : prevButton; } function renderNext(nextPage: number) { const nextPageTitle = locale.next_page || 'next page'; - const nextButton = itemRender( - nextPage, - 'next', - getItemIcon( - nextIcon, - nextPageTitle, - showTitle ? nextPageTitle : undefined, - ), - ); + const nextButton = isDefaultRender + ? renderDefaultControlButton( + nextIcon, + nextPageTitle, + showTitle ? nextPageTitle : undefined, + nextHandle, + !hasNext, + ) + : itemRender( + nextPage, + 'next', + getIconNode(nextIcon) || + getItemIcon(showTitle ? nextPageTitle : undefined), + ); return React.isValidElement(nextButton) - ? React.cloneElement(nextButton, { disabled: !hasNext }) + ? React.cloneElement(nextButton, { disabled: disabled || !hasNext }) : nextButton; } @@ -349,11 +395,13 @@ const Pagination: React.FC = (props) => { const pagerProps: PagerProps = { rootPrefixCls: prefixCls, + defaultItemRender: isDefaultRender, onClick: handleChange, onKeyPress: runIfEnterOrSpace, showTitle, itemRender, pageLabel: locale.page, + disabled, page: -1, className: paginationClassNames?.item, style: styles?.item, @@ -452,54 +500,82 @@ const Pagination: React.FC = (props) => { const jumpPrevContent = itemRender( jumpPrevPage, 'jump-prev', - getItemIcon( - jumpPrevIcon, - prevItemTitle, - showTitle ? prevItemTitle : undefined, - ), + getIconNode(jumpPrevIcon) || + getItemIcon(showTitle ? prevItemTitle : undefined), ); const jumpNextContent = itemRender( jumpNextPage, 'jump-next', - getItemIcon( - jumpNextIcon, - nextItemTitle, - showTitle ? nextItemTitle : undefined, - ), + getIconNode(jumpNextIcon) || + getItemIcon(showTitle ? nextItemTitle : undefined), ); if (showPrevNextJumpers) { - jumpPrev = jumpPrevContent ? ( -
  • - {jumpPrevContent} -
    • - ) : null; + if (isDefaultRender) { + jumpPrev = ( +
  • + {renderDefaultControlButton( + jumpPrevIcon, + prevItemTitle, + showTitle ? prevItemTitle : undefined, + jumpPrevHandle, + )} +
    • + ); - jumpNext = jumpNextContent ? ( -
  • - {jumpNextContent} -
    • - ) : null; + jumpNext = ( +
  • + {renderDefaultControlButton( + jumpNextIcon, + nextItemTitle, + showTitle ? nextItemTitle : undefined, + jumpNextHandle, + )} +
    • + ); + } else { + jumpPrev = jumpPrevContent ? ( +
  • + {jumpPrevContent} +
    • + ) : null; + + jumpNext = jumpNextContent ? ( +
  • + {jumpNextContent} +
    • + ) : null; + } } let left = Math.max(1, current - pageBufferSize); @@ -568,16 +644,18 @@ const Pagination: React.FC = (props) => { const prevDisabled = !hasPrev || !allPages; prev = (
  • {prev}
    • @@ -586,28 +664,30 @@ const Pagination: React.FC = (props) => { let next = renderNext(nextPage); if (next) { - let nextDisabled: boolean, nextTabIndex: number | null; + let nextDisabled: boolean, nextTabIndex: number | undefined; if (simple) { nextDisabled = !hasNext; - nextTabIndex = hasPrev ? 0 : null; + nextTabIndex = hasPrev ? 0 : undefined; } else { nextDisabled = !hasNext || !allPages; - nextTabIndex = nextDisabled ? null : 0; + nextTabIndex = nextDisabled ? undefined : 0; } next = (
  • {next}
    • diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap index 2b1ffd7e..8985bf8c 100644 --- a/tests/__snapshots__/demo.test.tsx.snap +++ b/tests/__snapshots__/demo.test.tsx.snap @@ -1,4 +1,4 @@ -// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing +// Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Example align 1`] = `
    @@ -7,45 +7,36 @@ exports[`Example align 1`] = ` >
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • @@ -1450,7 +1113,6 @@ exports[`Example itemRender 1`] = `
  • @@ -1463,7 +1125,6 @@ exports[`Example itemRender 1`] = `
  • @@ -1476,7 +1137,6 @@ exports[`Example itemRender 1`] = `
  • @@ -1489,7 +1149,6 @@ exports[`Example itemRender 1`] = `
  • @@ -1502,21 +1161,17 @@ exports[`Example itemRender 1`] = `
  • -
  • @@ -1530,15 +1185,12 @@ exports[`Example itemRender 1`] = ` aria-disabled="false" aria-label="下一页" class="rc-pagination-next" - role="button" tabindex="0" + title="下一页" > -
  • Prev
    • @@ -1560,14 +1212,11 @@ exports[`Example itemRender 1`] = ` aria-current="page" aria-label="页 1" class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-active" - role="button" tabindex="0" title="1" > @@ -1575,14 +1224,11 @@ exports[`Example itemRender 1`] = `
  • @@ -1590,14 +1236,11 @@ exports[`Example itemRender 1`] = `
  • @@ -1605,14 +1248,11 @@ exports[`Example itemRender 1`] = `
  • @@ -1620,14 +1260,11 @@ exports[`Example itemRender 1`] = `
  • @@ -1635,28 +1272,22 @@ exports[`Example itemRender 1`] = `
  • -
  • @@ -1665,8 +1296,8 @@ exports[`Example itemRender 1`] = ` aria-disabled="false" aria-label="下一页" class="rc-pagination-next" - role="button" tabindex="0" + title="下一页" > Next
    • @@ -1681,7 +1312,7 @@ exports[`Example itemRender 1`] = ` aria-disabled="true" aria-label="上一页" class="rc-pagination-prev rc-pagination-disabled" - role="button" + title="上一页" >
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - - - - - - + + + + + +
  • - +
  • - - - - - + + + + +
  • - - - - - + + + + +
  • - +
  • - +
  • - +
  • - - - - - - + + + + + +
  • - +
  • - - - - - + + + + +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • -
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
    • @@ -3845,99 +3131,72 @@ exports[`Example showTitle 1`] = ` >
  • - +
  • - +
  • - +
  • - +
    • @@ -3961,135 +3220,100 @@ exports[`Example showTotal 1`] = `
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • - +
  • + } + nextIcon={ + + } + jumpPrevIcon={ + // biome-ignore lint/a11y/useValidAnchor: test fallback output + + jumpPrevIcon + + } + jumpNextIcon={ + // biome-ignore lint/a11y/useValidAnchor: test fallback output + + jumpNextIcon + + } + />, + ); + + expect( + container.querySelectorAll('.rc-pagination-prev button'), + ).toHaveLength(1); + expect( + container.querySelectorAll('.rc-pagination-next button'), + ).toHaveLength(1); + expect( + container.querySelectorAll('.rc-pagination-jump-prev button'), + ).toHaveLength(1); + expect( + container.querySelectorAll('.rc-pagination-jump-next button'), + ).toHaveLength(1); + expect(container.querySelector('.rc-pagination-prev')).toHaveTextContent( + 'prevIcon', + ); + expect(container.querySelector('.rc-pagination-next')).toHaveTextContent( + 'nextIcon', + ); + expect( + container.querySelector('.rc-pagination-jump-prev'), + ).toHaveTextContent('jumpPrevIcon'); + expect( + container.querySelector('.rc-pagination-jump-next'), + ).toHaveTextContent('jumpNextIcon'); + }); + describe('showPrevNextJumpers props', () => { it('should hide jump-prev, jump-next if showPrevNextJumpers equals false', () => { const { container } = render( @@ -429,6 +501,15 @@ describe('Other props', () => { expect( container.querySelector('.rc-pagination-options-quick-jumper-button'), ).toBeDisabled(); + expect( + container.querySelector('.rc-pagination-prev button'), + ).toBeDisabled(); + expect( + container.querySelector('.rc-pagination-next button'), + ).toBeDisabled(); + expect( + container.querySelector('.rc-pagination-item button'), + ).toBeDisabled(); }); }); @@ -610,8 +691,10 @@ describe('should emit onChange when total is string', () => { }); it('onChange should be called when click page', () => { - const pagers = wrapper.container.querySelectorAll('.rc-pagination-item-3'); - fireEvent.click(pagers[0]); + const page3Button = wrapper.container.querySelector( + '.rc-pagination-item-3 button', + ); + fireEvent.click(page3Button); expect(onChange).toHaveBeenCalledWith(3, 10); }); }); @@ -619,7 +702,8 @@ describe('should emit onChange when total is string', () => { describe('keyboard support', () => { let wrapper: RenderResult; const onChange = jest.fn(); - const $ = (selector: string) => wrapper.container.querySelector(selector); + const $button = (selector: string) => + wrapper.container.querySelector(selector)!; beforeEach(() => { wrapper = render( @@ -632,35 +716,36 @@ describe('keyboard support', () => { onChange.mockReset(); }); - it('should work for prev page', () => { - const prevButton = $('li.rc-pagination-prev'); - expect(prevButton).toBeTruthy(); + it('should work for prev page', async () => { + const user = userEvent.setup(); + const prevButton = $button('li.rc-pagination-prev button'); fireEvent.click(prevButton); fireEvent.click(prevButton); - fireEvent.keyDown(prevButton, { key: 'Enter', keyCode: 13, which: 13 }); - fireEvent.keyDown(prevButton, { key: 'Enter', keyCode: 13, which: 13 }); + prevButton.focus(); + await user.keyboard('{Enter}{Enter}'); expect(onChange).toHaveBeenLastCalledWith(46, 10); }); - it('should work for prev page with space key', () => { - const prevButton = $('li.rc-pagination-prev'); - expect(prevButton).toBeTruthy(); + it('should work for prev page with space key', async () => { + const user = userEvent.setup(); + const prevButton = $button('li.rc-pagination-prev button'); - fireEvent.keyDown(prevButton, { key: ' ', keyCode: 32, which: 32 }); - fireEvent.keyDown(prevButton, { key: 'Spacebar', keyCode: 32, which: 32 }); + prevButton.focus(); + await user.keyboard(' '); + await user.keyboard(' '); expect(onChange).toHaveBeenLastCalledWith(48, 10); }); - it('should work for next page', () => { - const nextButton = $('li.rc-pagination-next'); - expect(nextButton).toBeTruthy(); + it('should work for next page', async () => { + const user = userEvent.setup(); + const nextButton = $button('li.rc-pagination-next button'); - fireEvent.keyDown(nextButton, { key: 'Enter', keyCode: 13, which: 13 }); - fireEvent.keyDown(nextButton, { key: 'Enter', keyCode: 13, which: 13 }); + nextButton.focus(); + await user.keyboard('{Enter}{Enter}'); fireEvent.click(nextButton); fireEvent.click(nextButton); @@ -668,69 +753,67 @@ describe('keyboard support', () => { expect(onChange).toHaveBeenLastCalledWith(54, 10); }); - it('should work for next page with space key', () => { - const nextButton = $('li.rc-pagination-next'); - expect(nextButton).toBeTruthy(); + it('should work for next page with space key', async () => { + const user = userEvent.setup(); + const nextButton = $button('li.rc-pagination-next button'); - fireEvent.keyDown(nextButton, { key: ' ', keyCode: 32, which: 32 }); - fireEvent.keyDown(nextButton, { key: 'Spacebar', keyCode: 32, which: 32 }); + nextButton.focus(); + await user.keyboard(' '); + await user.keyboard(' '); expect(onChange).toHaveBeenLastCalledWith(52, 10); }); - it('should work for next page with enter keyCode only', () => { - const nextButton = $('li.rc-pagination-next'); - expect(nextButton).toBeTruthy(); + it('should work for next page with enter keyCode only', async () => { + const user = userEvent.setup(); + const nextButton = $button('li.rc-pagination-next button'); - fireEvent.keyDown(nextButton, { keyCode: 13, which: 13 }); + nextButton.focus(); + await user.keyboard('{Enter}'); expect(onChange).toHaveBeenLastCalledWith(51, 10); }); - it('should work for jump prev page', () => { - const jumpPrevButton = $('li.rc-pagination-jump-prev'); - expect(jumpPrevButton).toBeTruthy(); + it('should work for jump prev page', async () => { + const user = userEvent.setup(); + const jumpPrevButton = $button('li.rc-pagination-jump-prev button'); - fireEvent.keyDown(jumpPrevButton, { key: 'Enter', keyCode: 13, which: 13 }); fireEvent.click(jumpPrevButton); + jumpPrevButton.focus(); + await user.keyboard('{Enter}'); expect(onChange).toHaveBeenLastCalledWith(40, 10); }); - it('should work for jump prev page with space key', () => { - const jumpPrevButton = $('li.rc-pagination-jump-prev'); - expect(jumpPrevButton).toBeTruthy(); + it('should work for jump prev page with space key', async () => { + const user = userEvent.setup(); + const jumpPrevButton = $button('li.rc-pagination-jump-prev button'); - fireEvent.keyDown(jumpPrevButton, { key: ' ', keyCode: 32, which: 32 }); - fireEvent.keyDown(jumpPrevButton, { - key: 'Spacebar', - keyCode: 32, - which: 32, - }); + jumpPrevButton.focus(); + await user.keyboard(' '); + await user.keyboard(' '); expect(onChange).toHaveBeenLastCalledWith(40, 10); }); - it('should work for jump next page', () => { - const jumpNextButton = $('li.rc-pagination-jump-next'); - expect(jumpNextButton).toBeTruthy(); + it('should work for jump next page', async () => { + const user = userEvent.setup(); + const jumpNextButton = $button('li.rc-pagination-jump-next button'); fireEvent.click(jumpNextButton); - fireEvent.keyDown(jumpNextButton, { key: 'Enter', keyCode: 13, which: 13 }); + jumpNextButton.focus(); + await user.keyboard('{Enter}'); expect(onChange).toHaveBeenLastCalledWith(60, 10); }); - it('should work for jump next page with space key', () => { - const jumpNextButton = $('li.rc-pagination-jump-next'); - expect(jumpNextButton).toBeTruthy(); + it('should work for jump next page with space key', async () => { + const user = userEvent.setup(); + const jumpNextButton = $button('li.rc-pagination-jump-next button'); - fireEvent.keyDown(jumpNextButton, { key: ' ', keyCode: 32, which: 32 }); - fireEvent.keyDown(jumpNextButton, { - key: 'Spacebar', - keyCode: 32, - which: 32, - }); + jumpNextButton.focus(); + await user.keyboard(' '); + await user.keyboard(' '); expect(onChange).toHaveBeenLastCalledWith(60, 10); }); diff --git a/tests/itemRender.test.tsx b/tests/itemRender.test.tsx index 50c426f2..374099bd 100644 --- a/tests/itemRender.test.tsx +++ b/tests/itemRender.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import type { RenderResult } from '@testing-library/react'; -import { render } from '@testing-library/react'; +import { fireEvent, render } from '@testing-library/react'; import Pagination from '../src'; describe('itemRender', () => { @@ -108,4 +108,31 @@ describe('itemRender', () => { expect(prev.innerHTML).toBe('0'); expect(next.innerHTML).toBe('2'); }); + + it('should keep wrapper interaction for custom itemRender fallback', () => { + const onChange = jest.fn(); + const { container } = render( + originalElement} + />, + ); + + const pageButton = container.querySelector('.rc-pagination-item-13'); + const jumpNextButton = container.querySelector('.rc-pagination-jump-next'); + + expect(pageButton).not.toHaveAttribute('role'); + expect(jumpNextButton).not.toHaveAttribute('role'); + + fireEvent.click(pageButton); + fireEvent.keyDown(jumpNextButton, { + key: 'Spacebar', + keyCode: 32, + which: 32, + }); + + expect(onChange).toHaveBeenLastCalledWith(18, 10); + }); }); diff --git a/tests/jumper.test.tsx b/tests/jumper.test.tsx index f87dbcb7..474acc2f 100644 --- a/tests/jumper.test.tsx +++ b/tests/jumper.test.tsx @@ -185,7 +185,9 @@ describe('simple quick jumper', () => { // https://github.com/ant-design/ant-design/issues/10080 it('should not quick jump to previous page when input invalid char', () => { - const nextButton = wrapper.container.querySelector('.rc-pagination-next'); + const nextButton = wrapper.container.querySelector( + '.rc-pagination-next button', + ); fireEvent.click(nextButton); const input = wrapper.container.querySelector('input'); fireEvent.change(input, { target: { value: '&' } });