test: add test case

Author: zombieJ

src/Image.tsx

@@ -114,7 +114,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     src: previewSrc,
     visible: previewVisible = undefined,
     onVisibleChange: onPreviewVisibleChange,
-    cover: previewMask,
+    cover,
     classNames: previewClassNames = {},
     styles: previewStyles = {},
     ...restProps
@@ -230,15 +230,15 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
         )}
 
         {/* Preview Click Mask */}
-        {previewMask !== false && canPreview && (
+        {cover !== false && canPreview && (
           <div
             className={classnames(`${prefixCls}-cover`, previewClassNames.cover)}
             style={{
               display: style?.display === 'none' ? 'none' : undefined,
               ...previewStyles.cover,
             }}
           >
-            {previewMask}
+            {cover}
           </div>
         )}
       </div>

src/Preview/index.tsx

@@ -84,6 +84,7 @@ export interface InternalPreviewConfig {
   motionName?: string;
   visible?: boolean;
   getContainer?: PortalProps['getContainer'];
+  zIndex?: number;
 
   // Operation
   movable?: boolean;
@@ -183,6 +184,7 @@ const Preview: React.FC<PreviewProps> = props => {
     classNames = {},
     styles = {},
     mousePosition,
+    zIndex,
   } = props;
 
   const imgRef = useRef<HTMLImageElement>();
@@ -383,15 +385,21 @@ const Preview: React.FC<PreviewProps> = props => {
         onVisibleChanged={onVisibleChanged}
       >
         {({ className: motionClassName, style: motionStyle }) => {
+          const mergedStyle = {
+            ...styles.root,
+            ...motionStyle,
+          };
+
+          if (zIndex) {
+            mergedStyle.zIndex = zIndex;
+          }
+
           return (
             <div
               className={classnames(prefixCls, classNames.root, motionClassName, {
                 [`${prefixCls}-moving`]: isMoving,
               })}
-              style={{
-                ...styles.root,
-                ...motionStyle,
-              }}
+              style={mergedStyle}
             >
               {/* Mask */}
               <div

tests/__snapshots__/basic.test.tsx.snap

@@ -10,5 +10,8 @@ exports[`Basic snapshot 1`] = `
     src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
     width="200"
   />
+  <div
+    class="rc-image-cover"
+  />
 </div>
 `;

tests/basic.test.tsx

@@ -58,18 +58,22 @@ describe('Basic', () => {
     expect(img).toHaveStyle({ objectFit: 'cover' });
   });
 
-  it('wrapperClassName and wrapperStyle should work on image wrapper element', () => {
+  it('classNames.root and styles.root should work on image wrapper element', () => {
     const { container } = render(
       <Image
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-        wrapperClassName="wrapper"
-        wrapperStyle={{
-          objectFit: 'cover',
+        classNames={{
+          root: 'bamboo',
+        }}
+        styles={{
+          root: {
+            objectFit: 'cover',
+          },
         }}
       />,
     );
-    const wrapperElement = container.querySelector('img').parentElement;
-    expect(wrapperElement).toHaveClass('wrapper');
+    const wrapperElement = container.firstChild;
+    expect(wrapperElement).toHaveClass('bamboo');
     expect(wrapperElement).toHaveStyle({ objectFit: 'cover' });
   });
 
@@ -81,20 +85,20 @@ describe('Basic', () => {
         style={{
           display: 'none',
         }}
-        preview={{ mask: 'Click to Preview' }}
+        preview={{ cover: 'Click to Preview' }}
       />,
     );
-    const maskElement = container.querySelector('.rc-image-mask');
+    const maskElement = container.querySelector('.rc-image-cover');
     expect(maskElement).toHaveStyle({ display: 'none' });
   });
-  it('preview zIndex should pass into operations', () => {
+  it('preview zIndex should pass', () => {
     const { baseElement } = render(
       <Image
         src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
         preview={{ zIndex: 9999, visible: true }}
       />,
     );
-    const operationsElement = baseElement.querySelector('.rc-image-preview-operations-wrapper');
-    expect(operationsElement).toHaveStyle({ zIndex: 10000 });
+    const operationsElement = baseElement.querySelector('.rc-image-preview');
+    expect(operationsElement).toHaveStyle({ zIndex: 9999 });
   });
 });