mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-22 00:37:05 +08:00
chore: migrate blocksuite test (#9222)
This commit is contained in:
Saul-Mirone
271
blocksuite/tests-legacy/utils/actions/drag.ts
Normal file
271
blocksuite/tests-legacy/utils/actions/drag.ts
Normal file
@@ -0,0 +1,271 @@
|
||||
import type { Page } from '@playwright/test';
|
||||
import { assertImageOption } from 'utils/asserts.js';
|
||||
|
||||
import { getIndexCoordinate, waitNextFrame } from './misc.js';
|
||||
|
||||
export async function dragBetweenCoords(
|
||||
page: Page,
|
||||
from: { x: number; y: number },
|
||||
to: { x: number; y: number },
|
||||
options?: {
|
||||
beforeMouseUp?: () => Promise<void>;
|
||||
steps?: number;
|
||||
click?: boolean;
|
||||
button?: 'left' | 'right' | 'middle';
|
||||
}
|
||||
) {
|
||||
const steps = options?.steps ?? 20;
|
||||
const button: 'left' | 'right' | 'middle' = options?.button ?? 'left';
|
||||
|
||||
const { x: x1, y: y1 } = from;
|
||||
const { x: x2, y: y2 } = to;
|
||||
options?.click && (await page.mouse.click(x1, y1));
|
||||
await page.mouse.move(x1, y1);
|
||||
await page.mouse.down({ button });
|
||||
await page.mouse.move(x2, y2, { steps });
|
||||
await options?.beforeMouseUp?.();
|
||||
await page.mouse.up({ button });
|
||||
}
|
||||
|
||||
export async function dragBetweenIndices(
|
||||
page: Page,
|
||||
[startRichTextIndex, startVIndex]: [number, number],
|
||||
[endRichTextIndex, endVIndex]: [number, number],
|
||||
startCoordOffSet: { x: number; y: number } = { x: 0, y: 0 },
|
||||
endCoordOffSet: { x: number; y: number } = { x: 0, y: 0 },
|
||||
options?: {
|
||||
beforeMouseUp?: () => Promise<void>;
|
||||
steps?: number;
|
||||
click?: boolean;
|
||||
}
|
||||
) {
|
||||
const finalOptions = {
|
||||
steps: 50,
|
||||
...options,
|
||||
};
|
||||
const startCoord = await getIndexCoordinate(
|
||||
page,
|
||||
[startRichTextIndex, startVIndex],
|
||||
startCoordOffSet
|
||||
);
|
||||
const endCoord = await getIndexCoordinate(
|
||||
page,
|
||||
[endRichTextIndex, endVIndex],
|
||||
endCoordOffSet
|
||||
);
|
||||
|
||||
await dragBetweenCoords(page, startCoord, endCoord, finalOptions);
|
||||
}
|
||||
|
||||
export async function dragOverTitle(page: Page) {
|
||||
const { from, to } = await page.evaluate(() => {
|
||||
const titleInput = document.querySelector(
|
||||
'doc-title rich-text'
|
||||
) as HTMLTextAreaElement;
|
||||
const titleBound = titleInput.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
from: { x: titleBound.left + 1, y: titleBound.top + 1 },
|
||||
to: { x: titleBound.right - 1, y: titleBound.bottom - 1 },
|
||||
};
|
||||
});
|
||||
await dragBetweenCoords(page, from, to, {
|
||||
steps: 5,
|
||||
});
|
||||
}
|
||||
|
||||
export async function dragEmbedResizeByTopRight(page: Page) {
|
||||
const { from, to } = await page.evaluate(() => {
|
||||
const bottomRightButton = document.querySelector(
|
||||
'.top-right'
|
||||
) as HTMLInputElement;
|
||||
const bottomRightButtonBound = bottomRightButton.getBoundingClientRect();
|
||||
const y = bottomRightButtonBound.top;
|
||||
return {
|
||||
from: { x: bottomRightButtonBound.left + 5, y: y + 5 },
|
||||
to: { x: bottomRightButtonBound.left + 5 - 200, y },
|
||||
};
|
||||
});
|
||||
await dragBetweenCoords(page, from, to, {
|
||||
steps: 10,
|
||||
});
|
||||
}
|
||||
|
||||
export async function dragEmbedResizeByTopLeft(page: Page) {
|
||||
const { from, to } = await page.evaluate(() => {
|
||||
const bottomRightButton = document.querySelector(
|
||||
'.top-left'
|
||||
) as HTMLInputElement;
|
||||
const bottomRightButtonBound = bottomRightButton.getBoundingClientRect();
|
||||
const y = bottomRightButtonBound.top;
|
||||
return {
|
||||
from: { x: bottomRightButtonBound.left + 5, y: y + 5 },
|
||||
to: { x: bottomRightButtonBound.left + 5 + 200, y },
|
||||
};
|
||||
});
|
||||
await dragBetweenCoords(page, from, to, {
|
||||
steps: 10,
|
||||
});
|
||||
}
|
||||
|
||||
export async function dragHandleFromBlockToBlockBottomById(
|
||||
page: Page,
|
||||
sourceId: string,
|
||||
targetId: string,
|
||||
bottom = true,
|
||||
offset?: number,
|
||||
beforeMouseUp?: () => Promise<void>
|
||||
) {
|
||||
const sourceBlock = await page
|
||||
.locator(`[data-block-id="${sourceId}"]`)
|
||||
.boundingBox();
|
||||
const targetBlock = await page
|
||||
.locator(`[data-block-id="${targetId}"]`)
|
||||
.boundingBox();
|
||||
if (!sourceBlock || !targetBlock) {
|
||||
throw new Error();
|
||||
}
|
||||
await page.mouse.move(
|
||||
sourceBlock.x + sourceBlock.width / 2,
|
||||
sourceBlock.y + sourceBlock.height / 2
|
||||
);
|
||||
await waitNextFrame(page);
|
||||
const dragHandleContainer = page.locator('.affine-drag-handle-container');
|
||||
await dragHandleContainer.hover();
|
||||
const handle = await dragHandleContainer.boundingBox();
|
||||
if (!handle) {
|
||||
throw new Error();
|
||||
}
|
||||
await page.mouse.move(
|
||||
handle.x + handle.width / 2,
|
||||
handle.y + handle.height / 2,
|
||||
{ steps: 10 }
|
||||
);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(
|
||||
targetBlock.x,
|
||||
targetBlock.y + (bottom ? targetBlock.height - 1 : 1),
|
||||
{
|
||||
steps: 50,
|
||||
}
|
||||
);
|
||||
|
||||
if (offset) {
|
||||
await page.mouse.move(
|
||||
targetBlock.x + offset,
|
||||
targetBlock.y + (bottom ? targetBlock.height - 1 : 1),
|
||||
{
|
||||
steps: 50,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
if (beforeMouseUp) {
|
||||
await beforeMouseUp();
|
||||
}
|
||||
|
||||
await page.mouse.up();
|
||||
}
|
||||
|
||||
export async function dragBlockToPoint(
|
||||
page: Page,
|
||||
sourceId: string,
|
||||
point: { x: number; y: number }
|
||||
) {
|
||||
const sourceBlock = await page
|
||||
.locator(`[data-block-id="${sourceId}"]`)
|
||||
.boundingBox();
|
||||
if (!sourceBlock) {
|
||||
throw new Error();
|
||||
}
|
||||
await page.mouse.move(
|
||||
sourceBlock.x + sourceBlock.width / 2,
|
||||
sourceBlock.y + sourceBlock.height / 2
|
||||
);
|
||||
const handle = await page
|
||||
.locator('.affine-drag-handle-container')
|
||||
.boundingBox();
|
||||
if (!handle) {
|
||||
throw new Error();
|
||||
}
|
||||
await page.mouse.move(
|
||||
handle.x + handle.width / 2,
|
||||
handle.y + handle.height / 2
|
||||
);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(point.x, point.y, {
|
||||
steps: 50,
|
||||
});
|
||||
|
||||
await page.mouse.up();
|
||||
}
|
||||
|
||||
export async function moveToImage(page: Page) {
|
||||
const { x, y } = await page.evaluate(() => {
|
||||
const bottomRightButton = document.querySelector('img') as HTMLElement;
|
||||
const imageClient = bottomRightButton.getBoundingClientRect();
|
||||
const y = imageClient.top;
|
||||
return {
|
||||
x: imageClient.left + 30,
|
||||
y: y + 30,
|
||||
};
|
||||
});
|
||||
await page.mouse.move(x, y);
|
||||
}
|
||||
|
||||
export async function popImageMoreMenu(page: Page) {
|
||||
await moveToImage(page);
|
||||
await assertImageOption(page);
|
||||
const moreButton = page.locator('.image-toolbar-button.more');
|
||||
await moreButton.click();
|
||||
const menu = page.locator('.image-more-popup-menu');
|
||||
|
||||
const turnIntoCardButton = page.locator('editor-menu-action', {
|
||||
hasText: 'Turn into card view',
|
||||
});
|
||||
|
||||
const copyButton = page.locator('editor-menu-action', {
|
||||
hasText: 'Copy',
|
||||
});
|
||||
|
||||
const duplicateButton = page.locator('editor-menu-action', {
|
||||
hasText: 'Duplicate',
|
||||
});
|
||||
|
||||
const deleteButton = page.locator('editor-menu-action', {
|
||||
hasText: 'Delete',
|
||||
});
|
||||
|
||||
return {
|
||||
menu,
|
||||
copyButton,
|
||||
turnIntoCardButton,
|
||||
duplicateButton,
|
||||
deleteButton,
|
||||
};
|
||||
}
|
||||
|
||||
export async function clickBlockDragHandle(page: Page, blockId: string) {
|
||||
const blockBox = await page
|
||||
.locator(`[data-block-id="${blockId}"]`)
|
||||
.boundingBox();
|
||||
|
||||
if (!blockBox) {
|
||||
throw new Error();
|
||||
}
|
||||
await page.mouse.move(
|
||||
blockBox.x + blockBox.width / 2,
|
||||
blockBox.y + blockBox.height / 2
|
||||
);
|
||||
|
||||
const handleBox = await page
|
||||
.locator('.affine-drag-handle-container')
|
||||
.boundingBox();
|
||||
if (!handleBox) {
|
||||
throw new Error();
|
||||
}
|
||||
await page.mouse.click(
|
||||
handleBox.x + handleBox.width / 2,
|
||||
handleBox.y + handleBox.height / 2
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user