diff --git a/src/hooks/useImageTransform.ts b/src/hooks/useImageTransform.ts index dcc24d6..cadd0eb 100644 --- a/src/hooks/useImageTransform.ts +++ b/src/hooks/useImageTransform.ts @@ -62,8 +62,9 @@ export default function useImageTransform( const resetTransform = (action: TransformAction) => { setTransform(initialTransform); - if (onTransform && !isEqual(initialTransform, transform)) { - onTransform({ transform: initialTransform, action }); + console.log('resetTransform', initialTransform, transform); + if (!isEqual(initialTransform, transform)) { + onTransform?.({ transform: initialTransform, action }); } }; diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx index 486c5f3..73fbd6f 100644 --- a/tests/preview.test.tsx +++ b/tests/preview.test.tsx @@ -656,13 +656,14 @@ describe('Preview', () => { it('Customize preview props', () => { const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'; - render( + const { container } = render( , ); @@ -673,6 +674,8 @@ describe('Preview', () => { maskTransitionName: 'def', }), ); + + expect(container.querySelector('.rc-image-close')).toBeFalsy(); }); it('Customize Group preview props', () => { @@ -781,16 +784,23 @@ describe('Preview', () => { }); it('toolbarRender', () => { + const printImage = jest.fn(); const { container } = render( alt ( - <> - {icons.flipYIcon} - {icons.flipXIcon} - - ), + toolbarRender: (_, { icons, image }) => { + printImage(image); + return ( + <> + {icons.flipYIcon} + {icons.flipXIcon} + + ); + }, }} />, ); @@ -801,6 +811,7 @@ describe('Preview', () => { }); expect(document.querySelectorAll('.rc-image-preview-operations-operation')).toHaveLength(2); + expect(printImage).toHaveBeenCalledWith({ "alt": "alt", "height": 200, "url": "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png", "width": 200 }); }); it('onTransform should be triggered when transform change', () => { @@ -819,13 +830,13 @@ describe('Preview', () => { expect(document.querySelector('.rc-image-preview')).toBeTruthy(); - fireEvent.click(document.querySelectorAll('.rc-image-preview-operations-operation')[0]); + fireEvent.click(document.querySelector('.rc-image-preview-operations-operation-flipY')); act(() => { jest.runAllTimers(); }); - expect(onTransform).toBeCalledTimes(1); - expect(onTransform).toBeCalledWith({ + expect(onTransform).toHaveBeenCalledTimes(1); + expect(onTransform).toHaveBeenCalledWith({ transform: { flipY: true, flipX: false, diff --git a/tests/previewGroup.test.tsx b/tests/previewGroup.test.tsx index 74fa9c8..3b604be 100644 --- a/tests/previewGroup.test.tsx +++ b/tests/previewGroup.test.tsx @@ -269,6 +269,34 @@ describe('PreviewGroup', () => { expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src3'); }); + it('album mode: object item', () => { + const { container } = render( + + + , + ); + + expect(container.querySelectorAll('.rc-image')).toHaveLength(1); + + fireEvent.click(container.querySelector('.rc-image')); + act(() => { + jest.runAllTimers(); + }); + expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src1'); + + fireEvent.click(document.querySelector('.rc-image-preview-switch-right')); + expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src2'); + + fireEvent.click(document.querySelector('.rc-image-preview-switch-right')); + expect(document.querySelector('.rc-image-preview-img')).toHaveAttribute('src', 'src3'); + }); + it('should keep order', async () => { const Demo = ({ firstUrl }: { firstUrl: string }) => { return ( @@ -295,4 +323,49 @@ describe('PreviewGroup', () => { document.querySelector('.rc-image-preview-img-wrapper img')!.src, ).toEqual('http://second/img.png'); }); + + it('onTransform should be triggered when switch', () => { + const onTransform = jest.fn(); + render( + , + ); + fireEvent.click(document.querySelector('.rc-image-preview-operations-operation-flipY')); + act(() => { + jest.runAllTimers(); + }); + expect(onTransform).toHaveBeenCalledTimes(1); + expect(onTransform).toHaveBeenLastCalledWith({ + transform: { + flipY: true, + flipX: false, + rotate: 0, + scale: 1, + x: 0, + y: 0, + }, + action: 'flipY', + }); + fireEvent.click(document.querySelector('.rc-image-preview-switch-right')); + act(() => { + jest.runAllTimers(); + }); + expect(onTransform).toHaveBeenCalledTimes(2); + expect(onTransform).toHaveBeenLastCalledWith({ + transform: { + flipY: false, + flipX: false, + rotate: 0, + scale: 1, + x: 0, + y: 0, + }, + action: 'next', + }); + }); });