test: add test cases (#340)

* test: fix test coverage

* test: add test case for toolbarRender info.image

* test: more test cases

Author: afc163

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 });
     }
   };
 

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(
       <Image
         src={src}
         preview={{
           visible: true,
           transitionName: 'abc',
           maskTransitionName: 'def',
+          closeIcon: null,
         }}
       />,
     );
@@ -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(
       <Image
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        alt="alt"
+        width={200}
+        height={200}
         preview={{
-          toolbarRender: (_, { icons }) => (
-            <>
-              {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,

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(
+      <Image.PreviewGroup items={[{
+        src: 'src1',
+      }, {
+        src: 'src2',
+      }, {
+        src: 'src3',
+      }]}>
+        <Image src="src1" />
+      </Image.PreviewGroup>,
+    );
+
+    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<HTMLImageElement>('.rc-image-preview-img-wrapper img')!.src,
     ).toEqual('http://second/img.png');
   });
+
+  it('onTransform should be triggered when switch', () => {
+    const onTransform = jest.fn();
+    render(
+      <Image.PreviewGroup preview={{ visible: true, onTransform }} items={[{
+        src: 'src1',
+      }, {
+        src: 'src2',
+      }, {
+        src: 'src3',
+      }]} />,
+    );
+    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',
+    });
+  });
 });