mirror of
https://github.com/toeverything/AFFiNE.git
synced 2024-11-24 08:45:12 +03:00
test: image preview e2e (#3080)
Co-authored-by: danielchim <kahungchim@gmail.com>
This commit is contained in:
Alex Yang
GitHub
parent
67fe7f04da
commit
955d80e2c1
@ -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/**/*",
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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);
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user