import React, { useEffect } from 'react'; import type { ModalProps } from '..'; import Modal from '..'; import { resetWarned } from '../../_util/warning'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { fireEvent, render } from '../../../tests/utils'; jest.mock('rc-util/lib/Portal'); const ModalTester: React.FC = (props) => { const [open, setOpen] = React.useState(false); const container = React.useRef(null); useEffect(() => { setOpen(true); }, []); return (
Here is content of Modal
); }; describe('Modal', () => { mountTest(Modal); rtlTest(Modal); it('support closeIcon', () => { render(closeIcon} open />); expect(document.body.querySelectorAll('.ant-modal-root')[0]).toMatchSnapshot(); }); it('support hide close button when setting closeIcon to null or false', () => { const { baseElement, rerender } = render(); expect(baseElement.querySelector('.ant-modal-close')).toBeFalsy(); rerender(); expect(baseElement.querySelector('.ant-modal-close')).toBeFalsy(); }); it('render correctly', () => { const { asFragment } = render(); expect(asFragment().firstChild).toMatchSnapshot(); }); it('render without footer', () => { const { asFragment } = render(); expect(asFragment().firstChild).toMatchSnapshot(); }); it('onCancel should be called', () => { const onCancel = jest.fn(); render(); fireEvent.click(document.body.querySelectorAll('.ant-btn')[0]); expect(onCancel).toHaveBeenCalled(); }); it('onOk should be called', () => { const onOk = jest.fn(); render(); const btns = document.body.querySelectorAll('.ant-btn'); fireEvent.click(btns[btns.length - 1]); expect(onOk).toHaveBeenCalled(); }); it('danger type', () => { render(); const btns = document.body.querySelectorAll('.ant-btn'); expect(btns[btns.length - 1].classList.contains('ant-btn-dangerous')).toBeTruthy(); }); it('mouse position', () => { const Demo = () => { const [open, setOpen] = React.useState(false); const containerRef = React.useRef(null); return (
setOpen(true)}> click me
containerRef.current!} />
); }; const { container } = render(); fireEvent.click(container.querySelectorAll('#trigger')[0]); expect( (container.querySelectorAll('.ant-modal')[0] as HTMLDivElement).style.transformOrigin, ).toBeTruthy(); }); it('custom mouse position', () => { const Demo = () => { const containerRef = React.useRef(null); return (
containerRef.current!} mousePosition={{ x: 100, y: 100 }} />
); }; const { container } = render(); expect( (container.querySelectorAll('.ant-modal')[0] as HTMLDivElement).style.transformOrigin, ).toBe('100px 100px'); }); it('deprecated warning', () => { resetWarned(); const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); render(); expect(errSpy).toHaveBeenCalledWith( 'Warning: [antd: Modal] `visible` is deprecated. Please use `open` instead.', ); expect(document.querySelector('.ant-modal')).toBeTruthy(); errSpy.mockRestore(); }); it('should not render footer if null', () => { render(); expect(document.querySelector('.ant-modal-footer')).toBeFalsy(); }); it('should render custom footer', () => { render(footer
} />); expect(document.querySelector('.custom-footer')).toBeTruthy(); }); it('Should custom footer function work', () => { render( ( <>
footer-ele
)} />, ); expect(document.querySelector('.custom-footer-ele')).toBeTruthy(); }); });