From ae341639c330f9184171721f736b7fa29a232326 Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 28 Nov 2023 21:00:43 +0800 Subject: [PATCH 01/14] chore: remove ts description --- package.json | 4 +-- rc-pagination.d.ts | 62 ---------------------------------------------- 2 files changed, 1 insertion(+), 65 deletions(-) delete mode 100644 rc-pagination.d.ts diff --git a/package.json b/package.json index 49bae298..6a5c2cd2 100644 --- a/package.json +++ b/package.json @@ -12,13 +12,11 @@ ], "main": "./lib/index", "module": "./es/index", - "types": "rc-pagination.d.ts", "files": [ "assets/*.css", "assets/*.less", "es", - "lib", - "rc-pagination.d.ts" + "lib" ], "homepage": "https://react-component.github.io/pagination", "repository": { diff --git a/rc-pagination.d.ts b/rc-pagination.d.ts deleted file mode 100644 index 3db78bc2..00000000 --- a/rc-pagination.d.ts +++ /dev/null @@ -1,62 +0,0 @@ -declare module 'rc-pagination' { - export interface PaginationData { - className: string; - selectPrefixCls: string; - prefixCls: string; - pageSizeOptions: string[] | number[]; - - current: number; - defaultCurrent: number; - total: number; - pageSize: number; - defaultPageSize: number; - - hideOnSinglePage: boolean; - showSizeChanger: boolean; - showLessItems: boolean; - showPrevNextJumpers: boolean; - showQuickJumper: boolean | object; - showTitle: boolean; - simple: boolean; - disabled: boolean; - - locale: PaginationLocale; - - style: React.CSSProperties; - - selectComponentClass: React.ComponentType; - prevIcon: React.ComponentType | React.ReactNode; - nextIcon: React.ComponentType | React.ReactNode; - jumpPrevIcon: React.ComponentType | React.ReactNode; - jumpNextIcon: React.ComponentType | React.ReactNode; - } - - export interface PaginationLocale { - // Options.jsx - items_per_page?: string; - jump_to?: string; - jump_to_confirm?: string; - page?: string; - - // Pagination.jsx - prev_page?: string; - next_page?: string; - prev_5?: string; - next_5?: string; - prev_3?: string; - next_3?: string; - } - - export interface PaginationProps extends Partial { - onChange?: (page: number, pageSize: number) => void; - onShowSizeChange?: (current: number, size: number) => void; - itemRender?: ( - page: number, - type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next', - element: React.ReactNode, - ) => React.ReactNode; - showTotal?: (total: number, range: [number, number]) => React.ReactNode; - } - - export default class Pagination extends React.Component {} -} From 227b37368c1fe56f6d43c36abe0bca469272602b Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 28 Nov 2023 21:08:12 +0800 Subject: [PATCH 02/14] chore: update deps --- jest.config.js | 7 ++----- package.json | 9 ++++----- tests/options.test.js | 2 +- tests/setupAfterEnv.ts | 1 + 4 files changed, 8 insertions(+), 11 deletions(-) create mode 100644 tests/setupAfterEnv.ts diff --git a/jest.config.js b/jest.config.js index 55b2a26f..f1134def 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,12 +1,9 @@ const pkg = require('./package.json'); module.exports = { - snapshotSerializers: [require.resolve('enzyme-to-json/serializer')], + setupFilesAfterEnv: ['/tests/setupAfterEnv.ts'], moduleNameMapper: { [pkg.name]: '/src/index.ts', '\\.less$': 'identity-obj-proxy', }, - collectCoverageFrom: [ - 'src/**', - '!src/locale/**', - ], + collectCoverageFrom: ['src/**', '!src/locale/**'], }; diff --git a/package.json b/package.json index 6a5c2cd2..3842eedc 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,8 @@ }, "devDependencies": { "@rc-component/father-plugin": "^1.0.0", + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^14.0.0", "@types/classnames": "^2.2.9", "@types/jest": "^29.2.2", "@types/keyv": "^4.2.0", @@ -57,9 +59,6 @@ "coveralls": "^3.0.6", "cross-env": "^7.0.0", "dumi": "^2.1.2", - "enzyme": "^3.0.0", - "enzyme-adapter-react-16": "^1.15.6", - "enzyme-to-json": "^3.4.0", "eslint": "^8.54.0", "eslint-plugin-jest": "^27.6.0", "eslint-plugin-unicorn": "^49.0.0", @@ -74,8 +73,8 @@ "prettier": "^3.1.0", "rc-select": "^14.1.2", "rc-test": "^7.0.15", - "react": "^16.0.0", - "react-dom": "^16.0.0" + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "peerDependencies": { "react": ">=16.9.0", diff --git a/tests/options.test.js b/tests/options.test.js index f8d456de..514a30eb 100644 --- a/tests/options.test.js +++ b/tests/options.test.js @@ -1,4 +1,4 @@ -import { mount } from 'enzyme'; +import { render as mount } from '@testing-library/react'; import Select from 'rc-select'; import zhCN from '../src/locale/zh_CN'; import Options from '../src/Options'; diff --git a/tests/setupAfterEnv.ts b/tests/setupAfterEnv.ts new file mode 100644 index 00000000..7b0828bf --- /dev/null +++ b/tests/setupAfterEnv.ts @@ -0,0 +1 @@ +import '@testing-library/jest-dom'; From 8491477561fd5a0e431336208c538ea12b89697d Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 28 Nov 2023 21:14:00 +0800 Subject: [PATCH 03/14] chore: migrate options.test --- tests/__snapshots__/options.test.js.snap | 54 +++++++++++++++++++++++- tests/options.test.js | 12 +++--- 2 files changed, 59 insertions(+), 7 deletions(-) diff --git a/tests/__snapshots__/options.test.js.snap b/tests/__snapshots__/options.test.js.snap index 7e59d697..5824f3f0 100644 --- a/tests/__snapshots__/options.test.js.snap +++ b/tests/__snapshots__/options.test.js.snap @@ -1,3 +1,55 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Options should render correctly 1`] = `"
  • 10 条/页
    跳至页
    • "`; +exports[`Options should render correctly 1`] = ` +
  • +
    +
    + + + + + 10 条/页 + +
    +
    +
    + 跳至 + + 页 +
    +
    • +`; diff --git a/tests/options.test.js b/tests/options.test.js index 514a30eb..ceb111c8 100644 --- a/tests/options.test.js +++ b/tests/options.test.js @@ -1,4 +1,4 @@ -import { render as mount } from '@testing-library/react'; +import { render } from '@testing-library/react'; import Select from 'rc-select'; import zhCN from '../src/locale/zh_CN'; import Options from '../src/Options'; @@ -19,8 +19,8 @@ const WrapperOptions = (props) => { describe('Options', () => { it('should render correctly', () => { - const wrapper = mount(); - expect(wrapper.html()).toMatchSnapshot(); + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); }); describe('props:buildOptionText', () => { @@ -30,12 +30,12 @@ describe('Options', () => { .mockImplementation((value) => (
    buildOptionText-{value}
    )); - const wrapper = mount( + const { container } = render( , ); - const options = wrapper.find('.custom-options'); + const options = container.querySelector('.custom-options'); expect(options).toBeTruthy(); - expect(options.text()).toBe('buildOptionText-10'); + expect(options).toHaveTextContent('buildOptionText-10'); }); }); }); From 03ec8c8223a0d676456aaea0a30c16baad1f7bf9 Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 28 Nov 2023 21:16:06 +0800 Subject: [PATCH 04/14] chore: migrate demo.test --- tests/__snapshots__/demo.test.js.snap | 1579 ++++++++++++++++++++++++- tests/demo.test.js | 6 +- 2 files changed, 1569 insertions(+), 16 deletions(-) diff --git a/tests/__snapshots__/demo.test.js.snap b/tests/__snapshots__/demo.test.js.snap index ea30afad..713824c9 100644 --- a/tests/__snapshots__/demo.test.js.snap +++ b/tests/__snapshots__/demo.test.js.snap @@ -1,27 +1,1580 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Example basic 1`] = `""`; +exports[`Example basic 1`] = ` + +`; -exports[`Example controlled 1`] = `""`; +exports[`Example controlled 1`] = ` + +`; -exports[`Example itemRender 1`] = `""`; +exports[`Example itemRender 1`] = ` + +`; -exports[`Example jumper 1`] = `"

    默认

    禁用

    单页默认隐藏

    • 1
    • 10 条/页

    • 1
    • 10 条/页
    "`; +exports[`Example jumper 1`] = ` +

    + 默认 +

    +`; -exports[`Example jumperWithGoButton 1`] = `"

    customize node

    default node

    • /5
    • 跳至页
    "`; +exports[`Example jumperWithGoButton 1`] = ` +

    + customize node +

    +`; -exports[`Example lessPages 1`] = `"
    Is using icon: true
    "`; +exports[`Example lessPages 1`] = ` +
    + + +
    + + + Is using icon: + true + +
    +
    +`; -exports[`Example locale 1`] = `""`; +exports[`Example locale 1`] = ` + +`; -exports[`Example more 1`] = `""`; +exports[`Example more 1`] = ` + +`; -exports[`Example showTitle 1`] = `""`; +exports[`Example showTitle 1`] = ` +
    + + +
    +`; -exports[`Example showTotal 1`] = `"

    • 0 - 0 of 0 items
    • 1
    "`; +exports[`Example showTotal 1`] = ` + +`; -exports[`Example simple 1`] = `"
    • /5

    • Total 50 items
    • /5

    • /5
    • 10 条/页
    "`; +exports[`Example simple 1`] = ` +
      +
    • +
      • +
    • + + + / + + 5 +
      • +
    • +
      • +
    +`; -exports[`Example sizer 1`] = `"
    "`; +exports[`Example sizer 1`] = ` +
    + + + + +
    +`; -exports[`Example styles 1`] = `""`; +exports[`Example styles 1`] = ` + +`; diff --git a/tests/demo.test.js b/tests/demo.test.js index 1637c4e6..43021f36 100644 --- a/tests/demo.test.js +++ b/tests/demo.test.js @@ -1,4 +1,4 @@ -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import fs from 'fs'; import path from 'path'; @@ -13,8 +13,8 @@ describe('Example', () => { it(name, () => { const Example = require(path.join(exampleDir, file)).default; - const wrapper = mount(); - expect(wrapper.html()).toMatchSnapshot(); + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); }); }); }); From 272a50be63fb2e25611264465f82a6f303b70128 Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 28 Nov 2023 21:26:33 +0800 Subject: [PATCH 05/14] chore: migrate data-aria.test --- tests/data-aria.test.js | 46 +++++++++++++++++++++++++++++------------ 1 file changed, 33 insertions(+), 13 deletions(-) diff --git a/tests/data-aria.test.js b/tests/data-aria.test.js index c6e4b084..dbf1523c 100644 --- a/tests/data-aria.test.js +++ b/tests/data-aria.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import Pagination from '../src'; describe('data and aria props', () => { @@ -7,7 +7,7 @@ describe('data and aria props', () => { describe('with simple prop', () => { beforeEach(() => { - wrapper = mount( + wrapper = render( { }); it('renders data attributes', () => { - expect(wrapper.getDOMNode().getAttribute('data-test')).toBe('test-id'); - expect(wrapper.getDOMNode().getAttribute('data-id')).toBe('12345'); + expect(wrapper.container.firstChild).toHaveAttribute( + 'data-test', + 'test-id', + ); + expect(wrapper.container.firstChild).toHaveAttribute('data-id', '12345'); }); it('renders aria attributes', () => { - expect(wrapper.getDOMNode().getAttribute('aria-labelledby')).toBe( + expect(wrapper.container.firstChild).toHaveAttribute( + 'aria-labelledby', 'labelledby-id', ); - expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('label-id'); + expect(wrapper.container.firstChild).toHaveAttribute( + 'aria-label', + 'label-id', + ); }); it('renders role attribute', () => { - expect(wrapper.getDOMNode().getAttribute('role')).toBe('navigation'); + expect(wrapper.container.firstChild).toHaveAttribute( + 'role', + 'navigation', + ); }); }); describe('without simple prop', () => { beforeEach(() => { - wrapper = mount( + wrapper = render( { }); it('renders data attributes', () => { - expect(wrapper.getDOMNode().getAttribute('data-test')).toBe('test-id'); - expect(wrapper.getDOMNode().getAttribute('data-id')).toBe('12345'); + expect(wrapper.container.firstChild).toHaveAttribute( + 'data-test', + 'test-id', + ); + expect(wrapper.container.firstChild).toHaveAttribute('data-id', '12345'); }); it('renders aria attributes', () => { - expect(wrapper.getDOMNode().getAttribute('aria-labelledby')).toBe( + expect(wrapper.container.firstChild).toHaveAttribute( + 'aria-labelledby', 'labelledby-id', ); - expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('label-id'); + expect(wrapper.container.firstChild).toHaveAttribute( + 'aria-label', + 'label-id', + ); }); it('renders role attribute', () => { - expect(wrapper.getDOMNode().getAttribute('role')).toBe('navigation'); + expect(wrapper.container.firstChild).toHaveAttribute( + 'role', + 'navigation', + ); }); }); }); From b14fa6141fffe5e7cd1186316705a3895754ea6e Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 28 Nov 2023 21:37:51 +0800 Subject: [PATCH 06/14] chore: migrate itemRender.test --- tests/itemRender.test.js | 61 ++++++++++++++++++++++++---------------- 1 file changed, 36 insertions(+), 25 deletions(-) diff --git a/tests/itemRender.test.js b/tests/itemRender.test.js index 79353a82..3de3b447 100644 --- a/tests/itemRender.test.js +++ b/tests/itemRender.test.js @@ -1,14 +1,15 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import Pagination from '../src'; describe('itemRender', () => { let wrapper; const currentPage = 12; const itemRender = (current) => {current}; + const $$ = (selector) => wrapper.container.querySelector(selector); beforeEach(() => { - wrapper = mount( + wrapper = render( , ); }); @@ -18,31 +19,31 @@ describe('itemRender', () => { }); it('should support custom itemRender', () => { - const prev = wrapper.find('.rc-pagination-prev'); - const next = wrapper.find('.rc-pagination-next'); - const jumpPrev = wrapper.find('.rc-pagination-jump-prev'); - const jumpNext = wrapper.find('.rc-pagination-jump-next'); - const active = wrapper.find('.rc-pagination-item-active'); + const prev = $$('.rc-pagination-prev'); + const next = $$('.rc-pagination-next'); + const jumpPrev = $$('.rc-pagination-jump-prev'); + const jumpNext = $$('.rc-pagination-jump-next'); + const active = $$('.rc-pagination-item-active'); - expect(prev.getDOMNode().innerHTML).toBe( + expect(prev.innerHTML).toBe( `${currentPage - 1}`, ); - expect(next.getDOMNode().innerHTML).toBe( + expect(next.innerHTML).toBe( `${currentPage + 1}`, ); - expect(jumpPrev.getDOMNode().innerHTML).toBe( + expect(jumpPrev.innerHTML).toBe( `${currentPage - 5}`, ); - expect(jumpNext.getDOMNode().innerHTML).toBe( + expect(jumpNext.innerHTML).toBe( `${currentPage + 5}`, ); - expect(active.getDOMNode().innerHTML).toBe( + expect(active.innerHTML).toBe( `${currentPage}`, ); }); it('should support empty custom itemRender', () => { - const pageEmptyWrapper = mount( + const pageEmptyWrapper = render( { }} />, ); - expect(pageEmptyWrapper.find('.rc-pagination-item').length).toBe(0); + expect( + pageEmptyWrapper.container.querySelectorAll('.rc-pagination-item'), + ).toHaveLength(0); - const turnPageWrapper = mount( + const turnPageWrapper = render( { }} />, ); - expect(turnPageWrapper.find('.rc-pagination-prev').length).toBe(0); - expect(turnPageWrapper.find('.rc-pagination-next').length).toBe(0); + expect( + turnPageWrapper.container.querySelectorAll('.rc-pagination-prev'), + ).toHaveLength(0); + expect( + turnPageWrapper.container.querySelectorAll('.rc-pagination-next'), + ).toHaveLength(0); - const jumpPageWrapper = mount( + const jumpPageWrapper = render( { }} />, ); - expect(jumpPageWrapper.find('.rc-pagination-jump-prev').length).toBe(0); - expect(jumpPageWrapper.find('.rc-pagination-jump-next').length).toBe(0); + expect( + jumpPageWrapper.container.querySelectorAll('.rc-pagination-jump-prev'), + ).toHaveLength(0); + expect( + jumpPageWrapper.container.querySelectorAll('.rc-pagination-jump-next'), + ).toHaveLength(0); }); it('should support pass disabled to prev and next buttons', () => { - const component = mount( + const { container } = render( , ); - const prev = component.find('.rc-pagination-prev'); - const next = component.find('.rc-pagination-next'); - expect(prev.getDOMNode().innerHTML).toBe('0'); - expect(next.getDOMNode().innerHTML).toBe('2'); + const prev = container.querySelector('.rc-pagination-prev'); + const next = container.querySelector('.rc-pagination-next'); + expect(prev.innerHTML).toBe('0'); + expect(next.innerHTML).toBe('2'); }); }); From 5adbf477d144bb7cdb1ee1f1146a9f15d37e6e46 Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 28 Nov 2023 23:05:42 +0800 Subject: [PATCH 07/14] chore: migrate jumper.test --- tests/jumper.test.js | 194 +++++++++++++++++++++++-------------------- 1 file changed, 106 insertions(+), 88 deletions(-) diff --git a/tests/jumper.test.js b/tests/jumper.test.js index f4370cc4..2db95aef 100644 --- a/tests/jumper.test.js +++ b/tests/jumper.test.js @@ -1,12 +1,13 @@ -import { mount } from 'enzyme'; +import { render, fireEvent } from '@testing-library/react'; import Pagination from '../src'; describe('Pagination with jumper', () => { let wrapper; const onChange = jest.fn(); + const $$ = (selector) => wrapper.container.querySelector(selector); beforeEach(() => { - wrapper = mount( + wrapper = render( { }); it('when input less than 1', () => { - const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper'); - const input = quickJumper.find('input'); - input.simulate('change', { target: { value: '-1' } }); - input.simulate('keyUp', { key: 'Enter', keyCode: 13, which: 13 }); - // expect(wrapper.state().current).toBe(1); // Class component - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('1'); + const quickJumper = $$('.rc-pagination-options-quick-jumper'); + expect(quickJumper).toBeTruthy(); + const input = quickJumper.querySelector('input'); + fireEvent.change(input, { target: { value: '-1' } }); + fireEvent.keyUp(input, { key: 'Enter', keyCode: 13, which: 13 }); + expect($$('.rc-pagination-item-active')).toHaveTextContent('1'); expect(onChange).toHaveBeenLastCalledWith(1, 10); }); it('should not call onChange when blur input', () => { - const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper'); - const input = quickJumper.find('input'); - input.simulate('blur'); - // expect(wrapper.state().current).toBe(10); // Class component - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('10'); - expect(onChange).not.toBeCalled(); + const quickJumper = $$('.rc-pagination-options-quick-jumper'); + const input = quickJumper.querySelector('input'); + fireEvent.blur(input); + expect($$('.rc-pagination-item-active')).toHaveTextContent('10'); + expect(onChange).not.toHaveBeenCalled(); }); it('should not jumper when click pre/next button', () => { - const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper'); - const input = quickJumper.find('input'); - input.simulate('change', { target: { value: '13' } }); - const mockEvent = { - relatedTarget: { - className: 'rc-pagination-item-link', - }, - }; - input.simulate('blur', mockEvent); - expect(input.instance().value).toBe(''); - expect(onChange).not.toBeCalled(); + const quickJumper = $$('.rc-pagination-options-quick-jumper'); + const input = quickJumper.querySelector('input'); + fireEvent.change(input, { target: { value: '13' } }); + + const relatedTarget = document.createElement('a'); + relatedTarget.className = 'rc-pagination-item-link'; + fireEvent.blur(input, { relatedTarget }); + + expect(input).toHaveValue(''); + expect(onChange).not.toHaveBeenCalled(); }); it('should not jumper when click page', () => { - const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper'); - const input = quickJumper.find('input'); - input.simulate('change', { target: { value: '13' } }); - const mockEvent = { - relatedTarget: { - className: 'rc-pagination-item', - }, - }; - input.simulate('blur', mockEvent); - expect(input.instance().value).toBe(''); - expect(onChange).not.toBeCalled(); + const quickJumper = $$('.rc-pagination-options-quick-jumper'); + const input = quickJumper.querySelector('input'); + fireEvent.change(input, { target: { value: '13' } }); + + const relatedTarget = document.createElement('a'); + relatedTarget.className = 'rc-pagination-item'; + fireEvent.blur(input, { relatedTarget }); + + expect(input).toHaveValue(''); + expect(onChange).not.toHaveBeenCalled(); }); it('should not jump when input empty string', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( { }} />, ); - const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper'); - const input = quickJumper.find('input'); - const goButton = quickJumper.find('.go-button'); - input.simulate('change', { target: { value: '3' } }); - goButton.simulate('click'); - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('3'); - input.simulate('change', { target: { value: '' } }); - goButton.simulate('click'); - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('3'); + const quickJumper = container.querySelector( + '.rc-pagination-options-quick-jumper', + ); + const input = quickJumper.querySelector('input'); + const goButton = quickJumper.querySelector('.go-button'); + fireEvent.change(input, { target: { value: '3' } }); + fireEvent.click(goButton); + expect( + container.querySelector('.rc-pagination-item-active'), + ).toHaveTextContent('3'); + fireEvent.change(input, { target: { value: '' } }); + fireEvent.click(goButton); + expect( + container.querySelector('.rc-pagination-item-active'), + ).toHaveTextContent('3'); expect(onChange).toHaveBeenLastCalledWith(3, 10); }); }); @@ -101,7 +105,7 @@ describe('simple quick jumper', () => { const onChange = jest.fn(); beforeEach(() => { - wrapper = mount( + wrapper = render( { }); it('should quick jump to expect page', () => { - const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper'); - const input = quickJumper.find('input'); - const goButton = quickJumper.find('.go-button'); - input.simulate('change', { target: { value: '2' } }); - goButton.simulate('click'); - // expect(wrapper.state().current).toBe(2); // Class component + const quickJumper = wrapper.container.querySelector( + '.rc-pagination-options-quick-jumper', + ); + const input = quickJumper.querySelector('input'); + const goButton = quickJumper.querySelector('.go-button'); + fireEvent.change(input, { target: { value: '2' } }); + fireEvent.click(goButton); expect( - wrapper.find('.rc-pagination-simple-pager').find('input').getDOMNode() - .value, - ).toBe('2'); + wrapper.container.querySelector('.rc-pagination-simple-pager input'), + ).toHaveValue('2'); expect(onChange).toHaveBeenLastCalledWith(2, 10); }); describe('custom showQuickJumper button Pagination', () => { beforeEach(() => { - wrapper = mount( + wrapper = render( { }); it('should quick jump to expect page', () => { - const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper'); - const input = quickJumper.find('input'); - const goButton = quickJumper.find('.go-button'); - input.simulate('change', { target: { value: '2' } }); - goButton.simulate('click'); - // expect(wrapper.state().current).toBe(2); // Class component - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2'); + const quickJumper = wrapper.container.querySelector( + '.rc-pagination-options-quick-jumper', + ); + const input = quickJumper.querySelector('input'); + const goButton = quickJumper.querySelector('.go-button'); + fireEvent.change(input, { target: { value: '2' } }); + fireEvent.click(goButton); + expect( + wrapper.container.querySelector('.rc-pagination-item-active'), + ).toHaveTextContent('2'); expect(onChange).toHaveBeenLastCalledWith(2, 10); }); // https://github.com/ant-design/ant-design/issues/10080 it('should not quick jump to previous page when input invalid char', () => { - const nextButton = wrapper.find('.rc-pagination-next'); - nextButton.simulate('click'); - const input = wrapper.find('input'); - input.simulate('change', { target: { value: '&' } }); - input.simulate('keyUp', { key: 'Enter', keyCode: 13, which: 13 }); - // expect(wrapper.state().current).toBe(2); // Class component - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2'); + const nextButton = wrapper.container.querySelector('.rc-pagination-next'); + fireEvent.click(nextButton); + const input = wrapper.container.querySelector('input'); + fireEvent.change(input, { target: { value: '&' } }); + fireEvent.keyUp(input, { key: 'Enter', keyCode: 13, which: 13 }); + expect( + wrapper.container.querySelector('.rc-pagination-item-active'), + ).toHaveTextContent('2'); expect(onChange).toHaveBeenLastCalledWith(2, 10); }); }); it('goButton could be true', () => { - wrapper = mount( + wrapper = render( { />, ); expect( - wrapper.find('.rc-pagination-options-quick-jumper-button').exists(), - ).toBe(true); + wrapper.container.querySelector( + '.rc-pagination-options-quick-jumper-button', + ), + ).toBeTruthy(); }); it('goButton defaultly hidden', () => { - wrapper = mount( + wrapper = render( { />, ); expect( - wrapper.find('.rc-pagination-options-quick-jumper-button').exists(), - ).toBe(false); + wrapper.container.querySelector( + '.rc-pagination-options-quick-jumper-button', + ), + ).toBeFalsy(); }); it('goButton could be false', () => { - wrapper = mount( + wrapper = render( { />, ); expect( - wrapper.find('.rc-pagination-options-quick-jumper-button').exists(), - ).toBe(false); + wrapper.container.querySelector( + '.rc-pagination-options-quick-jumper-button', + ), + ).toBeFalsy(); }); it('Quick Jumper should hide when only one page', () => { - wrapper = mount( + wrapper = render( , ); - expect(wrapper.find('.rc-pagination-options-quick-jumper').exists()).toBe( - false, - ); + expect( + wrapper.container.querySelector( + '.rc-pagination-options-quick-jumper-button', + ), + ).toBeFalsy(); }); // https://github.com/ant-design/ant-design/issues/32991 it('Quick Jumper should hide when only one page when has pageSize', () => { - wrapper = mount( + wrapper = render( { showQuickJumper />, ); - expect(wrapper.find('.rc-pagination-options-quick-jumper').exists()).toBe( - false, - ); + expect( + wrapper.container.querySelector( + '.rc-pagination-options-quick-jumper-button', + ), + ).toBeFalsy(); }); }); From c829ebd484e002450416cabb1132b8789d0b86ef Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 28 Nov 2023 23:22:23 +0800 Subject: [PATCH 08/14] chore: migrate sizer.test --- tests/sizer.test.js | 43 +++++++++++++++++++++++-------------------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/tests/sizer.test.js b/tests/sizer.test.js index 65b0ce88..a1cee0f6 100644 --- a/tests/sizer.test.js +++ b/tests/sizer.test.js @@ -1,11 +1,11 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { render, fireEvent, act } from '@testing-library/react'; import Select from 'rc-select'; import Pagination from '../src'; describe('Pagination with sizer', () => { it('should merge custom pageSize to pageSizeOptions', () => { - const wrapper = mount( + const { container, getByRole } = render( { selectComponentClass={Select} />, ); - wrapper.find(Select).find('input').simulate('mousedown'); - expect(wrapper.find(Select).find('.rc-select-item').length).toBe(5); + const select = getByRole('combobox'); + expect(select).toBeTruthy(); + fireEvent.mouseDown(select); + expect(container.querySelectorAll('.rc-select-item')).toHaveLength(5); }); it('should not merge duplicated pageSize to pageSizeOptions', () => { - const wrapper = mount( + const { container, getByRole } = render( { selectComponentClass={Select} />, ); - wrapper.find(Select).find('input').simulate('mousedown'); - expect(wrapper.find(Select).find('.rc-select-item').length).toBe(4); + fireEvent.mouseDown(getByRole('combobox')); + expect(container.querySelectorAll('.rc-select-item')).toHaveLength(4); }); it('should merge pageSize to pageSizeOptions with proper order', () => { - const wrapper = mount( + const { container, getByRole } = render( { selectComponentClass={Select} />, ); - wrapper.find(Select).find('input').simulate('mousedown'); - expect(wrapper.find(Select).find('.rc-select-item').at(2).text()).toBe( + fireEvent.mouseDown(getByRole('combobox')); + expect(container.querySelectorAll('.rc-select-item')).toHaveLength(5); + expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent( '45 条/页✓', ); }); it('should onChange called when pageSize change', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container, getByRole } = render( { defaultPageSize={20} />, ); - wrapper.find(Select).find('input').simulate('mousedown'); - expect(wrapper.find(Select).find('.rc-select-item').at(2).text()).toBe( + fireEvent.mouseDown(getByRole('combobox')); + expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent( '50 条/页', ); - const pageSize1 = wrapper.find(Select).find('.rc-select-item').at(0); - pageSize1.simulate('click'); - expect(onChange).toBeCalled(); + const pageSize1 = container.querySelectorAll('.rc-select-item')[0]; + fireEvent.click(pageSize1); + expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenLastCalledWith(1, 10); }); // https://github.com/ant-design/ant-design/issues/26580 it('should contains locale text in selected pageSize when pageSizeOptions are numbers', () => { - const wrapper = mount( + const { container } = render( { pageSizeOptions={[20, 50]} />, ); - expect(wrapper.find(Select).find('.rc-select-selection-item').text()).toBe( - '20 条/页', - ); + expect( + container.querySelector('.rc-select-selection-item'), + ).toHaveTextContent('20 条/页'); }); }); From a8ab20897d45887b93e674d84dcef6def38bfcca Mon Sep 17 00:00:00 2001 From: wuxh Date: Tue, 28 Nov 2023 23:36:02 +0800 Subject: [PATCH 09/14] chore: migrate two-pagination.test --- tests/two-pagination.test.js | 48 ++++++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 19 deletions(-) diff --git a/tests/two-pagination.test.js b/tests/two-pagination.test.js index 74f08f78..dcae5f12 100644 --- a/tests/two-pagination.test.js +++ b/tests/two-pagination.test.js @@ -1,13 +1,14 @@ -import { mount } from 'enzyme'; +import { render, fireEvent } from '@testing-library/react'; import React from 'react'; -import Pagination from '../src'; import TwoPagination from './two-pagination'; describe('Two Pagination', () => { let wrapper; + let mockPagination; beforeEach(() => { - wrapper = mount(); + jest.mock('../src', () => {}); + wrapper = render(); }); afterEach(() => { @@ -15,24 +16,33 @@ describe('Two Pagination', () => { }); it('should has initial pageSize 20', () => { - const p1 = wrapper.find(Pagination).at(0); - const p2 = wrapper.find(Pagination).at(1); - // expect(p1.state().pageSize).toBe(20); // Class component - expect(p1.props().pageSize).toBe(20); // Function component - // expect(p2.state().pageSize).toBe(20); // Class component - expect(p2.props().pageSize).toBe(20); // Function component + const findPagination = wrapper.container.querySelectorAll('.rc-pagination'); + expect(findPagination).toHaveLength(2); + const [p1, p2] = findPagination; + + const p1Items = p1.querySelectorAll('.rc-pagination-item'); + expect(p1Items).toHaveLength(6); + expect(p1Items[p1Items.length - 1].textContent).toBe('25'); + + const p2Items = p2.querySelectorAll('.rc-pagination-item'); + expect(p2Items).toHaveLength(6); + expect(p2Items[p2Items.length - 1].textContent).toBe('25'); }); it('should sync pageSize via state', () => { - const p1 = wrapper.find(Pagination).at(0); - const p2 = wrapper.find(Pagination).at(1); - wrapper.find('.hook').simulate('click'); - // wrapper.update(); - const newP1 = wrapper.find(Pagination).at(0); - const newP2 = wrapper.find(Pagination).at(1); - // expect(p1.state().pageSize).toBe(50); // Class component - expect(newP1.props().pageSize).toBe(50); // Function component - // expect(p2.state().pageSize).toBe(50); // Class component - expect(newP2.props().pageSize).toBe(50); // Function component + const findPagination = wrapper.container.querySelectorAll('.rc-pagination'); + const [p1, p2] = findPagination; + + const button = wrapper.container.querySelector('.hook'); + expect(button).toBeTruthy(); + fireEvent.click(button); + + const p1Items = p1.querySelectorAll('.rc-pagination-item'); + expect(p1Items).toHaveLength(6); + expect(p1Items[p1Items.length - 1].textContent).toBe('10'); + + const p2Items = p2.querySelectorAll('.rc-pagination-item'); + expect(p2Items).toHaveLength(6); + expect(p2Items[p2Items.length - 1].textContent).toBe('10'); }); }); From f61270bba86d49917b053d4011a99c294a2b1d4a Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 29 Nov 2023 00:04:04 +0800 Subject: [PATCH 10/14] chore: migrate simple.test --- tests/simple.test.js | 196 +++++++++++++++++++++++-------------------- 1 file changed, 103 insertions(+), 93 deletions(-) diff --git a/tests/simple.test.js b/tests/simple.test.js index f0aada33..476b294f 100644 --- a/tests/simple.test.js +++ b/tests/simple.test.js @@ -1,4 +1,4 @@ -import { mount } from 'enzyme'; +import { render, fireEvent, createEvent } from '@testing-library/react'; import Select from 'rc-select'; import React, { useState } from 'react'; import Pagination from '../src'; @@ -7,7 +7,7 @@ describe('simple Pagination', () => { let wrapper; beforeEach(() => { - wrapper = mount( + wrapper = render( { it('input change value will emit onChange when input blur', () => { const onChange = jest.fn(); - const component = mount( + const { container } = render( , ); - const greaterCurrent = component.find('.rc-pagination-simple'); - const input = greaterCurrent.find('input'); - input.simulate('change', { target: { value: '2' } }); - input.simulate('blur'); - expect(onChange).toBeCalled(); + const input = container.querySelector('.rc-pagination-simple input'); + fireEvent.change(input, { target: { value: '2' } }); + fireEvent.blur(input); + expect(onChange).toHaveBeenCalled(); + expect(onChange).toHaveBeenLastCalledWith(2, 10); }); it('should return to 1 when blur goto input in uncontrol mode', () => { - const component = mount( + const { container } = render( , ); - const input = component.find('.rc-pagination-simple').find('input'); - input.simulate('focus'); - input.simulate('change', { target: { value: '' } }); - input.simulate('blur'); - expect(input.getDOMNode().value).toBe('1'); + const input = container.querySelector('.rc-pagination-simple input'); + fireEvent.focus(input); + fireEvent.change(input, { target: { value: '' } }); + fireEvent.blur(input); + expect(input).toHaveValue('1'); }); it('should return to 1 when blur goto input in control mode', () => { @@ -51,55 +51,54 @@ describe('simple Pagination', () => { const [current, setCurrent] = useState(1); return ; }; - const component = mount(); - const input = component.find('.rc-pagination-simple').find('input'); - input.simulate('focus'); - input.simulate('change', { target: { value: '' } }); - input.simulate('blur'); - expect(input.getDOMNode().value).toBe('1'); + const { container } = render(); + const input = container.querySelector('.rc-pagination-simple input'); + fireEvent.focus(input); + fireEvent.change(input, { target: { value: '' } }); + fireEvent.blur(input); + expect(input).toHaveValue('1'); }); it('default current page is 1', () => { - // expect(wrapper.state().current).toBe(1); // Class Component - expect(wrapper.find('.rc-pagination-simple-pager').prop('title')).toBe( - '1/3', - ); expect( - wrapper.find('.rc-pagination-simple').find('input').getDOMNode().value, - ).toBe('1'); + wrapper.container.querySelector('.rc-pagination-simple-pager'), + ).toHaveAttribute('title', '1/3'); + expect( + wrapper.container.querySelector('.rc-pagination-simple input'), + ).toHaveValue('1'); }); it('prev-button should be disabled', () => { - const prevButton = wrapper.find('.rc-pagination-prev'); - expect(prevButton.hasClass('rc-pagination-disabled')).toBe(true); - expect(prevButton.getDOMNode().getAttribute('aria-disabled')).toBe('true'); + const prevButton = wrapper.container.querySelector('.rc-pagination-prev'); + expect(prevButton).toHaveClass('rc-pagination-disabled'); + expect(prevButton).toHaveAttribute('aria-disabled', 'true'); }); it('no quick jump', () => { - const simplePagers = wrapper.find('.rc-pagination-simple-pager'); - expect(simplePagers.length).toBe(1); + const simplePagers = wrapper.container.querySelectorAll( + '.rc-pagination-simple-pager', + ); + expect(simplePagers).toHaveLength(1); }); it('simple Pagination when current is greater than page count', () => { - const component = mount( + const { container } = render( , ); - // expect(component.state().current).toBe(3); // Class Component - expect(component.find('.rc-pagination-simple-pager').prop('title')).toBe( - '3/3', - ); - const greaterCurrent = component.find('.rc-pagination-simple'); - const input = greaterCurrent.find('input'); - input.simulate('change', { target: { value: '313423434343343452121' } }); - expect(input.getDOMNode().value).toBe('3'); - // expect(component.state().current).toBe(3); // Class Component - expect(component.find('.rc-pagination-simple-pager').prop('title')).toBe( - '3/3', - ); + + expect( + container.querySelector('.rc-pagination-simple-pager'), + ).toHaveAttribute('title', '3/3'); + const input = container.querySelector('.rc-pagination-simple input'); + fireEvent.change(input, { target: { value: '313423434343343452121' } }); + expect(input).toHaveValue('3'); + expect( + container.querySelector('.rc-pagination-simple-pager'), + ).toHaveAttribute('title', '3/3'); }); it('should merge custom pageSize to pageSizeOptions', () => { - const wrapper = mount( + const { container, getByRole } = render( { selectComponentClass={Select} />, ); - wrapper.find(Select).find('input').simulate('mousedown'); - expect(wrapper.find(Select).find('.rc-select-item').length).toBe(5); + fireEvent.mouseDown(getByRole('combobox')); + expect(container.querySelectorAll('.rc-select-item')).toHaveLength(5); }); it('should onChange called when pageSize change', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container, getByRole } = render( { defaultPageSize={20} />, ); - wrapper.find(Select).find('input').simulate('mousedown'); - expect(wrapper.find(Select).find('.rc-select-item').at(2).text()).toBe( + fireEvent.mouseDown(getByRole('combobox')); + expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent( '50 条/页', ); - const pageSize1 = wrapper.find(Select).find('.rc-select-item').at(0); - pageSize1.simulate('click'); - expect(onChange).toBeCalled(); + const pageSize1 = container.querySelectorAll('.rc-select-item')[0]; + fireEvent.click(pageSize1); + expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenLastCalledWith(1, 10); }); it('should support keyboard event', () => { - const input = wrapper.find('.rc-pagination-simple').find('input'); - input.simulate('change', { target: { value: '2' } }); - input.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 }); - expect(input.getDOMNode().value).toBe('2'); + const input = wrapper.container.querySelector( + '.rc-pagination-simple input', + ); + fireEvent.change(input, { target: { value: '2' } }); + fireEvent.keyDown(input, { key: 'Enter', keyCode: 13, which: 13 }); + expect(input).toHaveValue('2'); }); it('should support keyboard event when press up or down key', () => { - const input = wrapper.find('.rc-pagination-simple').find('input'); - input.simulate('keyUp', { key: 'ArrowDown', keyCode: 40, which: 40 }); - input.simulate('keyUp', { key: 'ArrowDown', keyCode: 40, which: 40 }); - expect(input.getDOMNode().value).toBe('3'); + const input = wrapper.container.querySelector( + '.rc-pagination-simple input', + ); + fireEvent.keyUp(input, { key: 'ArrowDown', keyCode: 40, which: 40 }); + fireEvent.keyUp(input, { key: 'ArrowDown', keyCode: 40, which: 40 }); + expect(input).toHaveValue('3'); - input.simulate('keyUp', { key: 'ArrowUp', keyCode: 38, which: 38 }); - expect(input.getDOMNode().value).toBe('2'); + fireEvent.keyUp(input, { key: 'ArrowUp', keyCode: 38, which: 38 }); + expect(input).toHaveValue('2'); }); it('should work form keyboard enter', () => { - const wrapper = mount(); - const input = wrapper.find('.rc-pagination-simple').find('input'); + const { container } = render( + , + ); + const input = container.querySelector('.rc-pagination-simple input'); - expect(input.exists()).toBeTruthy(); + expect(input).toBeTruthy(); - input.simulate('change', { target: { value: '8' } }); - input.simulate('keyUp', { key: 'Enter', keyCode: 13, which: 13 }); + fireEvent.change(input, { target: { value: '8' } }); + fireEvent.keyUp(input, { key: 'Enter', keyCode: 13, which: 13 }); expect( - wrapper.find('.rc-pagination-simple-pager').at(0).prop('title'), - ).toBe('8/10'); + container.querySelector('.rc-pagination-simple-pager'), + ).toHaveAttribute('title', '8/10'); }); it(`prevent "up arrow" key reseting cursor position within textbox`, () => { - const mockPreventDefault = jest.fn(); - const wrapper = mount(); - const input = wrapper.find('.rc-pagination-simple').find('input'); + const { container } = render( + , + ); + const input = container.querySelector('.rc-pagination-simple input'); + expect(input).toBeTruthy(); - expect(input.exists()).toBeTruthy(); + fireEvent.change(input, { target: { value: '8' } }); - input.simulate('change', { target: { value: '8' } }); - input.simulate('keyDown', { + const myEvent = createEvent.keyDown(input, { key: 'ArrowUp', keyCode: 38, which: 38, - preventDefault: mockPreventDefault, }); - expect(mockPreventDefault).toHaveBeenCalled(); - expect(input.getDOMNode().value).toBe('8'); + myEvent.preventDefault = jest.fn(); + + fireEvent(input, myEvent); + expect(myEvent.preventDefault).toHaveBeenCalled(); + expect(input).toHaveValue('8'); }); it('should work when input is not number', () => { - const wrapper = mount(); - const input = wrapper.find('.rc-pagination-simple').find('input'); + const { container } = render( + , + ); + const input = container.querySelector('.rc-pagination-simple input'); - expect(input.exists()).toBeTruthy(); + expect(input).toBeTruthy(); - input.simulate('change', { target: { value: 'a' } }); // NaN case - input.simulate('blur'); + fireEvent.change(input, { target: { value: 'a' } }); // NaN case + fireEvent.blur(input); expect( - wrapper.find('.rc-pagination-simple-pager').at(0).prop('title'), - ).toBe('5/10'); + container.querySelector('.rc-pagination-simple-pager'), + ).toHaveAttribute('title', '5/10'); }); it('gotoButton should work', () => { - const wrapper = mount( + const { container } = render( , ); - const input = wrapper.find('.rc-pagination-options').find('input'); - const gotoButton = wrapper.find('.rc-pagination-options').find('button'); + const input = container.querySelector('.rc-pagination-options input'); + const gotoButton = container.querySelector('.rc-pagination-options button'); - input.simulate('change', { target: { value: '2' } }); - gotoButton.simulate('click'); + fireEvent.change(input, { target: { value: '2' } }); + fireEvent.click(gotoButton); expect( - wrapper.find('.rc-pagination-simple-pager').at(0).prop('title'), - ).toBe('2/3'); + container.querySelector('.rc-pagination-simple-pager'), + ).toHaveAttribute('title', '2/3'); }); }); From 7e4d42c05bf86210a423675fbbdc21b0dcec40d9 Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 29 Nov 2023 11:25:39 +0800 Subject: [PATCH 11/14] chore: migrate index.test --- tests/index.test.js | 451 ++++++++++++++++++++++---------------------- 1 file changed, 229 insertions(+), 222 deletions(-) diff --git a/tests/index.test.js b/tests/index.test.js index fbd8f56e..9ceb5135 100644 --- a/tests/index.test.js +++ b/tests/index.test.js @@ -1,14 +1,16 @@ -import { mount } from 'enzyme'; +import { render, fireEvent } from '@testing-library/react'; import Select from 'rc-select'; import React from 'react'; import Pagination from '../src'; +import { resetWarned } from 'rc-util/lib/warning'; describe('Default Pagination', () => { let wrapper; const onChange = jest.fn(); + const $$ = (selector) => wrapper.container.querySelectorAll(selector); beforeEach(() => { - wrapper = mount(); + wrapper = render(); }); afterEach(() => { @@ -17,32 +19,30 @@ describe('Default Pagination', () => { }); it('onChange should be forbidden when total is default', () => { - const pagers = wrapper.find('.rc-pagination-item'); - const page1 = pagers.at(0); - page1.simulate('click'); - expect(onChange).toBeCalledTimes(0); + const pagers = $$('.rc-pagination-item'); + fireEvent.click(pagers[0]); + expect(onChange).not.toHaveBeenCalled(); }); }); describe('Uncontrolled Pagination', () => { let wrapper; const onChange = jest.fn(); + const $$ = (selector) => wrapper.container.querySelectorAll(selector); - function shouldHighlightRight(current) { - const pagers = wrapper.find('li:not(.rc-pagination-total-text)'); - pagers.forEach((pager, index) => { - // if (index === wrapper.state().current) { // Class Component - const props = wrapper.props(); - if (index === (current ?? props.current ?? props.defaultCurrent)) { - expect(pager.hasClass('rc-pagination-item-active')).toBe(true); + function shouldHighlightRight(current = 1) { + const pagers = $$('li:not(.rc-pagination-total-text)'); + Array.from(pagers).forEach((pager, index) => { + if (index === current) { + expect(pager).toHaveClass('rc-pagination-item-active'); } else { - expect(pager.hasClass('rc-pagination-item-active')).toBe(false); + expect(pager).not.toHaveClass('rc-pagination-item-active'); } }); } beforeEach(() => { - wrapper = mount( + wrapper = render( { }); it('default current page is 1', () => { - // expect(wrapper.state().current).toBe(1); // Class Component - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('1'); - expect(wrapper.find('.rc-pagination-item').first().text()).toBe('1'); - expect(wrapper.find('.rc-pagination-item').first().prop('title')).toBe('1'); + expect( + wrapper.container.querySelector('.rc-pagination-item-active'), + ).toHaveTextContent('1'); + expect($$('.rc-pagination-item')[0]).toHaveTextContent('1'); + expect($$('.rc-pagination-item')[0]).toHaveAttribute('title', '1'); }); it('prev-button should be disabled', () => { - const prevButton = wrapper.find('.rc-pagination-prev'); - expect(prevButton.hasClass('rc-pagination-disabled')).toBe(true); - expect(prevButton.getDOMNode().getAttribute('aria-disabled')).toBe('true'); + const prevButton = wrapper.container.querySelector('.rc-pagination-prev'); + expect(prevButton).toHaveClass('rc-pagination-disabled'); + expect(prevButton).toHaveAttribute('aria-disabled', 'true'); }); it('should hightlight current page and not highlight other page', () => shouldHighlightRight()); it('should calc page right', () => { - const pagers = wrapper.find( + const pagers = $$( 'li:not(.rc-pagination-total-text):not(.rc-pagination-options)', ); const knownPageCount = 3; @@ -86,92 +87,107 @@ describe('Uncontrolled Pagination', () => { }); it('next button should not be disabled', () => { - const nextButton = wrapper.find('.rc-pagination-next'); - expect(nextButton.hasClass('rc-pagination-disabled')).toBe(false); - expect(nextButton.getDOMNode().getAttribute('aria-disabled')).toBe('false'); + const nextButton = wrapper.container.querySelector('.rc-pagination-next'); + expect(nextButton).not.toHaveClass('rc-pagination-disabled'); + expect(nextButton).toHaveAttribute('aria-disabled', 'false'); }); it('should response mouse click right', () => { - const pagers = wrapper.find('.rc-pagination-item'); - expect(pagers.length).toBe(3); - const page2 = pagers.at(1); - expect(page2.hasClass('rc-pagination-item-2')).toBe(true); - page2.simulate('click'); - // expect(wrapper.state().current).toBe(2); // Class Component - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2'); + const pagers = $$('.rc-pagination-item'); + expect(pagers).toHaveLength(3); + const page2 = pagers[1]; + expect(page2).toHaveClass('rc-pagination-item-2'); + fireEvent.click(page2); + expect( + wrapper.container.querySelector('.rc-pagination-item-active'), + ).toHaveTextContent('2'); expect(onChange).toHaveBeenLastCalledWith(2, 10); shouldHighlightRight(2); }); it('should response next page', () => { - const nextButton = wrapper.find('.rc-pagination-next'); - nextButton.simulate('click'); - // expect(wrapper.state().current).toBe(2); // Class Component - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2'); + const nextButton = wrapper.container.querySelector('.rc-pagination-next'); + fireEvent.click(nextButton); + expect( + wrapper.container.querySelector('.rc-pagination-item-active'), + ).toHaveTextContent('2'); expect(onChange).toHaveBeenLastCalledWith(2, 10); shouldHighlightRight(2); }); it('should quick jump to expect page', () => { - const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper'); - const input = quickJumper.find('input'); - const goButton = quickJumper.find( + const quickJumper = wrapper.container.querySelector( + '.rc-pagination-options-quick-jumper', + ); + const input = quickJumper.querySelector('input'); + const goButton = quickJumper.querySelector( '.rc-pagination-options-quick-jumper-button', ); - input.simulate('change', { target: { value: '2' } }); - goButton.simulate('click'); - // expect(wrapper.state().current).toBe(2); // Class Component - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2'); + fireEvent.change(input, { target: { value: '2' } }); + fireEvent.click(goButton); + expect( + wrapper.container.querySelector('.rc-pagination-item-active'), + ).toHaveTextContent('2'); expect(onChange).toHaveBeenLastCalledWith(2, 10); }); // https://github.com/ant-design/ant-design/issues/17763 it('should not jump when blur input when there is goButton', () => { - const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper'); - const input = quickJumper.find('input'); - input.simulate('focus'); - input.simulate('change', { target: { value: '2' } }); - input.simulate('blur'); - // expect(wrapper.state().current).toBe(1); - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('1'); - expect(onChange).not.toBeCalled(); + const input = wrapper.container.querySelector( + '.rc-pagination-options-quick-jumper input', + ); + fireEvent.focus(input); + fireEvent.change(input, { target: { value: '2' } }); + fireEvent.blur(input); + expect( + wrapper.container.querySelector('.rc-pagination-item-active'), + ).toHaveTextContent('1'); + + expect(onChange).not.toHaveBeenCalled(); }); // https://github.com/ant-design/ant-design/issues/17763 it('should not jump when blur input when there is not goButton', () => { - const component = mount( + const { container } = render( , ); - const quickJumper = component.find('.rc-pagination-options-quick-jumper'); - const input = quickJumper.find('input'); - input.simulate('change', { target: { value: '2' } }); - input.simulate('blur'); - // expect(component.state().current).toBe(2); - expect(component.find('.rc-pagination-item-active').text()).toBe('2'); + const input = container.querySelector( + '.rc-pagination-options-quick-jumper input', + ); + fireEvent.change(input, { target: { value: '2' } }); + fireEvent.blur(input); + expect( + container.querySelector('.rc-pagination-item-active'), + ).toHaveTextContent('2'); }); // https://github.com/ant-design/ant-design/issues/15539 it('should hide quick jumper when only one page', () => { - const component = mount( + const { container } = render( , ); - const quickJumper = component.find('.rc-pagination-options-quick-jumper'); - expect(quickJumper.length).toBe(0); + const quickJumper = container.querySelectorAll( + '.rc-pagination-options-quick-jumper', + ); + expect(quickJumper).toHaveLength(0); }); it('should display total items', () => { - const totalText = wrapper.find('.rc-pagination-total-text'); - expect(totalText.text()).toBe('1 - 10 of 25 items'); - const nextButton = wrapper.find('.rc-pagination-next'); - nextButton.simulate('click'); - expect(totalText.text()).toBe('11 - 20 of 25 items'); - nextButton.simulate('click'); - expect(totalText.text()).toBe('21 - 25 of 25 items'); + const totalText = wrapper.container.querySelector( + '.rc-pagination-total-text', + ); + expect(totalText).toHaveTextContent('1 - 10 of 25 items'); + const nextButton = wrapper.container.querySelector('.rc-pagination-next'); + fireEvent.click(nextButton); + expect(totalText).toHaveTextContent('11 - 20 of 25 items'); + fireEvent.click(nextButton); + expect(totalText).toHaveTextContent('21 - 25 of 25 items'); }); it('readonly warning should be displayed', () => { + resetWarned(); const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); - mount(); + render(); expect(warnSpy).toHaveBeenCalledWith( 'Warning: You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.', ); @@ -179,10 +195,11 @@ describe('Uncontrolled Pagination', () => { }); it('should response keyboard event', () => { - const pagers = wrapper.find('.rc-pagination-item'); - const page2 = pagers.at(2); - page2.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 }); - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('3'); + const pagers = $$('.rc-pagination-item'); + fireEvent.keyDown(pagers[2], { key: 'Enter', keyCode: 13, which: 13 }); + expect( + wrapper.container.querySelector('.rc-pagination-item-active'), + ).toHaveTextContent('3'); expect(onChange).toHaveBeenLastCalledWith(3, 10); }); }); @@ -192,7 +209,7 @@ describe('Controlled Pagination', () => { const onChange = jest.fn(); beforeEach(() => { - wrapper = mount(); + wrapper = render(); }); afterEach(() => { @@ -201,22 +218,23 @@ describe('Controlled Pagination', () => { }); it('current should equal defaultCurrent', () => { - // expect(wrapper.state().current).toBe(2); // Class Component - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2'); - expect(wrapper.find('.rc-pagination-item').first().text()).toBe('1'); expect( - wrapper - .find('.rc-pagination-item') - .at(1) - .hasClass('rc-pagination-item-active'), - ).toBe(true); + wrapper.container.querySelector('.rc-pagination-item-active'), + ).toHaveTextContent('2'); + expect( + wrapper.container.querySelector('.rc-pagination-item'), + ).toHaveTextContent('1'); + expect( + wrapper.container.querySelectorAll('.rc-pagination-item')[1], + ).toHaveClass('rc-pagination-item-active'); }); it('should not response mouse click', () => { - const nextButton = wrapper.find('.rc-pagination-next'); - nextButton.simulate('click'); - // expect(wrapper.state().current).toBe(2); // Class Component - expect(wrapper.find('.rc-pagination-item-active').text()).toBe('2'); + const nextButton = wrapper.container.querySelector('.rc-pagination-next'); + fireEvent.click(nextButton); + expect( + wrapper.container.querySelector('.rc-pagination-item-active'), + ).toHaveTextContent('2'); expect(onChange).toHaveBeenLastCalledWith(3, 10); }); }); @@ -233,38 +251,38 @@ describe('Other props', () => { jumpPrevIcon, jumpNextIcon, }; - const wrapper = mount( + const { container } = render( , ); - const prev = wrapper.find('.rc-pagination-prev'); - const next = wrapper.find('.rc-pagination-next'); - const jumpPrev = wrapper.find('.rc-pagination-jump-prev'); - const jumpNext = wrapper.find('.rc-pagination-jump-next'); - expect(prev.text()).toBe('prevIcon'); - expect(next.text()).toBe('nextIcon'); - expect(jumpPrev.text()).toBe('jumpPrevIcon'); - expect(jumpNext.text()).toBe('jumpNextIcon'); + const prev = container.querySelector('.rc-pagination-prev'); + const next = container.querySelector('.rc-pagination-next'); + const jumpPrev = container.querySelector('.rc-pagination-jump-prev'); + const jumpNext = container.querySelector('.rc-pagination-jump-next'); + expect(prev).toHaveTextContent('prevIcon'); + expect(next).toHaveTextContent('nextIcon'); + expect(jumpPrev).toHaveTextContent('jumpPrevIcon'); + expect(jumpNext).toHaveTextContent('jumpNextIcon'); }); describe('showPrevNextJumpers props', () => { it('should hide jump-prev, jump-next if showPrevNextJumpers equals false', () => { - const wrapper = mount( + const { container } = render( , ); - const prev = wrapper.find('.rc-pagination-jump-prev'); - const next = wrapper.find('.rc-pagination-jump-next'); - expect(prev.exists()).toBe(false); - expect(next.exists()).toBe(false); + const prev = container.querySelector('.rc-pagination-jump-prev'); + const next = container.querySelector('.rc-pagination-jump-next'); + expect(prev).toBeNull(); + expect(next).toBeNull(); }); it('should show jump-prev, jump-next if showPrevNextJumpers equals true', () => { - const wrapper = mount( + const { container } = render( , ); - const prev = wrapper.find('.rc-pagination-jump-prev'); - const next = wrapper.find('.rc-pagination-jump-next'); - expect(prev.exists()).toBe(true); - expect(next.exists()).toBe(true); + const prev = container.querySelector('.rc-pagination-jump-prev'); + const next = container.querySelector('.rc-pagination-jump-next'); + expect(prev).toBeTruthy(); + expect(next).toBeTruthy(); }); }); @@ -272,25 +290,25 @@ describe('Other props', () => { const itemRender = (current) => {current}; it('should hide pager if hideOnSinglePage equals true', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('.rc-pagination').exists()).toBe(false); + expect(container.querySelector('.rc-pagination')).toBeFalsy(); }); it('should show pager if hideOnSinglePage equals false', () => { - const wrapper = mount( + const { container } = render( , ); - expect(wrapper.find('.rc-pagination').exists()).toBe(true); + expect(container.querySelector('.rc-pagination')).toBeTruthy(); }); it('should show pager if hideOnSinglePage equals true but more than 1 page', () => { - const wrapper = mount( + const { container } = render( { hideOnSinglePage={false} />, ); - expect(wrapper.find('.rc-pagination').exists()).toBe(true); + expect(container.querySelector('.rc-pagination')).toBeTruthy(); }); }); it('disabled', () => { - const wrapper = mount( + const { container, getByRole } = render( { disabled />, ); - expect(wrapper.find('.rc-pagination-disabled').exists()).toBe(true); - expect(wrapper.find('input').exists()).toBe(true); - expect(wrapper.find(Select).props().disabled).toBe(true); - expect(wrapper.find('input').at(0).getDOMNode().disabled).toBe(true); + expect(container.querySelector('.rc-pagination-disabled')).toBeTruthy(); + expect(container.querySelector('input')).toBeTruthy(); + expect(getByRole('combobox')).toBeDisabled(); + expect(container.querySelector('input')).toBeDisabled(); expect( - wrapper - .find('.rc-pagination-options-quick-jumper-button') - .at(0) - .getDOMNode().disabled, - ).toBe(true); + container.querySelector('.rc-pagination-options-quick-jumper-button'), + ).toBeDisabled(); }); }); @@ -334,7 +349,7 @@ describe('current value on onShowSizeChange when total is 0', () => { const onChange = jest.fn(); beforeEach(() => { - wrapper = mount( + wrapper = render( { }); it('should call onShowSizeChange when no change', () => { - const sizeChanger = wrapper - .find('.rc-pagination-options-size-changer') - .at(0); - sizeChanger.simulate('click'); - const input = sizeChanger.find('input'); - input.simulate('keyDown', { key: 'Down', keyCode: 40, which: 40 }); - input.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 }); - expect(onShowSizeChange).not.toBeCalled(); - expect(onChange).not.toBeCalled(); + const sizeChanger = wrapper.container.querySelector( + '.rc-pagination-options-size-changer', + ); + fireEvent.click(sizeChanger); + const input = sizeChanger.querySelector('input'); + fireEvent.keyDown(input, { key: 'Down', keyCode: 40, which: 40 }); + fireEvent.keyDown(input, { key: 'Enter', keyCode: 13, which: 13 }); + expect(onShowSizeChange).not.toHaveBeenCalled(); + expect(onChange).not.toHaveBeenCalled(); }); it('current should equal to the current in onShowSizeChange', () => { - const sizeChanger = wrapper - .find('.rc-pagination-options-size-changer') - .at(0); - sizeChanger.simulate('click'); - const input = sizeChanger.find('input'); - input.simulate('keyDown', { key: 'Down', keyCode: 40, which: 40 }); - input.simulate('keyDown', { key: 'Down', keyCode: 40, which: 40 }); - input.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 }); - expect(onShowSizeChange).toHaveBeenLastCalledWith( - // wrapper.state().current, - 1, - 20, + const sizeChanger = wrapper.container.querySelector( + '.rc-pagination-options-size-changer', ); + fireEvent.click(sizeChanger); + const input = sizeChanger.querySelector('input'); + fireEvent.keyDown(input, { key: 'Down', keyCode: 40, which: 40 }); + fireEvent.keyDown(input, { key: 'Down', keyCode: 40, which: 40 }); + fireEvent.keyDown(input, { key: 'Enter', keyCode: 13, which: 13 }); + expect(onShowSizeChange).toHaveBeenLastCalledWith(1, 20); expect(onChange).toHaveBeenLastCalledWith(1, 20); }); it('when total is 0, pager should show `1` and being disabled', () => { - const itemButton = wrapper.find('.rc-pagination-item'); - expect(itemButton.hasClass('rc-pagination-item-disabled')).toBe(true); - expect(itemButton.text()).toBe('1'); + const itemButton = wrapper.container.querySelector('.rc-pagination-item'); + expect(itemButton).toHaveClass('rc-pagination-item-disabled'); + expect(itemButton).toHaveTextContent('1'); }); it('when total is 0, `from` and `to` should be 0', () => { - const totalText = wrapper.find('.rc-pagination-total-text'); - expect(totalText.text()).toBe('0 - 0 of 0 items'); + expect( + wrapper.container.querySelector('.rc-pagination-total-text'), + ).toHaveTextContent('0 - 0 of 0 items'); }); it('size changer show logic', () => { - const wrapper1 = mount( + const wrapper1 = render( , ); - expect(wrapper1.exists('.rc-pagination-options-size-changer')).toBe(false); - const wrapper2 = mount( + expect( + wrapper1.container.querySelector('.rc-pagination-options-size-changer'), + ).toBeFalsy(); + const wrapper2 = render( , ); - expect(wrapper2.exists('.rc-pagination-options-size-changer')).toBe(true); - const wrapper3 = mount( + expect( + wrapper2.container.querySelector('.rc-pagination-options-size-changer'), + ).toBeTruthy(); + const wrapper3 = render( , ); - expect(wrapper3.exists('.rc-pagination-options-size-changer')).toBe(false); - const wrapper4 = mount( + expect( + wrapper3.container.querySelector('.rc-pagination-options-size-changer'), + ).toBeFalsy(); + const wrapper4 = render( , ); - expect(wrapper4.exists('.rc-pagination-options-size-changer')).toBe(true); + expect( + wrapper4.container.querySelector('.rc-pagination-options-size-changer'), + ).toBeTruthy(); }); it('totalBoundaryShowSizeChanger works', () => { - const wrapper1 = mount( + const wrapper1 = render( , ); - expect(wrapper1.exists('.rc-pagination-options-size-changer')).toBe(false); - const wrapper2 = mount( + expect( + wrapper1.container.querySelector('.rc-pagination-options-size-changer'), + ).toBeFalsy(); + const wrapper2 = render( , ); - expect(wrapper2.exists('.rc-pagination-options-size-changer')).toBe(true); - const wrapper3 = mount( + expect( + wrapper2.container.querySelector('.rc-pagination-options-size-changer'), + ).toBeTruthy(); + const wrapper3 = render( { totalBoundaryShowSizeChanger={100} />, ); - expect(wrapper3.exists('.rc-pagination-options-size-changer')).toBe(false); - const wrapper4 = mount( + expect( + wrapper3.container.querySelector('.rc-pagination-options-size-changer'), + ).toBeFalsy(); + const wrapper4 = render( { totalBoundaryShowSizeChanger={100} />, ); - expect(wrapper4.exists('.rc-pagination-options-size-changer')).toBe(true); + expect( + wrapper4.container.querySelector('.rc-pagination-options-size-changer'), + ).toBeTruthy(); }); }); @@ -461,7 +489,7 @@ describe('should emit onChange when total is string', () => { const onChange = jest.fn(); beforeEach(() => { - wrapper = mount( + wrapper = render( , ); }); @@ -472,19 +500,20 @@ describe('should emit onChange when total is string', () => { }); it('onChange should be called when click page', () => { - const pagers = wrapper.find('.rc-pagination-item-3'); - const page1 = pagers.at(0); - page1.simulate('click'); - expect(onChange).toBeCalledWith(3, 10); + const pagers = wrapper.container.querySelectorAll('.rc-pagination-item-3'); + fireEvent.click(pagers[0]); + expect(onChange).toHaveBeenCalledWith(3, 10); }); }); describe('keyboard support', () => { let wrapper; const onChange = jest.fn(); + const $$ = (selector) => wrapper.container.querySelectorAll(selector); + const $ = (selector) => wrapper.container.querySelector(selector); beforeEach(() => { - wrapper = mount( + wrapper = render( , ); }); @@ -495,55 +524,47 @@ describe('keyboard support', () => { }); it('should work for prev page', () => { - const prevButton = wrapper.find('li.rc-pagination-prev'); - expect(prevButton.exists()).toBeTruthy(); + const prevButton = $('li.rc-pagination-prev'); + expect(prevButton).toBeTruthy(); - prevButton.simulate('click'); - prevButton.simulate('click'); + fireEvent.click(prevButton); + fireEvent.click(prevButton); - prevButton.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 }); - prevButton.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 }); + fireEvent.keyDown(prevButton, { key: 'Enter', keyCode: 13, which: 13 }); + fireEvent.keyDown(prevButton, { key: 'Enter', keyCode: 13, which: 13 }); expect(onChange).toHaveBeenLastCalledWith(46, 10); }); it('should work for next page', () => { - const nextButton = wrapper.find('li.rc-pagination-next'); - expect(nextButton.exists()).toBeTruthy(); + const nextButton = $('li.rc-pagination-next'); + expect(nextButton).toBeTruthy(); - nextButton.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 }); - nextButton.simulate('keyDown', { key: 'Enter', keyCode: 13, which: 13 }); + fireEvent.keyDown(nextButton, { key: 'Enter', keyCode: 13, which: 13 }); + fireEvent.keyDown(nextButton, { key: 'Enter', keyCode: 13, which: 13 }); - nextButton.simulate('click'); - nextButton.simulate('click'); + fireEvent.click(nextButton); + fireEvent.click(nextButton); expect(onChange).toHaveBeenLastCalledWith(54, 10); }); it('should work for jump prev page', () => { - const jumpPrevButton = wrapper.find('li.rc-pagination-jump-prev'); - expect(jumpPrevButton.exists()).toBeTruthy(); + const jumpPrevButton = $('li.rc-pagination-jump-prev'); + expect(jumpPrevButton).toBeTruthy(); - jumpPrevButton.simulate('keyDown', { - key: 'Enter', - keyCode: 13, - which: 13, - }); - jumpPrevButton.simulate('click'); + fireEvent.keyDown(jumpPrevButton, { key: 'Enter', keyCode: 13, which: 13 }); + fireEvent.click(jumpPrevButton); expect(onChange).toHaveBeenLastCalledWith(40, 10); }); it('should work for jump next page', () => { - const jumpNextButton = wrapper.find('li.rc-pagination-jump-next'); - expect(jumpNextButton.exists()).toBeTruthy(); - - jumpNextButton.simulate('click'); - jumpNextButton.simulate('keyDown', { - key: 'Enter', - keyCode: 13, - which: 13, - }); + const jumpNextButton = $('li.rc-pagination-jump-next'); + expect(jumpNextButton).toBeTruthy(); + + fireEvent.click(jumpNextButton); + fireEvent.keyDown(jumpNextButton, { key: 'Enter', keyCode: 13, which: 13 }); expect(onChange).toHaveBeenLastCalledWith(60, 10); }); @@ -551,37 +572,23 @@ describe('keyboard support', () => { describe('select in sequence', () => { const serializeCls = (items) => - items.map((item) => - String(item.prop('className')).replaceAll('rc-pagination-', ''), + Array.from(items).map((item) => + item.getAttribute('class').replaceAll('rc-pagination-', ''), ); - class Demo extends React.Component { - state = { current: 1 }; - - changeHandle = (current) => this.setState({ current }); - - render() { - return ( - - ); - } - } - function sequenceSelector(total) { describe(`should sequence select ${total} pages`, () => { - const wrapper = mount(); - const cls = serializeCls(wrapper.find('li')); + const { container } = render(); + const cls = serializeCls(container.querySelectorAll('li')); expect(cls).toMatchSnapshot(); const pages = Math.floor((total - 1) / 10) + 1; for (let i = 2; i <= pages; i++) { it(`should select page ${i}`, () => { - wrapper.setState({ current: i }); - const cls = serializeCls(wrapper.find('li')); + const { container } = render( + , + ); + const cls = serializeCls(container.querySelectorAll('li')); expect(cls).toMatchSnapshot(); }); } From 559a01c494a0f147cfed0c95be323bae4bd25abe Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 29 Nov 2023 12:07:36 +0800 Subject: [PATCH 12/14] chore: update --- tests/index.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/index.test.js b/tests/index.test.js index 9ceb5135..0a5ebd57 100644 --- a/tests/index.test.js +++ b/tests/index.test.js @@ -370,7 +370,7 @@ describe('current value on onShowSizeChange when total is 0', () => { onChange.mockReset(); }); - it('should call onShowSizeChange when no change', () => { + it('should not call onShowSizeChange when no change', () => { const sizeChanger = wrapper.container.querySelector( '.rc-pagination-options-size-changer', ); From ac96f2c6a878098082c5ebd29b195fc24c5a9f68 Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 29 Nov 2023 12:11:31 +0800 Subject: [PATCH 13/14] chore: migrate .js => .tsx --- tests/__snapshots__/{demo.test.js.snap => demo.test.tsx.snap} | 0 .../__snapshots__/{index.test.js.snap => index.test.tsx.snap} | 0 .../{options.test.js.snap => options.test.tsx.snap} | 0 tests/{data-aria.test.js => data-aria.test.tsx} | 0 tests/{demo.test.js => demo.test.tsx} | 1 + tests/{index.test.js => index.test.tsx} | 3 ++- tests/{itemRender.test.js => itemRender.test.tsx} | 0 tests/{jumper.test.js => jumper.test.tsx} | 1 + tests/{options.test.js => options.test.tsx} | 1 + tests/{simple.test.js => simple.test.tsx} | 0 tests/{sizer.test.js => sizer.test.tsx} | 0 tests/{two-pagination.test.js => two-pagination.test.tsx} | 0 12 files changed, 5 insertions(+), 1 deletion(-) rename tests/__snapshots__/{demo.test.js.snap => demo.test.tsx.snap} (100%) rename tests/__snapshots__/{index.test.js.snap => index.test.tsx.snap} (100%) rename tests/__snapshots__/{options.test.js.snap => options.test.tsx.snap} (100%) rename tests/{data-aria.test.js => data-aria.test.tsx} (100%) rename tests/{demo.test.js => demo.test.tsx} (94%) rename tests/{index.test.js => index.test.tsx} (99%) rename tests/{itemRender.test.js => itemRender.test.tsx} (100%) rename tests/{jumper.test.js => jumper.test.tsx} (99%) rename tests/{options.test.js => options.test.tsx} (97%) rename tests/{simple.test.js => simple.test.tsx} (100%) rename tests/{sizer.test.js => sizer.test.tsx} (100%) rename tests/{two-pagination.test.js => two-pagination.test.tsx} (100%) diff --git a/tests/__snapshots__/demo.test.js.snap b/tests/__snapshots__/demo.test.tsx.snap similarity index 100% rename from tests/__snapshots__/demo.test.js.snap rename to tests/__snapshots__/demo.test.tsx.snap diff --git a/tests/__snapshots__/index.test.js.snap b/tests/__snapshots__/index.test.tsx.snap similarity index 100% rename from tests/__snapshots__/index.test.js.snap rename to tests/__snapshots__/index.test.tsx.snap diff --git a/tests/__snapshots__/options.test.js.snap b/tests/__snapshots__/options.test.tsx.snap similarity index 100% rename from tests/__snapshots__/options.test.js.snap rename to tests/__snapshots__/options.test.tsx.snap diff --git a/tests/data-aria.test.js b/tests/data-aria.test.tsx similarity index 100% rename from tests/data-aria.test.js rename to tests/data-aria.test.tsx diff --git a/tests/demo.test.js b/tests/demo.test.tsx similarity index 94% rename from tests/demo.test.js rename to tests/demo.test.tsx index 43021f36..bca40e84 100644 --- a/tests/demo.test.js +++ b/tests/demo.test.tsx @@ -1,6 +1,7 @@ import { render } from '@testing-library/react'; import fs from 'fs'; import path from 'path'; +import * as React from 'react'; const exampleDir = path.resolve(__dirname, '../docs/examples'); const files = fs diff --git a/tests/index.test.js b/tests/index.test.tsx similarity index 99% rename from tests/index.test.js rename to tests/index.test.tsx index 0a5ebd57..16f0480e 100644 --- a/tests/index.test.js +++ b/tests/index.test.tsx @@ -490,6 +490,7 @@ describe('should emit onChange when total is string', () => { beforeEach(() => { wrapper = render( + // @ts-ignore , ); }); @@ -572,7 +573,7 @@ describe('keyboard support', () => { describe('select in sequence', () => { const serializeCls = (items) => - Array.from(items).map((item) => + Array.from(items).map((item: HTMLElement) => item.getAttribute('class').replaceAll('rc-pagination-', ''), ); diff --git a/tests/itemRender.test.js b/tests/itemRender.test.tsx similarity index 100% rename from tests/itemRender.test.js rename to tests/itemRender.test.tsx diff --git a/tests/jumper.test.js b/tests/jumper.test.tsx similarity index 99% rename from tests/jumper.test.js rename to tests/jumper.test.tsx index 2db95aef..63906325 100644 --- a/tests/jumper.test.js +++ b/tests/jumper.test.tsx @@ -1,5 +1,6 @@ import { render, fireEvent } from '@testing-library/react'; import Pagination from '../src'; +import * as React from 'react'; describe('Pagination with jumper', () => { let wrapper; diff --git a/tests/options.test.js b/tests/options.test.tsx similarity index 97% rename from tests/options.test.js rename to tests/options.test.tsx index ceb111c8..156230ce 100644 --- a/tests/options.test.js +++ b/tests/options.test.tsx @@ -2,6 +2,7 @@ import { render } from '@testing-library/react'; import Select from 'rc-select'; import zhCN from '../src/locale/zh_CN'; import Options from '../src/Options'; +import * as React from 'react'; const WrapperOptions = (props) => { return ( diff --git a/tests/simple.test.js b/tests/simple.test.tsx similarity index 100% rename from tests/simple.test.js rename to tests/simple.test.tsx diff --git a/tests/sizer.test.js b/tests/sizer.test.tsx similarity index 100% rename from tests/sizer.test.js rename to tests/sizer.test.tsx diff --git a/tests/two-pagination.test.js b/tests/two-pagination.test.tsx similarity index 100% rename from tests/two-pagination.test.js rename to tests/two-pagination.test.tsx From 745be0b66b51ebb9f6b227b6eb44683cf4c46437 Mon Sep 17 00:00:00 2001 From: wuxh Date: Wed, 29 Nov 2023 12:22:38 +0800 Subject: [PATCH 14/14] chore: supplement TS description --- src/interface.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/interface.ts b/src/interface.ts index 56ec86c6..cdc5776d 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -50,7 +50,9 @@ export interface PaginationData { jumpNextIcon: React.ComponentType | React.ReactNode; } -export interface PaginationProps extends Partial { +export interface PaginationProps + extends Partial, + React.AriaAttributes { onChange?: (page: number, pageSize: number) => void; onShowSizeChange?: (current: number, size: number) => void; itemRender?: ( @@ -59,6 +61,9 @@ export interface PaginationProps extends Partial { element: React.ReactNode, ) => React.ReactNode; showTotal?: (total: number, range: [number, number]) => React.ReactNode; + + // WAI-ARIA + role?: React.AriaRole | undefined; } export interface PaginationState { current: number;