test: image preview e2e (#3080)

Co-authored-by: danielchim <kahungchim@gmail.com>

packages/component/src/components/image-preview-modal/index.tsx

@@ -317,7 +317,12 @@ const ImagePreviewModalImpl = (
               onLoad={resetZoom}
             />
             {isZoomedBigger ? null : (
-              <p className={imagePreviewModalCaptionStyle}>{caption}</p>
+              <p
+                data-testid="image-caption-zoomedout"
+                className={imagePreviewModalCaptionStyle}
+              >
+                {caption}
+              </p>
             )}
           </div>
         </div>
@@ -328,12 +333,15 @@ const ImagePreviewModalImpl = (
         onClick={event => event.stopPropagation()}
       >
         {isZoomedBigger && caption !== '' ? (
-          <p className={captionStyle}>{caption}</p>
+          <p data-testid={'image-caption-zoomedin'} className={captionStyle}>
+            {caption}
+          </p>
         ) : null}
         <div className={imagePreviewActionBarStyle}>
           <div>
             <Tooltip content={'Previous'} disablePortal={false}>
               <Button
+                data-testid="previous-image-button"
                 icon={<ArrowLeftSmallIcon className={buttonIconStyle} />}
                 noBorder={true}
                 className={buttonStyle}
@@ -346,6 +354,7 @@ const ImagePreviewModalImpl = (
             </Tooltip>
             <Tooltip content={'Next'} disablePortal={false}>
               <Button
+                data-testid="next-image-button"
                 icon={<ArrowRightSmallIcon className={buttonIconStyle} />}
                 noBorder={true}
                 className={buttonStyle}
@@ -364,6 +373,7 @@ const ImagePreviewModalImpl = (
             showArrow={false}
           >
             <Button
+              data-testid="fit-to-screen-button"
               icon={<ViewBarIcon className={buttonIconStyle} />}
               noBorder={true}
               hoverColor={'-moz-initial'}
@@ -373,6 +383,7 @@ const ImagePreviewModalImpl = (
           </Tooltip>
           <Tooltip content={'Zoom out'} disablePortal={false}>
             <Button
+              data-testid="zoom-out-button"
               icon={<MinusIcon className={buttonIconStyle} />}
               noBorder={true}
               className={buttonStyle}
@@ -382,6 +393,7 @@ const ImagePreviewModalImpl = (
           </Tooltip>
           <Tooltip content={'Reset Scale'} disablePortal={false}>
             <Button
+              data-testid="reset-scale-button"
               noBorder={true}
               size={'middle'}
               className={scaleIndicatorButtonStyle}
@@ -393,6 +405,7 @@ const ImagePreviewModalImpl = (
           </Tooltip>
           <Tooltip content={'Zoom in'} disablePortal={false}>
             <Button
+              data-testid="zoom-in-button"
               icon={<PlusIcon className={buttonIconStyle} />}
               noBorder={true}
               className={buttonStyle}
@@ -403,6 +416,7 @@ const ImagePreviewModalImpl = (
           <div className={groupStyle}></div>
           <Tooltip content={'Download'} disablePortal={false}>
             <Button
+              data-testid="download-button"
               icon={<DownloadIcon className={buttonIconStyle} />}
               noBorder={true}
               className={buttonStyle}
@@ -417,6 +431,7 @@ const ImagePreviewModalImpl = (
           </Tooltip>
           <Tooltip content={'Copy to clipboard'} disablePortal={false}>
             <Button
+              data-testid="copy-to-clipboard-button"
               icon={<CopyIcon className={buttonIconStyle} />}
               noBorder={true}
               className={buttonStyle}
@@ -458,6 +473,7 @@ const ImagePreviewModalImpl = (
           <div className={groupStyle}></div>
           <Tooltip content={'Delete'} disablePortal={false}>
             <Button
+              data-testid="delete-button"
               icon={<DeleteIcon className={buttonIconStyle} />}
               noBorder={true}
               className={buttonStyle}