From 5f2a6479e88f772319a9dd4408b79b482fd8c4c2 Mon Sep 17 00:00:00 2001 From: Pareder Date: Wed, 2 Sep 2026 16:24:01 +0300 Subject: [PATCH] feat: refactor Footer component to be accessible --- assets/index.less | 5 -- src/PickerInput/Popup/Footer.tsx | 50 ++++++++++++------- src/PickerInput/RangePicker.tsx | 4 ++ src/PickerInput/SinglePicker.tsx | 4 ++ src/PickerInput/context.tsx | 9 +++- src/PickerInput/hooks/useFilledProps.ts | 8 ++- src/interface.tsx | 3 ++ tests/components.spec.tsx | 66 ++++++++++++++++++++++++- tests/multiple.spec.tsx | 8 +-- tests/new-range.spec.tsx | 36 +++++++------- tests/picker.spec.tsx | 28 +++++------ tests/range.spec.tsx | 42 ++++++++-------- tests/util/commonUtil.tsx | 2 +- 13 files changed, 179 insertions(+), 86 deletions(-) diff --git a/assets/index.less b/assets/index.less index 48522d422..ae3b20dec 100644 --- a/assets/index.less +++ b/assets/index.less @@ -191,11 +191,6 @@ margin: 0; padding: 0; overflow: hidden; - list-style: none; - - > li { - display: inline-block; - } } &-ok { diff --git a/src/PickerInput/Popup/Footer.tsx b/src/PickerInput/Popup/Footer.tsx index ba15dba3d..677c3ea78 100644 --- a/src/PickerInput/Popup/Footer.tsx +++ b/src/PickerInput/Popup/Footer.tsx @@ -27,6 +27,14 @@ export interface FooterProps { onNow: (now: DateType) => void; } +/** + * `type` is a native `button` attribute. Custom components (e.g. `antd` Button) use `type` + * as their own variant prop, so only pass it when the intrinsic element is rendered. + */ +function getNativeTypeProps(Component: React.ComponentType | string) { + return Component === 'button' ? ({ type: 'button' } as const) : null; +} + export default function Footer(props: FooterProps) { const { mode, @@ -45,7 +53,9 @@ export default function Footer(props: FooterProps) { const { prefixCls, locale, - button: Button = 'button', + button = 'button', + nowButton, + okButton, classNames, styles, } = React.useContext(PickerContext); @@ -70,35 +80,37 @@ export default function Footer(props: FooterProps) { } }; - const nowPrefixCls = `${prefixCls}-now`; - const nowBtnPrefixCls = `${nowPrefixCls}-btn`; + const NowButton = nowButton || button; + const OkButton = okButton || button; const presetNode = showNow && ( -
  • - - {internalMode === 'date' ? locale.today : locale.now} - -
    • + + {internalMode === 'date' ? locale.today : locale.now} + ); // >>> OK const okNode = needConfirm && ( -
  • - -
    • + + {locale.ok} + ); const rangeNode = (presetNode || okNode) && ( -
      +
      {presetNode} {okNode} -
    + ); // ======================== Render ======================== diff --git a/src/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx index 36c2dda2e..d9e8f12c8 100644 --- a/src/PickerInput/RangePicker.tsx +++ b/src/PickerInput/RangePicker.tsx @@ -706,6 +706,8 @@ function RangePicker( locale, generateConfig, button: components.button, + nowButton: components.nowButton, + okButton: components.okButton, input: components.input, classNames: mergedClassNames, styles: mergedStyles, @@ -715,6 +717,8 @@ function RangePicker( locale, generateConfig, components.button, + components.nowButton, + components.okButton, components.input, mergedClassNames, mergedStyles, diff --git a/src/PickerInput/SinglePicker.tsx b/src/PickerInput/SinglePicker.tsx index 96f221906..3b13bdc7c 100644 --- a/src/PickerInput/SinglePicker.tsx +++ b/src/PickerInput/SinglePicker.tsx @@ -648,6 +648,8 @@ function Picker( locale, generateConfig, button: components.button, + nowButton: components.nowButton, + okButton: components.okButton, input: components.input, classNames: mergedClassNames, styles: mergedStyles, @@ -657,6 +659,8 @@ function Picker( locale, generateConfig, components.button, + components.nowButton, + components.okButton, components.input, mergedClassNames, mergedStyles, diff --git a/src/PickerInput/context.tsx b/src/PickerInput/context.tsx index 6f3c66aab..d3dc9fb56 100644 --- a/src/PickerInput/context.tsx +++ b/src/PickerInput/context.tsx @@ -7,8 +7,15 @@ export interface PickerContextProps { prefixCls: string; locale: Locale; generateConfig: GenerateConfig; - /** Customize button component */ + /** + * Customize button component. + * @deprecated Please use `nowButton` and `okButton` instead. + */ button?: Components['button']; + /** Customize the `now` / `today` button component */ + nowButton?: Components['nowButton']; + /** Customize the `ok` button component */ + okButton?: Components['okButton']; input?: Components['input']; classNames: FilledClassNames; styles: FilledStyles; diff --git a/src/PickerInput/hooks/useFilledProps.ts b/src/PickerInput/hooks/useFilledProps.ts index 8cdd895cd..52ba0eb59 100644 --- a/src/PickerInput/hooks/useFilledProps.ts +++ b/src/PickerInput/hooks/useFilledProps.ts @@ -148,8 +148,9 @@ export default function useFilledProps< ); // ======================= Warning ======================== - if (process.env.NODE_ENV !== 'production' && picker === 'time') { + if (process.env.NODE_ENV !== 'production') { if ( + picker === 'time' && ['disabledHours', 'disabledMinutes', 'disabledSeconds'].some((key) => (props as any)[key]) ) { warning( @@ -157,6 +158,11 @@ export default function useFilledProps< `'disabledHours', 'disabledMinutes', 'disabledSeconds' will be removed in the next major version, please use 'disabledTime' instead.`, ); } + + warning( + !components.button, + `'components.button' is deprecated. Please use 'components.nowButton' and 'components.okButton' instead.`, + ); } // ======================== Props ========================= diff --git a/src/interface.tsx b/src/interface.tsx index 63a690d06..7bdf69506 100644 --- a/src/interface.tsx +++ b/src/interface.tsx @@ -275,7 +275,10 @@ export interface SharedPanelProps { export type Components = Partial< Record>> & { + /** @deprecated Please use `nowButton` and `okButton` instead. Fallback for both when set. */ button?: React.ComponentType | string; + nowButton?: React.ComponentType | string; + okButton?: React.ComponentType | string; input?: React.ComponentType | string; } >; diff --git a/tests/components.spec.tsx b/tests/components.spec.tsx index f53965554..b113cda28 100644 --- a/tests/components.spec.tsx +++ b/tests/components.spec.tsx @@ -1,9 +1,15 @@ +import { resetWarned } from '@rc-component/util'; import { render } from '@testing-library/react'; import MockDate from 'mockdate'; import React from 'react'; import { DayPicker, DayRangePicker, getDay } from './util/commonUtil'; describe('Picker.Components', () => { + beforeEach(() => { + resetWarned(); + jest.clearAllMocks(); + }); + beforeAll(() => { MockDate.set(getDay('1990-09-03 00:00:00').toDate()); }); @@ -26,7 +32,7 @@ describe('Picker.Components', () => { good: [null, null], }} components={{ - button: Button, + okButton: Button, }} picker="time" open @@ -35,5 +41,63 @@ describe('Picker.Components', () => { expect(document.querySelector('.rc-picker-footer').querySelectorAll('h1')).toHaveLength(1); }); + + it(`${name} legacy 'button'`, () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const Component = component as any; + const Button: React.FC = (props) =>

    ; + + render( + , + ); + + // Fallback for both 'nowButton' and 'okButton' + expect(document.querySelector('.rc-picker-footer').querySelectorAll('h1')).toHaveLength(2); + expect(document.querySelector('.rc-picker-now').tagName).toBe('H1'); + expect(document.querySelector('.rc-picker-ok').tagName).toBe('H1'); + + // Legacy 'button' should not receive the native 'type' attribute + expect(document.querySelector('.rc-picker-ok')).not.toHaveAttribute('type'); + + expect(errorSpy).toHaveBeenCalledWith( + "Warning: 'components.button' is deprecated. Please use 'components.nowButton' and 'components.okButton' instead.", + ); + + errorSpy.mockRestore(); + }); + + it(`${name} 'nowButton' and 'okButton' override legacy 'button'`, () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + const Component = component as any; + const Legacy: React.FC = (props) =>

    ; + const NowButton: React.FC = (props) =>

    ; + const OkButton: React.FC = (props) =>

    ; + + render( + , + ); + + expect(document.querySelector('.rc-picker-footer').querySelectorAll('h1')).toHaveLength(0); + expect(document.querySelector('.rc-picker-now').tagName).toBe('H2'); + expect(document.querySelector('.rc-picker-ok').tagName).toBe('H3'); + + errorSpy.mockRestore(); + }); }); }); diff --git a/tests/multiple.spec.tsx b/tests/multiple.spec.tsx index 7e8206e22..25cc13433 100644 --- a/tests/multiple.spec.tsx +++ b/tests/multiple.spec.tsx @@ -49,7 +49,7 @@ describe('Picker.Multiple', () => { expect(isOpen()).toBeTruthy(); // Confirm - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(onChange).toHaveBeenCalledWith(expect.anything(), [ '1990-09-01', '1990-09-03', @@ -72,7 +72,7 @@ describe('Picker.Multiple', () => { selectCell(3); // Confirm - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-01', '1990-09-05']); }); @@ -158,7 +158,7 @@ describe('Picker.Multiple', () => { expect(container.querySelectorAll('.rc-picker-selection-item')).toHaveLength(1); // Confirm - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(onChange).toHaveBeenCalledWith(expect.anything(), ['2000-01-28']); }); @@ -293,7 +293,7 @@ describe('Picker.Multiple', () => { ); // Confirm - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1998-10-23']); }); }); diff --git a/tests/new-range.spec.tsx b/tests/new-range.spec.tsx index 24cfbe0a5..ad3a8052b 100644 --- a/tests/new-range.spec.tsx +++ b/tests/new-range.spec.tsx @@ -397,7 +397,7 @@ describe('NewPicker.Range', () => { expect(onCalendarChange).toHaveBeenCalled(); // Check button disabled - expect(document.querySelector('.rc-picker-ok button')).toBeDisabled(); + expect(document.querySelector('.rc-picker-ok')).toBeDisabled(); }); it('not trigger on disabled all hours', () => { @@ -419,7 +419,7 @@ describe('NewPicker.Range', () => { expect(onCalendarChange).toHaveBeenCalled(); // Check button disabled - expect(document.querySelector('.rc-picker-ok button')).toBeDisabled(); + expect(document.querySelector('.rc-picker-ok')).toBeDisabled(); }); it('not trigger onChange if presets is invalidate', () => { @@ -460,10 +460,10 @@ describe('NewPicker.Range', () => { ); openPicker(container); - fireEvent.click(document.querySelector('.rc-picker-now-btn')); - fireEvent.click(document.querySelector('.rc-picker-now-btn')); + fireEvent.click(document.querySelector('.rc-picker-now')); + fireEvent.click(document.querySelector('.rc-picker-now')); - expect(document.querySelector('.rc-picker-now-btn-disabled')).toBeTruthy(); + expect(document.querySelector('.rc-picker-now')).toBeDisabled(); expect(onChange).not.toHaveBeenCalled(); expect(onCalendarChange).not.toHaveBeenCalled(); @@ -552,7 +552,7 @@ describe('NewPicker.Range', () => { value: '01:00:00', }, }); - expect(document.querySelector('.rc-picker-ok button')).not.toBeDisabled(); + expect(document.querySelector('.rc-picker-ok')).not.toBeDisabled(); // Disabled fireEvent.change(input, { @@ -560,7 +560,7 @@ describe('NewPicker.Range', () => { value: '00:00:00', }, }); - expect(document.querySelector('.rc-picker-ok button')).toBeDisabled(); + expect(document.querySelector('.rc-picker-ok')).toBeDisabled(); }); it('disabledDate provides info.type', () => { @@ -608,7 +608,7 @@ describe('NewPicker.Range', () => { onCalendarChange.mockReset(); // End field - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); selectCell(7); expect(onCalendarChange).toHaveBeenCalledWith( expect.anything(), @@ -661,14 +661,14 @@ describe('NewPicker.Range', () => { // Changed by click OK openPicker(container); selectCell(10); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(container.querySelectorAll('input')[0]).toHaveValue('1990-09-10'); // End time selectCell(15, 1); expect(onChange).not.toHaveBeenCalled(); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-10', '1990-10-15']); }); @@ -731,10 +731,10 @@ describe('NewPicker.Range', () => { const { container } = render(); openPicker(container); selectCell(15); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); selectCell(16); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(onChange).toHaveBeenCalledWith(expect.anything(), [ '1990-09-15 00:00:00', @@ -748,11 +748,11 @@ describe('NewPicker.Range', () => { expect(container.querySelectorAll('input')[0]).toHaveFocus(); expect(container.querySelectorAll('input')[1]).not.toHaveFocus(); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); openPicker(container, 1); expect(container.querySelectorAll('input')[1]).toHaveFocus(); selectCell(2); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(onChange).toHaveBeenCalledWith(expect.anything(), [ '1990-09-01 00:00:00', '1990-09-02 00:00:00', @@ -1391,8 +1391,8 @@ describe('NewPicker.Range', () => { const { container } = render(); openPicker(container); - fireEvent.click(document.querySelector('.rc-picker-now-btn')); - fireEvent.click(document.querySelector('.rc-picker-now-btn')); + fireEvent.click(document.querySelector('.rc-picker-now')); + fireEvent.click(document.querySelector('.rc-picker-now')); expect(onChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-03', '1990-09-03']); }); @@ -1422,12 +1422,12 @@ describe('NewPicker.Range', () => { // Start fireEvent.click(document.querySelectorAll('li.rc-picker-time-panel-cell')[2]); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); await waitFakeTimer(); // End fireEvent.click(document.querySelectorAll('li.rc-picker-time-panel-cell')[2]); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); await waitFakeTimer(); expect(onChange).toHaveBeenCalledWith(expect.anything(), [ diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index b33fa2fa4..61bcae27f 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -561,7 +561,7 @@ describe('Picker.Basic', () => { const onCalendarChange = jest.fn(); const { container } = render(); openPicker(container); - fireEvent.click(document.querySelector('.rc-picker-now-btn')); + fireEvent.click(document.querySelector('.rc-picker-now')); expect(isSame(onCalendarChange.mock.calls[0][0], '1990-09-03')).toBeTruthy(); }); @@ -571,10 +571,8 @@ describe('Picker.Basic', () => { true} showToday />, ); openPicker(container); - expect(document.querySelector('.rc-picker-now-btn')).toHaveClass( - 'rc-picker-now-btn-disabled', - ); - fireEvent.click(document.querySelector('.rc-picker-now-btn')); + expect(document.querySelector('.rc-picker-now')).toBeDisabled(); + fireEvent.click(document.querySelector('.rc-picker-now')); expect(onCalendarChange).not.toHaveBeenCalled(); }); @@ -582,7 +580,7 @@ describe('Picker.Basic', () => { it(`not works on ${name}`, () => { const { container } = render(); openPicker(container); - expect(document.querySelector('.rc-picker-now-btn')).toBeFalsy(); + expect(document.querySelector('.rc-picker-now')).toBeFalsy(); }); }); }); @@ -619,7 +617,7 @@ describe('Picker.Basic', () => { const onCalendarChange = jest.fn(); const { container } = render(); openPicker(container); - fireEvent.click(document.querySelector('.rc-picker-now > a')); + fireEvent.click(document.querySelector('.rc-picker-now')); expect( isSame(onCalendarChange.mock.calls[0][0], '1990-09-03 00:00:00', 'second'), @@ -632,7 +630,7 @@ describe('Picker.Basic', () => { , ); openPicker(container); - expect(document.querySelector('.rc-picker-now > a')).toBeFalsy(); + expect(document.querySelector('.rc-picker-now')).toBeFalsy(); }); it('datetime close showNow', () => { @@ -641,7 +639,7 @@ describe('Picker.Basic', () => { , ); openPicker(container); - expect(document.querySelector('.rc-picker-now > a')).toBeFalsy(); + expect(document.querySelector('.rc-picker-now')).toBeFalsy(); }); it('time should display now', () => { @@ -651,7 +649,7 @@ describe('Picker.Basic', () => { openPicker(container); expect(document.querySelector('.rc-picker-header')).toBeFalsy(); - fireEvent.click(document.querySelector('.rc-picker-now > a')); + fireEvent.click(document.querySelector('.rc-picker-now')); expect( isSame(onCalendarChange.mock.calls[0][0], '1990-09-03 00:00:00', 'second'), @@ -664,7 +662,7 @@ describe('Picker.Basic', () => { , ); openPicker(container); - expect(document.querySelector('.rc-picker-now > a')).toBeFalsy(); + expect(document.querySelector('.rc-picker-now')).toBeFalsy(); }); }); @@ -677,7 +675,7 @@ describe('Picker.Basic', () => { ); openPicker(container); - fireEvent.click(document.querySelector('.rc-picker-now > a')); + fireEvent.click(document.querySelector('.rc-picker-now')); expect( isSame(onCalendarChange.mock.calls[0][0], '1990-09-03 00:10:00', 'second'), @@ -855,7 +853,7 @@ describe('Picker.Basic', () => { ); openPicker(container); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(isSame(onChange.mock.calls[0][0], '2000-01-01 00:10:23')).toBeTruthy(); @@ -1642,7 +1640,7 @@ describe('Picker.Basic', () => { const onCalendarChange = jest.fn(); render(); - const submitBtn = document.querySelector('.rc-picker-ok button'); + const submitBtn = document.querySelector('.rc-picker-ok'); expect(submitBtn).toHaveAttribute('disabled'); selectCell('00'); @@ -1654,7 +1652,7 @@ describe('Picker.Basic', () => { ); onCalendarChange.mockReset(); - fireEvent.click(document.querySelector('.rc-picker-now-btn')); + fireEvent.click(document.querySelector('.rc-picker-now')); expect(submitBtn).not.toHaveAttribute('disabled'); expect(onCalendarChange).toHaveBeenCalledWith( expect.anything(), diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 43ebad195..8cfef8d2b 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -318,7 +318,7 @@ describe('Picker.Range', () => { fireEvent.click(baseElement.querySelectorAll('.rc-picker-input')[0]); expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy(); fireEvent.click(baseElement.querySelector('.rc-picker-cell-inner')); - fireEvent.click(baseElement.querySelector('.rc-picker-ok button')); + fireEvent.click(baseElement.querySelector('.rc-picker-ok')); act(() => { jest.runAllTimers(); @@ -333,7 +333,7 @@ describe('Picker.Range', () => { fireEvent.click(baseElement.querySelectorAll('.rc-picker-input')[1]); expect(baseElement.querySelector('.rc-picker-dropdown-hidden')).toBeFalsy(); selectCell(11); - fireEvent.click(baseElement.querySelector('.rc-picker-ok button')); + fireEvent.click(baseElement.querySelector('.rc-picker-ok')); act(() => { jest.runAllTimers(); @@ -613,7 +613,7 @@ describe('Picker.Range', () => { openPicker(container); selectCell(13); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); selectCell(23); matchValues(container, '1990-09-13 01:02:03', '1990-09-23 05:06:07'); @@ -935,7 +935,7 @@ describe('Picker.Range', () => { openPicker(container); // Not trigger when not value - expect(document.querySelector('.rc-picker-ok button').disabled).toBeTruthy(); + expect(document.querySelector('.rc-picker-ok').disabled).toBeTruthy(); expect(onCalendarChange).not.toHaveBeenCalled(); // Trigger when start Ok'd @@ -944,7 +944,7 @@ describe('Picker.Range', () => { expect(onCalendarChange).toHaveBeenCalledWith(expect.anything(), ['1990-09-11 00:00:00', ''], { range: 'start', }); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(onCalendarChange).toHaveBeenCalledWith( [expect.anything(), null], ['1990-09-11 00:00:00', ''], @@ -961,7 +961,7 @@ describe('Picker.Range', () => { ['1990-09-11 00:00:00', '1990-09-23 00:00:00'], { range: 'end' }, ); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(onOk).toHaveBeenCalledWith([expect.anything(), expect.anything()]); }); @@ -1117,11 +1117,11 @@ describe('Picker.Range', () => { openPicker(container); selectCell(15); fireEvent.click(findLast(document.querySelector('ul'), 'li')); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); selectCell(15); fireEvent.click(document.querySelector('ul').querySelector('li')); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(onChange).toHaveBeenCalledWith(expect.anything(), [ '1990-09-15 00:00:00', @@ -1141,10 +1141,10 @@ describe('Picker.Range', () => { ); openPicker(container); fireEvent.click(findLast(document.querySelector('ul'), 'li')); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); fireEvent.click(document.querySelector('ul').querySelectorAll('li')[2]); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(onChange).toHaveBeenCalledWith(expect.anything(), [start, end]); @@ -1676,14 +1676,14 @@ describe('Picker.Range', () => { openPicker(container); - expect(document.querySelector('.rc-picker-ok button').disabled).toBeTruthy(); + expect(document.querySelector('.rc-picker-ok').disabled).toBeTruthy(); fireEvent.click( document.querySelector('.rc-picker-time-panel-column').querySelectorAll('li')[6], ); expect(document.querySelectorAll('input')[0].value).toEqual('2020-07-24 06:00:00'); - expect(document.querySelector('.rc-picker-ok button').disabled).toBeTruthy(); + expect(document.querySelector('.rc-picker-ok').disabled).toBeTruthy(); }); // https://github.com/ant-design/ant-design/issues/26024 @@ -1724,10 +1724,10 @@ describe('Picker.Range', () => { openPicker(container); selectCell(24); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); fireEvent.click(document.querySelector('ul').querySelector('li')); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); matchValues(container, '1990-09-24 00:00:00', '1990-09-24 00:00:00'); }); @@ -1737,10 +1737,10 @@ describe('Picker.Range', () => { openPicker(container, 1); selectCell(24); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); fireEvent.click(document.querySelector('ul').querySelector('li')); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); matchValues(container, '1990-09-24 00:00:00', '1990-09-24 00:00:00'); }); @@ -2133,7 +2133,7 @@ describe('Picker.Range', () => { for (let i = 0; i < 2; i++) { selectCell(24); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); await waitFakeTimer(); } @@ -2345,7 +2345,7 @@ describe('Picker.Range', () => { // Confirm the start date. / 确认开始日期。 openPicker(container); selectCell(5); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); // Select an end date without confirming it. / 选择结束日期，但不确认。 selectCell(10); @@ -2375,7 +2375,7 @@ describe('Picker.Range', () => { // 确认 start，然后保留一个已修改但未确认的 end 值。 openPicker(container); selectCell(5); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); selectCell(10); expect(endInput).not.toHaveValue(''); @@ -2401,7 +2401,7 @@ describe('Picker.Range', () => { // 确认 start，借助允许为空的 end 切回，再次修改 start。 openPicker(container); selectCell(5); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); openPicker(container); selectCell(10); @@ -2422,7 +2422,7 @@ describe('Picker.Range', () => { openPicker(container); selectCell(5); - fireEvent.click(document.querySelector('.rc-picker-ok button')); + fireEvent.click(document.querySelector('.rc-picker-ok')); expect(document.activeElement).toBe(endInput); expect(container.querySelectorAll('.rc-picker-input')[1]).toHaveClass('rc-picker-input-active'); diff --git a/tests/util/commonUtil.tsx b/tests/util/commonUtil.tsx index 275e4fe7b..341800880 100644 --- a/tests/util/commonUtil.tsx +++ b/tests/util/commonUtil.tsx @@ -187,7 +187,7 @@ export function clickButton(type: string) { } export function confirmOK() { - fireEvent.click(document.querySelector('.rc-picker-ok > *')); + fireEvent.click(document.querySelector('.rc-picker-ok')); } export function clearValue() {