From 99eb8778289370e026f51d4d55a908dc281154ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Thu, 5 Feb 2026 22:13:14 +0800 Subject: [PATCH] test(modal): add mouseDown event before click in test (#56874) * test(modal): add mouseDown event before click in test Co-Authored-By: Claude Opus 4.5 * test(modal): add mouseDown event before click in confirm test Co-Authored-By: Claude Opus 4.5 * test(modal): improve confirm test event firing and timer management - Add mouseDown event before click for mask interaction - Use fireEvent consistently instead of direct click() - Properly setup and cleanup fake timers Co-Authored-By: Claude Opus 4.5 --------- Co-authored-by: Claude Opus 4.5 --- components/modal/__tests__/confirm.test.tsx | 31 +++++++++++++++++---- components/modal/__tests__/hook.test.tsx | 2 ++ 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/components/modal/__tests__/confirm.test.tsx b/components/modal/__tests__/confirm.test.tsx index 50074e7fae..f99c844a24 100644 --- a/components/modal/__tests__/confirm.test.tsx +++ b/components/modal/__tests__/confirm.test.tsx @@ -678,6 +678,8 @@ describe('Modal.confirm triggers callbacks correctly', () => { describe('the callback close should be a method when onCancel has a close parameter', () => { (['confirm', 'info', 'success', 'warning', 'error'] as const).forEach((type) => { it(`click the close icon to trigger ${type} onCancel`, async () => { + jest.useFakeTimers(); + const mock = jest.fn(); Modal[type]?.({ @@ -688,17 +690,21 @@ describe('Modal.confirm triggers callbacks correctly', () => { await waitFakeTimer(); expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1); - $$('.ant-modal-close')[0].click(); + fireEvent.click($$('.ant-modal-close')[0]); await waitFakeTimer(); expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0); expect(mock).toHaveBeenCalledWith(expect.any(Function)); + + jest.useRealTimers(); }); }); (['confirm', 'info', 'success', 'warning', 'error'] as const).forEach((type) => { it(`press ESC to trigger ${type} onCancel`, async () => { + jest.useFakeTimers(); + const mock = jest.fn(); Modal[type]?.({ @@ -709,17 +715,21 @@ describe('Modal.confirm triggers callbacks correctly', () => { await waitFakeTimer(); expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1); - fireEvent.keyDown(window, { key: 'Escape' }); + fireEvent.keyDown($$(`.ant-modal-confirm-${type}`)[0], { key: 'Escape' }); await waitFakeTimer(0); expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0); expect(mock).toHaveBeenCalledWith(expect.any(Function)); + + jest.useRealTimers(); }); }); (['confirm', 'info', 'success', 'warning', 'error'] as const).forEach((type) => { it(`click the mask to trigger ${type} onCancel`, async () => { + jest.useFakeTimers(); + const mock = jest.fn(); Modal[type]?.({ @@ -732,17 +742,22 @@ describe('Modal.confirm triggers callbacks correctly', () => { expect($$('.ant-modal-mask')).toHaveLength(1); expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1); - $$('.ant-modal-wrap')[0].click(); + fireEvent.mouseDown($$('.ant-modal-wrap')[0]); + fireEvent.click($$('.ant-modal-wrap')[0]); await waitFakeTimer(); expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0); expect(mock).toHaveBeenCalledWith(expect.any(Function)); + + jest.useRealTimers(); }); }); }); it('confirm modal click Cancel button close callback is a function', async () => { + jest.useFakeTimers(); + const mock = jest.fn(); Modal.confirm({ @@ -751,13 +766,17 @@ describe('Modal.confirm triggers callbacks correctly', () => { await waitFakeTimer(); - $$('.ant-modal-confirm-btns > .ant-btn')[0].click(); + fireEvent.click($$('.ant-modal-confirm-btns > .ant-btn')[0]); await waitFakeTimer(); expect(mock).toHaveBeenCalledWith(expect.any(Function)); + + jest.useRealTimers(); }); it('close can close modal when onCancel has a close parameter', async () => { + jest.useFakeTimers(); + Modal.confirm({ onCancel: (close) => close(), }); @@ -766,10 +785,12 @@ describe('Modal.confirm triggers callbacks correctly', () => { expect($$('.ant-modal-confirm-confirm')).toHaveLength(1); - $$('.ant-modal-confirm-btns > .ant-btn')[0].click(); + fireEvent.click($$('.ant-modal-confirm-btns > .ant-btn')[0]); await waitFakeTimer(); expect($$('.ant-modal-confirm-confirm')).toHaveLength(0); + + jest.useRealTimers(); }); // https://github.com/ant-design/ant-design/issues/37461 diff --git a/components/modal/__tests__/hook.test.tsx b/components/modal/__tests__/hook.test.tsx index 4a738fa45f..9fd221e8e1 100644 --- a/components/modal/__tests__/hook.test.tsx +++ b/components/modal/__tests__/hook.test.tsx @@ -186,6 +186,7 @@ describe('Modal.hook', () => { expect(cancelCount).toEqual(1); // click cancel btn, trigger onCancel fireEvent.click(container.querySelectorAll('.open-hook-modal-btn')[0]); + fireEvent.mouseDown(document.body.querySelectorAll('.ant-modal-wrap')[0]); fireEvent.click(document.body.querySelectorAll('.ant-modal-wrap')[0]); expect(cancelCount).toEqual(2); // click modal wrapper, trigger onCancel }); @@ -322,6 +323,7 @@ describe('Modal.hook', () => { expect(document.body.querySelectorAll('.ant-modal-confirm-confirm')).toHaveLength(1); // Click mask to close + fireEvent.mouseDown(document.body.querySelectorAll('.ant-modal-wrap')[0]); fireEvent.click(document.body.querySelectorAll('.ant-modal-wrap')[0]); await waitFakeTimer();