From 955d80e2c18bb74d175be8830286ff09b4c46773 Mon Sep 17 00:00:00 2001
From: Alex Yang <himself65@outlook.com>
Date: Fri, 7 Jul 2023 07:24:03 +0800
Subject: [PATCH] test: image preview e2e (#3080)

Co-authored-by: danielchim <kahungchim@gmail.com>
---
 apps/web/project.json                         |   2 +-
 .../components/image-preview-modal/index.tsx  |  20 +-
 tests/parallels/image-preview.spec.ts         | 620 +++++++++++++++++-
 3 files changed, 636 insertions(+), 6 deletions(-)

diff --git a/apps/web/project.json b/apps/web/project.json
index 12bfa97247..b2112b56c2 100644
--- a/apps/web/project.json
+++ b/apps/web/project.json
@@ -10,7 +10,7 @@
       "dependsOn": ["^build"],
       "inputs": [
         "{projectRoot}/**/*",
-        "{workspaceRoot}/packages/components/src/**/*",
+        "{workspaceRoot}/packages/component/src/**/*",
         "{workspaceRoot}/packages/debug/src/**/*",
         "{workspaceRoot}/packages/debug/graphql/**/*",
         "{workspaceRoot}/packages/hooks/src/**/*",
diff --git a/packages/component/src/components/image-preview-modal/index.tsx b/packages/component/src/components/image-preview-modal/index.tsx
index 2078097593..86e52cd470 100644
--- a/packages/component/src/components/image-preview-modal/index.tsx
+++ b/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}
diff --git a/tests/parallels/image-preview.spec.ts b/tests/parallels/image-preview.spec.ts
index 8d1066bb66..8e6e369020 100644
--- a/tests/parallels/image-preview.spec.ts
+++ b/tests/parallels/image-preview.spec.ts
@@ -1,5 +1,6 @@
 import type { Page } from '@playwright/test';
 import { expect, test } from '@playwright/test';
+import fs from 'fs';
 
 import { openHomePage } from '../libs/load-page';
 import {
@@ -12,7 +13,7 @@ async function importImage(page: Page, url: string) {
   await page.evaluate(
     ([url]) => {
       const clipData = {
-        'text/html': `<img src=${url} />`,
+        'text/html': `<img alt={'Sample image'} src=${url} />`,
       };
       const e = new ClipboardEvent('paste', {
         clipboardData: new DataTransfer(),
@@ -85,7 +86,7 @@ test('image go left and right', async ({ page }) => {
   await page.locator('img').first().dblclick();
   await page.waitForTimeout(1000);
   {
-    const newBlobId = (await page
+    const newBlobId = (await locator
       .locator('img[data-blob-id]')
       .first()
       .getAttribute('data-blob-id')) as string;
@@ -94,10 +95,623 @@ test('image go left and right', async ({ page }) => {
   await page.keyboard.press('ArrowRight');
   await page.waitForTimeout(1000);
   {
-    const newBlobId = (await page
+    const newBlobId = (await locator
       .locator('img[data-blob-id]')
       .first()
       .getAttribute('data-blob-id')) as string;
     expect(newBlobId).toBe(blobId);
   }
 });
+
+test('image able to zoom in and out with mouse scroll', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  let blobId: string;
+  {
+    const title = await getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/large-image.png');
+    await page.locator('img').first().dblclick();
+    await page.waitForTimeout(500);
+    blobId = (await page
+      .locator('img')
+      .nth(1)
+      .getAttribute('data-blob-id')) as string;
+    expect(blobId).toBeTruthy();
+  }
+  const locator = page.getByTestId('image-content');
+  const naturalWidth = await locator.evaluate(
+    (img: HTMLImageElement) => img.naturalWidth
+  );
+  expect(locator.isVisible()).toBeTruthy();
+  const { width, height } = await page.evaluate(() => ({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  }));
+
+  // zooom in
+  await page.mouse.move(width / 2, height / 2);
+  await page.mouse.wheel(0, 100);
+  await page.mouse.wheel(0, 100);
+  await page.mouse.wheel(0, 100);
+  await page.waitForTimeout(1000);
+  let imageBoundary = await locator.boundingBox();
+  let imageWidth = await imageBoundary?.width;
+  if (imageWidth) {
+    expect((imageWidth / naturalWidth).toFixed(2)).toBe('0.54');
+  }
+
+  // zooom in
+  await page.mouse.move(width / 2, height / 2);
+  await page.mouse.wheel(0, -100);
+  await page.mouse.wheel(0, -100);
+  await page.mouse.wheel(0, -100);
+  await page.waitForTimeout(1000);
+  imageBoundary = await locator.boundingBox();
+  imageWidth = await imageBoundary?.width;
+  if (imageWidth) {
+    expect((imageWidth / naturalWidth).toFixed(2)).toBe('0.84');
+  }
+});
+
+test('image able to zoom in and out with button click', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  let blobId: string;
+  {
+    const title = await getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/large-image.png');
+    await page.locator('img').first().dblclick();
+    await page.waitForTimeout(500);
+    blobId = (await page
+      .locator('img')
+      .nth(1)
+      .getAttribute('data-blob-id')) as string;
+    expect(blobId).toBeTruthy();
+  }
+  const locator = page.getByTestId('image-content');
+  expect(locator.isVisible()).toBeTruthy();
+  const naturalWidth = await locator.evaluate(
+    (img: HTMLImageElement) => img.naturalWidth
+  );
+
+  await page.waitForTimeout(500);
+  // zoom in
+  {
+    const locator = page.getByTestId('image-preview-modal');
+    await locator.getByTestId('zoom-in-button').dblclick();
+  }
+  await page.waitForTimeout(1000);
+  let imageBoundary = await locator.boundingBox();
+  let imageWidth = await imageBoundary?.width;
+  if (imageWidth) {
+    expect((imageWidth / naturalWidth).toFixed(2)).toBe('1.04');
+  }
+
+  // zooom out
+  await page.getByTestId('zoom-out-button').dblclick();
+  imageBoundary = await locator.boundingBox();
+  imageWidth = await imageBoundary?.width;
+  if (imageWidth) {
+    expect((imageWidth / naturalWidth).toFixed(2)).toBe('0.84');
+  }
+});
+
+test('image should able to go left and right by buttons', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  let blobId: string;
+  {
+    const title = await getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/large-image.png');
+    await page.locator('img').first().dblclick();
+    await page.waitForTimeout(500);
+    blobId = (await page
+      .locator('img')
+      .nth(1)
+      .getAttribute('data-blob-id')) as string;
+    expect(blobId).toBeTruthy();
+    await closeImagePreviewModal(page);
+  }
+  {
+    const title = await getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/affine-preview.png');
+  }
+  const locator = page.getByTestId('image-preview-modal');
+  expect(locator.isVisible()).toBeTruthy();
+  await page.locator('img').first().dblclick();
+  // ensure the new image was imported
+  await page.waitForTimeout(1000);
+  {
+    const newBlobId = (await locator
+      .getByTestId('image-content')
+      .getAttribute('data-blob-id')) as string;
+    expect(newBlobId).not.toBe(blobId);
+  }
+  await locator.getByTestId('next-image-button').click();
+  await page.waitForTimeout(1000);
+  {
+    const newBlobId = (await page
+      .getByTestId('image-content')
+      .getAttribute('data-blob-id')) as string;
+    expect(newBlobId).toBe(blobId);
+  }
+  await locator.getByTestId('previous-image-button').click();
+  await page.waitForTimeout(1000);
+  {
+    const newBlobId = (await locator
+      .getByTestId('image-content')
+      .getAttribute('data-blob-id')) as string;
+    expect(newBlobId).not.toBe(blobId);
+  }
+});
+
+test('image able to fit to screen by button', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  let blobId: string;
+  {
+    const title = await getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/large-image.png');
+    await page.locator('img').first().dblclick();
+    await page.waitForTimeout(500);
+    blobId = (await page
+      .locator('img')
+      .nth(1)
+      .getAttribute('data-blob-id')) as string;
+    expect(blobId).toBeTruthy();
+  }
+  const locator = page.getByTestId('image-content');
+  expect(locator.isVisible()).toBeTruthy();
+  const naturalWidth = await locator.evaluate(
+    (img: HTMLImageElement) => img.naturalWidth
+  );
+  const [viewportWidth, viewportHeight] = await page.evaluate(() => {
+    return [window.innerWidth, window.innerHeight];
+  });
+
+  // zooom in
+  {
+    const locator = page.getByTestId('image-preview-modal');
+    await locator.getByTestId('zoom-in-button').dblclick();
+  }
+  await page.waitForTimeout(1000);
+  let imageBoundary = await locator.boundingBox();
+  let imageWidth = await imageBoundary?.width;
+  if (imageWidth) {
+    expect((imageWidth / naturalWidth).toFixed(2)).toBe('1.04');
+  } else {
+    throw new Error("Image doesn't exist!");
+  }
+
+  //reset zoom
+  {
+    const locator = page.getByTestId('image-preview-modal');
+    await locator.getByTestId('fit-to-screen-button').click();
+  }
+  imageBoundary = await locator.boundingBox();
+  imageWidth = await imageBoundary?.width;
+  const imageHeight = await imageBoundary?.height;
+  if (imageWidth && imageHeight) {
+    expect(imageWidth).toBeLessThan(viewportWidth);
+    expect(imageHeight).toBeLessThan(viewportHeight);
+  } else {
+    throw new Error("Image doesn't exist!");
+  }
+});
+
+test('image able to reset zoom to 100%', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  let blobId: string;
+  {
+    const title = await getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/large-image.png');
+    await page.locator('img').first().dblclick();
+    await page.waitForTimeout(500);
+    blobId = (await page
+      .locator('img')
+      .nth(1)
+      .getAttribute('data-blob-id')) as string;
+    expect(blobId).toBeTruthy();
+  }
+  const locator = page.getByTestId('image-content');
+  expect(locator.isVisible()).toBeTruthy();
+  const naturalWidth = await locator.evaluate(
+    (img: HTMLImageElement) => img.naturalWidth
+  );
+
+  await page.waitForTimeout(500);
+  // zooom in
+  {
+    const locator = page.getByTestId('image-preview-modal');
+    await locator.getByTestId('zoom-in-button').dblclick();
+  }
+  await page.waitForTimeout(1000);
+  let imageBoundary = await locator.boundingBox();
+  let imageWidth = await imageBoundary?.width;
+  if (imageWidth) {
+    expect((imageWidth / naturalWidth).toFixed(2)).toBe('1.04');
+  } else {
+    throw new Error("Image doesn't exist!");
+  }
+
+  //reset zoom
+  {
+    const locator = page.getByTestId('image-preview-modal');
+    await locator.getByTestId('reset-scale-button').click();
+  }
+  imageBoundary = await locator.boundingBox();
+  imageWidth = await imageBoundary?.width;
+  if (imageWidth) {
+    expect((imageWidth / naturalWidth).toFixed(2)).toBe('1.00');
+  } else {
+    throw new Error("Image doesn't exist!");
+  }
+});
+
+test('image able to copy to clipboard', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  let blobId: string;
+  {
+    const title = await getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/large-image.png');
+    await page.locator('img').first().dblclick();
+    await page.waitForTimeout(500);
+    blobId = (await page
+      .locator('img')
+      .nth(1)
+      .getAttribute('data-blob-id')) as string;
+    expect(blobId).toBeTruthy();
+  }
+  const locator = page.getByTestId('image-preview-modal');
+  expect(locator.isVisible()).toBeTruthy();
+  await page.waitForTimeout(500);
+  await locator.getByTestId('copy-to-clipboard-button').click();
+  await page.on('console', message => {
+    expect(message.text()).toBe('Image copied to clipboard');
+  });
+});
+
+test('image able to download', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  let blobId: string;
+  {
+    const title = await getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/large-image.png');
+    await page.locator('img').first().dblclick();
+    await page.waitForTimeout(500);
+    blobId = (await page
+      .locator('img')
+      .nth(1)
+      .getAttribute('data-blob-id')) as string;
+    expect(blobId).toBeTruthy();
+  }
+  const locator = page.getByTestId('image-preview-modal');
+  expect(locator.isVisible()).toBeTruthy();
+  const downloadPromise = page.waitForEvent('download');
+  await locator.getByTestId('download-button').click();
+  const download = await downloadPromise;
+  expect(download.suggestedFilename()).toBe(`${blobId}.png`);
+  await download.saveAs(`download/ + ${download.suggestedFilename()}`);
+  expect(
+    fs.existsSync(`download/ + ${download.suggestedFilename()}`)
+  ).toBeTruthy();
+});
+
+test('image should only able to move when image is larger than viewport', async ({
+  page,
+}) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  let blobId: string;
+  {
+    const title = await getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/large-image.png');
+    await page.locator('img').first().dblclick();
+    await page.waitForTimeout(500);
+    blobId = (await page
+      .locator('img')
+      .nth(1)
+      .getAttribute('data-blob-id')) as string;
+    expect(blobId).toBeTruthy();
+  }
+  const locator = page.getByTestId('image-content');
+  expect(locator.isVisible()).toBeTruthy();
+  const { width, height } = await page.evaluate(() => ({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  }));
+  let imageBoundary = await locator.boundingBox();
+  const initialXPos = imageBoundary?.x;
+  const initialYPos = imageBoundary?.y;
+  // check will it able to move when zoomed in
+  {
+    const locator = page.getByTestId('image-preview-modal');
+    await locator.getByTestId('zoom-in-button').dblclick();
+    await locator.getByTestId('zoom-in-button').dblclick();
+  }
+  await page.mouse.move(width / 2, height / 2);
+  await page.mouse.down();
+  await page.mouse.move(20, 20);
+  await page.mouse.up();
+  imageBoundary = await locator.boundingBox();
+  expect(initialXPos).not.toBe(imageBoundary?.x);
+  expect(initialYPos).not.toBe(imageBoundary?.y);
+
+  // check will it able to move when zoomed out
+  {
+    const locator = page.getByTestId('image-preview-modal');
+    await locator.getByTestId('fit-to-screen-button').click();
+  }
+  await page.mouse.move(width / 2, height / 2);
+  await page.mouse.down();
+  await page.mouse.move(20, 20);
+  await page.mouse.up();
+  imageBoundary = await locator.boundingBox();
+  expect(initialXPos).toBe(imageBoundary?.x);
+  expect(initialYPos).toBe(imageBoundary?.y);
+});
+
+test('image should able to delete and when delete, it will move to previous/next image', async ({
+  page,
+}) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  let blobId: string;
+  {
+    const title = await getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/large-image.png');
+    await page.locator('img').first().dblclick();
+    await page.waitForTimeout(500);
+    blobId = (await page
+      .locator('img')
+      .nth(1)
+      .getAttribute('data-blob-id')) as string;
+    expect(blobId).toBeTruthy();
+    await closeImagePreviewModal(page);
+  }
+  {
+    const title = await getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/affine-preview.png');
+  }
+  const locator = page.getByTestId('image-preview-modal');
+  expect(locator.isVisible()).toBeTruthy();
+  await page.locator('img').first().dblclick();
+  // ensure the new image was imported
+  await page.waitForTimeout(1000);
+  {
+    const newBlobId = (await locator
+      .getByTestId('image-content')
+      .getAttribute('data-blob-id')) as string;
+    expect(newBlobId).not.toBe(blobId);
+  }
+  await page.waitForTimeout(500);
+  await locator.getByTestId('delete-button').click();
+  {
+    const newBlobId = (await locator
+      .getByTestId('image-content')
+      .getAttribute('data-blob-id')) as string;
+    expect(newBlobId).toBe(blobId);
+    await closeImagePreviewModal(page);
+    const title = await getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/affine-preview.png');
+  }
+  await page.locator('img').first().dblclick();
+  await locator.getByTestId('next-image-button').click();
+  await page.waitForTimeout(1000);
+  {
+    const newBlobId = (await page
+      .getByTestId('image-content')
+      .getAttribute('data-blob-id')) as string;
+    expect(newBlobId).toBe(blobId);
+  }
+  await locator.getByTestId('delete-button').click();
+  {
+    const newBlobId = (await locator
+      .getByTestId('image-content')
+      .getAttribute('data-blob-id')) as string;
+    expect(newBlobId).not.toBe(blobId);
+  }
+  await locator.getByTestId('delete-button').click();
+  await page.waitForTimeout(500);
+  {
+    const locator = await page.getByTestId('image-preview-modal').count();
+    expect(locator).toBe(0);
+  }
+});
+
+test('tooltips for all buttons should be visible when hovering', async ({
+  page,
+}) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  let blobId: string;
+  {
+    const title = await getBlockSuiteEditorTitle(page);
+    await title.click();
+    await page.keyboard.press('Enter');
+    await importImage(page, 'http://localhost:8081/large-image.png');
+    await page.locator('img').first().dblclick();
+    await page.waitForTimeout(500);
+    blobId = (await page
+      .locator('img')
+      .nth(1)
+      .getAttribute('data-blob-id')) as string;
+    expect(blobId).toBeTruthy();
+  }
+  const locator = page.getByTestId('image-preview-modal');
+  await page.waitForTimeout(500);
+  await locator.getByTestId('previous-image-button').hover();
+  await page.waitForTimeout(500);
+  {
+    const element = await page.getByRole('tooltip');
+    const previousImageTooltip = await element.getByText('Previous').count();
+    expect(previousImageTooltip).toBe(1);
+  }
+
+  await locator.getByTestId('next-image-button').hover();
+  await page.waitForTimeout(500);
+  {
+    const element = await page.getByRole('tooltip');
+    const nextImageTooltip = await element.getByText('Next').count();
+    expect(nextImageTooltip).toBe(1);
+  }
+
+  await locator.getByTestId('fit-to-screen-button').hover();
+  await page.waitForTimeout(500);
+  {
+    const element = await page.getByRole('tooltip');
+    const fitToScreenToolTip = await element.getByText('Fit to Screen').count();
+    expect(fitToScreenToolTip).toBe(1);
+  }
+
+  await locator.getByTestId('zoom-out-button').hover();
+  await page.waitForTimeout(500);
+  {
+    const element = await page.getByRole('tooltip');
+    const zoomOutToolTip = await element.getByText('Zoom out').count();
+    expect(zoomOutToolTip).toBe(1);
+  }
+
+  await locator.getByTestId('reset-scale-button').hover();
+  await page.waitForTimeout(500);
+  {
+    const element = await page.getByRole('tooltip');
+    const resetScaleTooltip = await element.getByText('Reset Scale').count();
+    expect(resetScaleTooltip).toBe(1);
+  }
+
+  await locator.getByTestId('zoom-in-button').hover();
+  await page.waitForTimeout(500);
+  {
+    const element = await page.getByRole('tooltip');
+    const zoominToolTip = await element.getByText('Zoom in').count();
+    expect(zoominToolTip).toBe(1);
+  }
+
+  await locator.getByTestId('download-button').hover();
+  await page.waitForTimeout(500);
+  {
+    const element = await page.getByRole('tooltip');
+    const downloadTooltip = await element.getByText('Download').count();
+    expect(downloadTooltip).toBe(1);
+  }
+
+  await locator.getByTestId('copy-to-clipboard-button').hover();
+  await page.waitForTimeout(500);
+  {
+    const element = await page.getByRole('tooltip');
+    const downloadTooltip = await element
+      .getByText('Copy to clipboard')
+      .count();
+    expect(downloadTooltip).toBe(1);
+  }
+
+  await locator.getByTestId('delete-button').hover();
+  await page.waitForTimeout(500);
+  {
+    const element = await page.getByRole('tooltip');
+    const downloadTooltip = await element.getByText('Delete').count();
+    expect(downloadTooltip).toBe(1);
+  }
+});
+
+test('keypress esc should close the modal', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  const title = await getBlockSuiteEditorTitle(page);
+  await title.click();
+  await page.keyboard.press('Enter');
+  await importImage(page, 'http://localhost:8081/large-image.png');
+  await page.locator('img').first().dblclick();
+  const locator = page.getByTestId('image-preview-modal');
+  expect(locator.isVisible()).toBeTruthy();
+  await page.keyboard.press('Escape');
+  await page.waitForTimeout(1000);
+  expect(await locator.isVisible()).toBeFalsy();
+});
+
+test('when mouse moves outside, the modal should be closed', async ({
+  page,
+}) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  const title = await getBlockSuiteEditorTitle(page);
+  await title.click();
+  await page.keyboard.press('Enter');
+  await importImage(page, 'http://localhost:8081/large-image.png');
+  await page.locator('img').first().dblclick();
+  const locator = page.getByTestId('image-preview-modal');
+  expect(await locator.isVisible()).toBeTruthy();
+  // animation delay
+  await page.waitForTimeout(1000);
+  await page.mouse.click(10, 10);
+  await page.waitForTimeout(1000);
+  expect(await locator.isVisible()).toBeFalsy();
+});
+
+test('caption should be visible and different styles were applied if image zoomed larger than viewport', async ({
+  page,
+}) => {
+  const sampleCaption = 'affine owns me and all';
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await newPage(page);
+  const title = await getBlockSuiteEditorTitle(page);
+  await title.click();
+  await page.keyboard.press('Enter');
+  await importImage(page, 'http://localhost:8081/large-image.png');
+  await page.locator('img').first().hover();
+  await page.locator('format-bar-button').first().click();
+  await page.getByPlaceholder('Write a caption').fill(sampleCaption);
+  await page.locator('img').first().dblclick();
+  const locator = page.getByTestId('image-preview-modal');
+  expect(await locator.isVisible()).toBeTruthy();
+  await page.waitForTimeout(1000);
+  let captionLocator = locator.getByTestId('image-caption-zoomedout');
+  await expect(captionLocator).toBeVisible();
+  expect(await captionLocator.innerText()).toBe(sampleCaption);
+  await page.getByTestId('zoom-in-button').click({ clickCount: 4 });
+  expect(await captionLocator.isVisible()).not.toBeTruthy();
+  captionLocator = locator.getByTestId('image-caption-zoomedin');
+  expect(await captionLocator.isVisible()).toBeTruthy();
+  expect(await captionLocator.innerText()).toBe(sampleCaption);
+});