99 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
			
		
		
	
	
			99 lines
		
	
	
		
			2.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
| import { mount } from '@vue/test-utils';
 | |
| import { asyncExpect } from '@/tests/utils';
 | |
| import Popconfirm from '..';
 | |
| function $$(className) {
 | |
|   return document.body.querySelectorAll(className);
 | |
| }
 | |
| describe('Popconfirm', () => {
 | |
|   // const eventObject = expect.objectContaining({
 | |
|   //   target: expect.anything(),
 | |
|   //   preventDefault: expect.any(Function),
 | |
|   // })
 | |
|   it('should popup Popconfirm dialog', async () => {
 | |
|     const onVisibleChange = jest.fn();
 | |
| 
 | |
|     const wrapper = mount(
 | |
|       {
 | |
|         render() {
 | |
|           return (
 | |
|             <Popconfirm
 | |
|               title={<span class="popconfirm-test">Are you sure delete this task?</span>}
 | |
|               okText="Yes"
 | |
|               cancelText="No"
 | |
|               mouseEnterDelay={0}
 | |
|               mouseLeaveDelay={0}
 | |
|               onVisibleChange={onVisibleChange}
 | |
|             >
 | |
|               <span>Delete</span>
 | |
|             </Popconfirm>
 | |
|           );
 | |
|         },
 | |
|       },
 | |
|       { sync: false, attachToDocument: true },
 | |
|     );
 | |
|     let triggerNode = null;
 | |
|     await asyncExpect(() => {
 | |
|       triggerNode = wrapper.findAll('span').at(0);
 | |
|       triggerNode.trigger('click');
 | |
|     });
 | |
|     await asyncExpect(() => {
 | |
|       expect(onVisibleChange).toHaveBeenLastCalledWith(true, undefined);
 | |
|       expect($$('.popconfirm-test').length).toBe(1);
 | |
|       triggerNode.trigger('click');
 | |
|     }, 1000);
 | |
|     await asyncExpect(() => {
 | |
|       expect(onVisibleChange).toHaveBeenLastCalledWith(false, undefined);
 | |
|     });
 | |
|   });
 | |
| 
 | |
|   it('should show overlay when trigger is clicked', async () => {
 | |
|     const popconfirm = mount(
 | |
|       {
 | |
|         render() {
 | |
|           return (
 | |
|             <Popconfirm ref="popconfirm" title="code">
 | |
|               <span>show me your code</span>
 | |
|             </Popconfirm>
 | |
|           );
 | |
|         },
 | |
|       },
 | |
|       { sync: false },
 | |
|     );
 | |
| 
 | |
|     await asyncExpect(() => {
 | |
|       expect(popconfirm.vm.$refs.popconfirm.getPopupDomNode()).toBe(null);
 | |
| 
 | |
|       popconfirm.find('span').trigger('click');
 | |
|     }, 1000);
 | |
|     await asyncExpect(() => {
 | |
|       const popup = popconfirm.vm.$refs.popconfirm.getPopupDomNode();
 | |
|       expect(popup).not.toBe(null);
 | |
|       expect(popup.className).toContain('ant-popover-placement-top');
 | |
|       expect(popup.innerHTML).toMatchSnapshot();
 | |
|     }, 1000);
 | |
|   });
 | |
| 
 | |
|   it('should not open in disabled', async () => {
 | |
|     const popconfirm = mount(
 | |
|       {
 | |
|         render() {
 | |
|           return (
 | |
|             <Popconfirm ref="popconfirm" title="code" disabled>
 | |
|               <span>click me</span>
 | |
|             </Popconfirm>
 | |
|           );
 | |
|         },
 | |
|       },
 | |
|       { sync: false },
 | |
|     );
 | |
| 
 | |
|     await asyncExpect(() => {
 | |
|       popconfirm.find('span').trigger('click');
 | |
|     }, 1000);
 | |
|     await asyncExpect(() => {
 | |
|       const popup = popconfirm.vm.$refs.popconfirm.getPopupDomNode();
 | |
|       expect(popup).toBeFalsy();
 | |
|     }, 1000);
 | |
|   });
 | |
| });
 |