2023-01-07 21:15:59 +08:00
|
|
|
import React, { useEffect } from 'react';
|
2022-05-31 10:29:13 +08:00
|
|
|
import type { ModalProps } from '..';
|
2022-06-22 14:57:09 +08:00
|
|
|
import Modal from '..';
|
2022-05-31 10:29:13 +08:00
|
|
|
import mountTest from '../../../tests/shared/mountTest';
|
|
|
|
import rtlTest from '../../../tests/shared/rtlTest';
|
2022-06-22 14:57:09 +08:00
|
|
|
import { fireEvent, render } from '../../../tests/utils';
|
2022-08-23 16:55:57 +08:00
|
|
|
import { resetWarned } from '../../_util/warning';
|
2022-05-31 10:29:13 +08:00
|
|
|
|
2023-06-07 21:59:21 +08:00
|
|
|
jest.mock('rc-util/lib/Portal');
|
|
|
|
|
2023-01-07 21:15:59 +08:00
|
|
|
const ModalTester: React.FC<ModalProps> = (props) => {
|
|
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
const container = React.useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
|
|
setOpen(true);
|
|
|
|
}, []);
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div ref={container} />
|
|
|
|
<Modal {...props} open={open} getContainer={container.current!}>
|
|
|
|
Here is content of Modal
|
|
|
|
</Modal>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
2022-05-31 10:29:13 +08:00
|
|
|
|
|
|
|
describe('Modal', () => {
|
|
|
|
mountTest(Modal);
|
|
|
|
rtlTest(Modal);
|
|
|
|
|
|
|
|
it('support closeIcon', () => {
|
2022-08-23 16:55:57 +08:00
|
|
|
render(<Modal closeIcon={<a>closeIcon</a>} open />);
|
2022-05-31 10:29:13 +08:00
|
|
|
expect(document.body.querySelectorAll('.ant-modal-root')[0]).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('render correctly', () => {
|
|
|
|
const { asFragment } = render(<ModalTester />);
|
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('render without footer', () => {
|
|
|
|
const { asFragment } = render(<ModalTester footer={null} />);
|
|
|
|
expect(asFragment().firstChild).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('onCancel should be called', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onCancel = jest.fn();
|
2022-08-23 16:55:57 +08:00
|
|
|
render(<Modal open onCancel={onCancel} />);
|
2022-05-31 10:29:13 +08:00
|
|
|
fireEvent.click(document.body.querySelectorAll('.ant-btn')[0]);
|
|
|
|
expect(onCancel).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('onOk should be called', () => {
|
2023-06-07 21:59:21 +08:00
|
|
|
const onOk = jest.fn();
|
2022-08-23 16:55:57 +08:00
|
|
|
render(<Modal open onOk={onOk} />);
|
2022-05-31 10:29:13 +08:00
|
|
|
const btns = document.body.querySelectorAll('.ant-btn');
|
|
|
|
fireEvent.click(btns[btns.length - 1]);
|
|
|
|
expect(onOk).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('danger type', () => {
|
2022-08-23 16:55:57 +08:00
|
|
|
render(<Modal okType="danger" okText="123" open />);
|
2022-05-31 10:29:13 +08:00
|
|
|
const btns = document.body.querySelectorAll('.ant-btn');
|
|
|
|
expect(btns[btns.length - 1].classList.contains('ant-btn-dangerous')).toBeTruthy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('mouse position', () => {
|
|
|
|
const Demo = () => {
|
2022-08-23 16:55:57 +08:00
|
|
|
const [open, setOpen] = React.useState(false);
|
2022-05-31 10:29:13 +08:00
|
|
|
const containerRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
return (
|
|
|
|
<div ref={containerRef}>
|
2022-08-23 16:55:57 +08:00
|
|
|
<div id="trigger" onClick={() => setOpen(true)}>
|
2022-05-31 10:29:13 +08:00
|
|
|
click me
|
|
|
|
</div>
|
2022-08-23 16:55:57 +08:00
|
|
|
<Modal open={open} getContainer={() => containerRef.current!} />
|
2022-05-31 10:29:13 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
const { container } = render(<Demo />);
|
|
|
|
fireEvent.click(container.querySelectorAll('#trigger')[0]);
|
|
|
|
expect(
|
|
|
|
(container.querySelectorAll('.ant-modal')[0] as HTMLDivElement).style.transformOrigin,
|
|
|
|
).toBeTruthy();
|
|
|
|
});
|
2022-08-23 16:55:57 +08:00
|
|
|
|
2022-11-15 22:20:02 +08:00
|
|
|
it('custom mouse position', () => {
|
|
|
|
const Demo = () => {
|
|
|
|
const containerRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
return (
|
|
|
|
<div ref={containerRef}>
|
2022-11-17 14:04:31 +08:00
|
|
|
<Modal
|
|
|
|
open
|
|
|
|
getContainer={() => containerRef.current!}
|
|
|
|
mousePosition={{ x: 100, y: 100 }}
|
|
|
|
/>
|
2022-11-15 22:20:02 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
const { container } = render(<Demo />);
|
|
|
|
expect(
|
|
|
|
(container.querySelectorAll('.ant-modal')[0] as HTMLDivElement).style.transformOrigin,
|
|
|
|
).toBe('100px 100px');
|
|
|
|
});
|
|
|
|
|
2022-08-23 16:55:57 +08:00
|
|
|
it('deprecated warning', () => {
|
|
|
|
resetWarned();
|
2023-06-07 21:59:21 +08:00
|
|
|
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
2022-08-23 16:55:57 +08:00
|
|
|
|
2022-09-06 21:46:49 +08:00
|
|
|
render(<Modal visible />);
|
2022-08-23 16:55:57 +08:00
|
|
|
expect(errSpy).toHaveBeenCalledWith(
|
2022-09-06 21:46:49 +08:00
|
|
|
'Warning: [antd: Modal] `visible` is deprecated, please use `open` instead.',
|
2022-08-23 16:55:57 +08:00
|
|
|
);
|
|
|
|
|
2022-09-06 21:46:49 +08:00
|
|
|
expect(document.querySelector('.ant-modal')).toBeTruthy();
|
|
|
|
|
2022-08-23 16:55:57 +08:00
|
|
|
errSpy.mockRestore();
|
|
|
|
});
|
2022-10-21 10:16:03 +08:00
|
|
|
|
|
|
|
it('should not render footer if null', () => {
|
2023-03-14 11:17:05 +08:00
|
|
|
render(<Modal open footer={null} />);
|
|
|
|
expect(document.querySelector('.ant-modal-footer')).toBeFalsy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should render custom footer', () => {
|
|
|
|
render(<Modal open footer={<div className="custom-footer">footer</div>} />);
|
|
|
|
expect(document.querySelector('.custom-footer')).toBeTruthy();
|
2022-10-21 10:16:03 +08:00
|
|
|
});
|
2022-05-31 10:29:13 +08:00
|
|
|
});
|