mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-21 12:06:35 +08:00
chore: migrate blocksuite test (#9222)
This commit is contained in:
Saul-Mirone
@@ -0,0 +1,25 @@
|
||||
import type { Page } from '@playwright/test';
|
||||
|
||||
import { waitNextFrame } from './misc.js';
|
||||
|
||||
export async function updateBlockType(
|
||||
page: Page,
|
||||
flavour: BlockSuite.Flavour,
|
||||
type?: string
|
||||
) {
|
||||
await page.evaluate(
|
||||
([flavour, type]) => {
|
||||
window.host.std.command
|
||||
.chain()
|
||||
.updateBlockType({
|
||||
flavour,
|
||||
props: {
|
||||
type,
|
||||
},
|
||||
})
|
||||
.run();
|
||||
},
|
||||
[flavour, type] as [BlockSuite.Flavour, string?]
|
||||
);
|
||||
await waitNextFrame(page, 400);
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import type { IPoint } from '@blocksuite/global/utils';
|
||||
import type { Page } from '@playwright/test';
|
||||
|
||||
import { toViewCoord } from './edgeless.js';
|
||||
import { waitNextFrame } from './misc.js';
|
||||
|
||||
export function getDebugMenu(page: Page) {
|
||||
const debugMenu = page.locator('starter-debug-menu');
|
||||
return {
|
||||
debugMenu,
|
||||
undoBtn: debugMenu.locator('sl-tooltip[content="Undo"]'),
|
||||
redoBtn: debugMenu.locator('sl-tooltip[content="Redo"]'),
|
||||
|
||||
blockTypeButton: debugMenu.getByRole('button', { name: 'Block Type' }),
|
||||
testOperationsButton: debugMenu.getByRole('button', {
|
||||
name: 'Test Operations',
|
||||
}),
|
||||
|
||||
pagesBtn: debugMenu.getByTestId('docs-button'),
|
||||
};
|
||||
}
|
||||
|
||||
export async function moveView(page: Page, point: [number, number]) {
|
||||
const [x, y] = await toViewCoord(page, point);
|
||||
await page.mouse.move(x, y);
|
||||
}
|
||||
|
||||
export async function click(page: Page, point: IPoint) {
|
||||
await page.mouse.click(point.x, point.y);
|
||||
}
|
||||
|
||||
export async function clickView(page: Page, point: [number, number]) {
|
||||
const [x, y] = await toViewCoord(page, point);
|
||||
await page.mouse.click(x, y);
|
||||
}
|
||||
|
||||
export async function dblclickView(page: Page, point: [number, number]) {
|
||||
const [x, y] = await toViewCoord(page, point);
|
||||
await page.mouse.dblclick(x, y);
|
||||
}
|
||||
|
||||
export async function undoByClick(page: Page) {
|
||||
await getDebugMenu(page).undoBtn.click();
|
||||
}
|
||||
|
||||
export async function redoByClick(page: Page) {
|
||||
await getDebugMenu(page).redoBtn.click();
|
||||
}
|
||||
|
||||
export async function clickBlockById(page: Page, id: string) {
|
||||
await page.click(`[data-block-id="${id}"]`);
|
||||
}
|
||||
|
||||
export async function doubleClickBlockById(page: Page, id: string) {
|
||||
await page.dblclick(`[data-block-id="${id}"]`);
|
||||
}
|
||||
|
||||
export async function disconnectByClick(page: Page) {
|
||||
await clickTestOperationsMenuItem(page, 'Disconnect');
|
||||
}
|
||||
|
||||
export async function connectByClick(page: Page) {
|
||||
await clickTestOperationsMenuItem(page, 'Connect');
|
||||
}
|
||||
|
||||
export async function addNoteByClick(page: Page) {
|
||||
await clickTestOperationsMenuItem(page, 'Add Note');
|
||||
}
|
||||
|
||||
export async function addNewPage(page: Page) {
|
||||
const { pagesBtn } = getDebugMenu(page);
|
||||
if (!(await page.locator('docs-panel').isVisible())) {
|
||||
await pagesBtn.click();
|
||||
}
|
||||
await page.locator('.new-doc-button').click();
|
||||
const docMetas = await page.evaluate(() => {
|
||||
const { collection } = window;
|
||||
return collection.meta.docMetas;
|
||||
});
|
||||
if (!docMetas.length) throw new Error('Add new doc failed');
|
||||
return docMetas[docMetas.length - 1];
|
||||
}
|
||||
|
||||
export async function switchToPage(page: Page, docId?: string) {
|
||||
await page.evaluate(docId => {
|
||||
const { collection, editor } = window;
|
||||
|
||||
if (!docId) {
|
||||
const docMetas = collection.meta.docMetas;
|
||||
if (!docMetas.length) return;
|
||||
docId = docMetas[0].id;
|
||||
}
|
||||
|
||||
const doc = collection.getDoc(docId);
|
||||
if (!doc) return;
|
||||
editor.doc = doc;
|
||||
}, docId);
|
||||
}
|
||||
|
||||
export async function clickTestOperationsMenuItem(page: Page, name: string) {
|
||||
const menuButton = getDebugMenu(page).testOperationsButton;
|
||||
await menuButton.click();
|
||||
await waitNextFrame(page); // wait for animation ended
|
||||
|
||||
const menuItem = page.getByRole('menuitem', { name });
|
||||
await menuItem.click();
|
||||
await menuItem.waitFor({ state: 'hidden' }); // wait for animation ended
|
||||
}
|
||||
|
||||
export async function switchReadonly(page: Page, value = true) {
|
||||
await page.evaluate(_value => {
|
||||
const defaultPage = document.querySelector(
|
||||
'affine-page-root'
|
||||
) as HTMLElement & {
|
||||
doc: {
|
||||
awarenessStore: { setFlag: (key: string, value: unknown) => void };
|
||||
};
|
||||
};
|
||||
const doc = defaultPage.doc;
|
||||
doc.awarenessStore.setFlag('readonly', { 'doc:home': _value });
|
||||
}, value);
|
||||
}
|
||||
|
||||
export async function activeEmbed(page: Page) {
|
||||
await page.click('.resizable-img');
|
||||
}
|
||||
|
||||
export async function toggleDarkMode(page: Page) {
|
||||
await page.click('sl-tooltip[content="Toggle Dark Mode"] sl-button');
|
||||
}
|
||||
@@ -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
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,7 @@
|
||||
export * from './block.js';
|
||||
export * from './click.js';
|
||||
export * from './drag.js';
|
||||
export * from './edgeless.js';
|
||||
export * from './keyboard.js';
|
||||
export * from './misc.js';
|
||||
export * from './selection.js';
|
||||
@@ -0,0 +1,241 @@
|
||||
import type { Page } from '@playwright/test';
|
||||
|
||||
const IS_MAC = process.platform === 'darwin';
|
||||
// const IS_WINDOWS = process.platform === 'win32';
|
||||
// const IS_LINUX = !IS_MAC && !IS_WINDOWS;
|
||||
|
||||
/**
|
||||
* The key will be 'Meta' on Macs and 'Control' on other platforms
|
||||
* @example
|
||||
* ```ts
|
||||
* await page.keyboard.press(`${SHORT_KEY}+a`);
|
||||
* ```
|
||||
*/
|
||||
export const SHORT_KEY = IS_MAC ? 'Meta' : 'Control';
|
||||
/**
|
||||
* The key will be 'Alt' on Macs and 'Shift' on other platforms
|
||||
* @example
|
||||
* ```ts
|
||||
* await page.keyboard.press(`${SHORT_KEY}+${MODIFIER_KEY}+1`);
|
||||
* ```
|
||||
*/
|
||||
export const MODIFIER_KEY = IS_MAC ? 'Alt' : 'Shift';
|
||||
|
||||
export const SHIFT_KEY = 'Shift';
|
||||
|
||||
export async function type(page: Page, content: string, delay = 20) {
|
||||
await page.keyboard.type(content, { delay });
|
||||
}
|
||||
|
||||
export async function withPressKey(
|
||||
page: Page,
|
||||
key: string,
|
||||
fn: () => Promise<void>
|
||||
) {
|
||||
await page.keyboard.down(key);
|
||||
await fn();
|
||||
await page.keyboard.up(key);
|
||||
}
|
||||
|
||||
export async function defaultTool(page: Page) {
|
||||
await page.keyboard.press('v', { delay: 20 });
|
||||
}
|
||||
|
||||
export async function pressBackspace(page: Page, count = 1) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
await page.keyboard.press('Backspace', { delay: 20 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function pressSpace(page: Page) {
|
||||
await page.keyboard.press('Space', { delay: 20 });
|
||||
}
|
||||
|
||||
export async function pressArrowLeft(page: Page, count = 1) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
await page.keyboard.press('ArrowLeft', { delay: 20 });
|
||||
}
|
||||
}
|
||||
export async function pressArrowRight(page: Page, count = 1) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
await page.keyboard.press('ArrowRight', { delay: 20 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function pressArrowDown(page: Page, count = 1) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
await page.keyboard.press('ArrowDown', { delay: 20 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function pressArrowUp(page: Page, count = 1) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
await page.keyboard.press('ArrowUp', { delay: 20 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function pressArrowDownWithShiftKey(page: Page, count = 1) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
await page.keyboard.press(`${SHIFT_KEY}+ArrowDown`, { delay: 20 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function pressArrowUpWithShiftKey(page: Page, count = 1) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
await page.keyboard.press(`${SHIFT_KEY}+ArrowUp`, { delay: 20 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function pressEnter(page: Page, count = 1) {
|
||||
// avoid flaky test by simulate real user input
|
||||
for (let i = 0; i < count; i++) {
|
||||
await page.keyboard.press('Enter', { delay: 30 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function pressEnterWithShortkey(page: Page) {
|
||||
await page.keyboard.press(`${SHORT_KEY}+Enter`, { delay: 20 });
|
||||
}
|
||||
|
||||
export async function pressEscape(page: Page, count = 1) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
await page.keyboard.press('Escape', { delay: 20 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function undoByKeyboard(page: Page) {
|
||||
await page.keyboard.press(`${SHORT_KEY}+z`, { delay: 20 });
|
||||
}
|
||||
|
||||
export async function formatType(page: Page) {
|
||||
await page.keyboard.press(`${SHORT_KEY}+${MODIFIER_KEY}+1`, {
|
||||
delay: 20,
|
||||
});
|
||||
}
|
||||
|
||||
export async function redoByKeyboard(page: Page) {
|
||||
await page.keyboard.press(`${SHORT_KEY}+Shift+Z`, { delay: 20 });
|
||||
}
|
||||
|
||||
export async function selectAllByKeyboard(page: Page) {
|
||||
await page.keyboard.press(`${SHORT_KEY}+a`, {
|
||||
delay: 20,
|
||||
});
|
||||
}
|
||||
|
||||
export async function selectAllBlocksByKeyboard(page: Page) {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
await selectAllByKeyboard(page);
|
||||
}
|
||||
}
|
||||
|
||||
export async function pressTab(page: Page, count = 1) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
await page.keyboard.press('Tab', { delay: 20 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function pressShiftTab(page: Page) {
|
||||
await page.keyboard.press('Shift+Tab', { delay: 20 });
|
||||
}
|
||||
|
||||
export async function pressBackspaceWithShortKey(page: Page, count = 1) {
|
||||
for (let i = 0; i < count; i++) {
|
||||
await page.keyboard.press(`${SHORT_KEY}+Backspace`, { delay: 20 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function pressShiftEnter(page: Page) {
|
||||
await page.keyboard.press('Shift+Enter', { delay: 20 });
|
||||
}
|
||||
|
||||
export async function inlineCode(page: Page) {
|
||||
await page.keyboard.press(`${SHORT_KEY}+e`, { delay: 20 });
|
||||
}
|
||||
|
||||
export async function strikethrough(page: Page) {
|
||||
await page.keyboard.press(`${SHORT_KEY}+Shift+s`, { delay: 20 });
|
||||
}
|
||||
|
||||
export async function copyByKeyboard(page: Page) {
|
||||
await page.keyboard.press(`${SHORT_KEY}+c`, { delay: 20 });
|
||||
}
|
||||
|
||||
export async function cutByKeyboard(page: Page) {
|
||||
await page.keyboard.press(`${SHORT_KEY}+x`, { delay: 20 });
|
||||
}
|
||||
|
||||
/**
|
||||
* Notice: this method will try to click closest editor by default
|
||||
*/
|
||||
export async function pasteByKeyboard(page: Page, forceFocus = true) {
|
||||
if (forceFocus) {
|
||||
const isEditorActive = await page.evaluate(() =>
|
||||
document.activeElement?.closest('affine-editor-container')
|
||||
);
|
||||
if (!isEditorActive) {
|
||||
await page.click('affine-editor-container');
|
||||
}
|
||||
}
|
||||
|
||||
await page.keyboard.press(`${SHORT_KEY}+v`, { delay: 20 });
|
||||
}
|
||||
|
||||
export async function createCodeBlock(page: Page) {
|
||||
await page.keyboard.press(`${SHORT_KEY}+Alt+c`);
|
||||
}
|
||||
|
||||
export async function getCursorBlockIdAndHeight(
|
||||
page: Page
|
||||
): Promise<[string | null, number | null]> {
|
||||
return page.evaluate(() => {
|
||||
const selection = window.getSelection() as Selection;
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
const startContainer =
|
||||
range.startContainer instanceof Text
|
||||
? (range.startContainer.parentElement as HTMLElement)
|
||||
: (range.startContainer as HTMLElement);
|
||||
|
||||
const startComponent = startContainer.closest(`[data-block-id]`);
|
||||
const { height } = (startComponent as HTMLElement).getBoundingClientRect();
|
||||
const id = (startComponent as HTMLElement).dataset.blockId!;
|
||||
return [id, height];
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* fill a line by keep triggering key input
|
||||
* @param page
|
||||
* @param toNext if true, fill until soft wrap
|
||||
*/
|
||||
export async function fillLine(page: Page, toNext = false) {
|
||||
const [id, height] = await getCursorBlockIdAndHeight(page);
|
||||
if (id && height) {
|
||||
let nextHeight;
|
||||
// type until current block height is changed, means has new line
|
||||
do {
|
||||
await page.keyboard.type('a', { delay: 20 });
|
||||
[, nextHeight] = await getCursorBlockIdAndHeight(page);
|
||||
} while (nextHeight === height);
|
||||
if (!toNext) {
|
||||
await page.keyboard.press('Backspace');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function pressForwardDelete(page: Page) {
|
||||
if (IS_MAC) {
|
||||
await page.keyboard.press('Control+d', { delay: 20 });
|
||||
} else {
|
||||
await page.keyboard.press('Delete', { delay: 20 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function pressForwardDeleteWord(page: Page) {
|
||||
if (IS_MAC) {
|
||||
await page.keyboard.press('Alt+Delete', { delay: 20 });
|
||||
} else {
|
||||
await page.keyboard.press('Control+Delete', { delay: 20 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { expect, type Page } from '@playwright/test';
|
||||
|
||||
import { pressEnter, type } from './keyboard.js';
|
||||
|
||||
export function getLinkedDocPopover(page: Page) {
|
||||
const REFERENCE_NODE = ' ' as const;
|
||||
const refNode = page.locator('affine-reference');
|
||||
const linkedDocPopover = page.locator('.linked-doc-popover');
|
||||
const pageBtn = linkedDocPopover.locator('.group > icon-button');
|
||||
|
||||
const findRefNode = async (title: string) => {
|
||||
const refNode = page.locator(`affine-reference`, {
|
||||
has: page.locator(`.affine-reference-title[data-title="${title}"]`),
|
||||
});
|
||||
await expect(refNode).toBeVisible();
|
||||
return refNode;
|
||||
};
|
||||
const assertExistRefText = async (text: string) => {
|
||||
await expect(refNode).toBeVisible();
|
||||
const refTitleNode = refNode.locator('.affine-reference-title');
|
||||
// Since the text is in the pseudo element
|
||||
// we need to use `toHaveAttribute` to assert it.
|
||||
// And it's not a good strict way to assert the text.
|
||||
await expect(refTitleNode).toHaveAttribute('data-title', text);
|
||||
};
|
||||
|
||||
const createDoc = async (
|
||||
pageType: 'LinkedPage' | 'Subpage',
|
||||
pageName?: string
|
||||
) => {
|
||||
await type(page, '@');
|
||||
await expect(linkedDocPopover).toBeVisible();
|
||||
if (pageName) {
|
||||
await type(page, pageName);
|
||||
} else {
|
||||
pageName = 'Untitled';
|
||||
}
|
||||
|
||||
await page.keyboard.press('ArrowUp');
|
||||
if (pageType === 'LinkedPage') {
|
||||
await page.keyboard.press('ArrowUp');
|
||||
}
|
||||
await pressEnter(page);
|
||||
return findRefNode(pageName);
|
||||
};
|
||||
|
||||
const assertActivePageIdx = async (idx: number) => {
|
||||
if (idx !== 0) {
|
||||
await expect(pageBtn.nth(0)).toHaveAttribute('hover', 'false');
|
||||
}
|
||||
await expect(pageBtn.nth(idx)).toHaveAttribute('hover', 'true');
|
||||
};
|
||||
|
||||
return {
|
||||
REFERENCE_NODE,
|
||||
linkedDocPopover,
|
||||
refNode,
|
||||
pageBtn,
|
||||
|
||||
findRefNode,
|
||||
assertExistRefText,
|
||||
createLinkedDoc: async (pageName?: string) =>
|
||||
createDoc('LinkedPage', pageName),
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
createSubpage: async (pageName?: string) => createDoc('Subpage', pageName),
|
||||
assertActivePageIdx,
|
||||
};
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,45 @@
|
||||
import type { Page } from '@playwright/test';
|
||||
|
||||
export async function getRichTextBoundingBox(
|
||||
page: Page,
|
||||
blockId: string
|
||||
): Promise<DOMRect> {
|
||||
return page.evaluate(id => {
|
||||
const paragraph = document.querySelector(
|
||||
`[data-block-id="${id}"] .inline-editor`
|
||||
);
|
||||
const bbox = paragraph?.getBoundingClientRect() as DOMRect;
|
||||
return bbox;
|
||||
}, blockId);
|
||||
}
|
||||
|
||||
interface Rect {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export async function clickInEdge(page: Page, rect: Rect) {
|
||||
const edgeX = rect.x + rect.width / 2;
|
||||
const edgeY = rect.y + rect.height - 5;
|
||||
await page.mouse.click(edgeX, edgeY);
|
||||
}
|
||||
|
||||
export async function clickInCenter(page: Page, rect: Rect) {
|
||||
const centerX = rect.x + rect.width / 2;
|
||||
const centerY = rect.y + rect.height / 2;
|
||||
await page.mouse.click(centerX, centerY);
|
||||
}
|
||||
|
||||
export async function getBoundingRect(
|
||||
page: Page,
|
||||
selector: string
|
||||
): Promise<Rect> {
|
||||
const div = page.locator(selector);
|
||||
const boundingRect = await div.boundingBox();
|
||||
if (!boundingRect) {
|
||||
throw new Error(`Missing ${selector}`);
|
||||
}
|
||||
return boundingRect;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,48 @@
|
||||
import type { RefNodeSlotsProvider, TestUtils } from '@blocks/index.js';
|
||||
import type {
|
||||
EditorHost,
|
||||
ExtensionType,
|
||||
WidgetViewMapIdentifier,
|
||||
} from '@blocksuite/block-std';
|
||||
import type { AffineEditorContainer } from '@blocksuite/presets';
|
||||
import type { StarterDebugMenu } from '@playground/apps/_common/components/starter-debug-menu.js';
|
||||
import type { BlockModel, Doc, DocCollection, Job } from '@store/index.js';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
/** Available on playground window
|
||||
* the following instance are initialized in `packages/playground/apps/starter/main.ts`
|
||||
*/
|
||||
$blocksuite: {
|
||||
store: typeof import('../../packages/framework/store/src/index.js');
|
||||
blocks: typeof import('../../packages/blocks/src/index.js');
|
||||
global: {
|
||||
utils: typeof import('../../packages/framework/global/src/utils.js');
|
||||
};
|
||||
editor: typeof import('../../packages/presets/src/index.js');
|
||||
identifiers: {
|
||||
WidgetViewMapIdentifier: typeof WidgetViewMapIdentifier;
|
||||
QuickSearchProvider: typeof import('../../packages/affine/shared/src/services/quick-search-service.js').QuickSearchProvider;
|
||||
DocModeProvider: typeof import('../../packages/affine/shared/src/services/doc-mode-service.js').DocModeProvider;
|
||||
ThemeProvider: typeof import('../../packages/affine/shared/src/services/theme-service.js').ThemeProvider;
|
||||
RefNodeSlotsProvider: typeof RefNodeSlotsProvider;
|
||||
ParseDocUrlService: typeof import('../../packages/affine/shared/src/services/parse-url-service.js').ParseDocUrlProvider;
|
||||
};
|
||||
defaultExtensions: () => ExtensionType[];
|
||||
extensions: {
|
||||
WidgetViewMapExtension: typeof import('../../packages/framework/block-std/src/extension/widget-view-map.js').WidgetViewMapExtension;
|
||||
};
|
||||
mockServices: {
|
||||
mockDocModeService: typeof import('../../packages/playground/apps/_common/mock-services.js').mockDocModeService;
|
||||
};
|
||||
};
|
||||
collection: DocCollection;
|
||||
blockSchema: Record<string, typeof BlockModel>;
|
||||
doc: Doc;
|
||||
debugMenu: StarterDebugMenu;
|
||||
editor: AffineEditorContainer;
|
||||
host: EditorHost;
|
||||
testUtils: TestUtils;
|
||||
job: Job;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import type { BlockSnapshot } from '@store/index.js';
|
||||
|
||||
export function ignoreFields(target: unknown, keys: string[]): unknown {
|
||||
if (Array.isArray(target)) {
|
||||
return target.map((item: unknown) => ignoreFields(item, keys));
|
||||
} else if (typeof target === 'object' && target !== null) {
|
||||
return Object.keys(target).reduce(
|
||||
(acc: Record<string, unknown>, key: string) => {
|
||||
if (keys.includes(key)) {
|
||||
acc[key] = '*';
|
||||
} else {
|
||||
acc[key] = ignoreFields(
|
||||
(target as Record<string, unknown>)[key],
|
||||
keys
|
||||
);
|
||||
}
|
||||
return acc;
|
||||
},
|
||||
{}
|
||||
);
|
||||
}
|
||||
return target;
|
||||
}
|
||||
|
||||
export function ignoreSnapshotId(snapshot: BlockSnapshot) {
|
||||
const ignored = ignoreFields(snapshot, ['id']);
|
||||
return JSON.stringify(ignored, null, 2);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import type { Page } from '@playwright/test';
|
||||
|
||||
import { currentEditorIndex } from './multiple-editor.js';
|
||||
|
||||
export async function getStringFromRichText(
|
||||
page: Page,
|
||||
index = 0
|
||||
): Promise<string> {
|
||||
await page.waitForTimeout(50);
|
||||
return page.evaluate(
|
||||
([index, currentEditorIndex]) => {
|
||||
const editorHost =
|
||||
document.querySelectorAll('editor-host')[currentEditorIndex];
|
||||
const richTexts = editorHost.querySelectorAll('rich-text');
|
||||
|
||||
if (!richTexts) {
|
||||
throw new Error('Cannot find rich-text');
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const editor = (richTexts[index] as any).inlineEditor;
|
||||
return editor.yText.toString();
|
||||
},
|
||||
[index, currentEditorIndex]
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import process from 'node:process';
|
||||
|
||||
const editorIndex = {
|
||||
0: 0,
|
||||
1: 1,
|
||||
}[process.env.MULTIPLE_EDITOR_INDEX ?? ''];
|
||||
export const scope =
|
||||
editorIndex == null
|
||||
? undefined
|
||||
: editorIndex === 0
|
||||
? 'FIRST | '
|
||||
: 'SECOND | ';
|
||||
export const multiEditor = scope != null;
|
||||
|
||||
export const currentEditorIndex = editorIndex ?? 0;
|
||||
@@ -0,0 +1,110 @@
|
||||
import crypto from 'node:crypto';
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import process from 'node:process';
|
||||
|
||||
import { expect, type Page, test as baseTest } from '@playwright/test';
|
||||
|
||||
import {
|
||||
enterPlaygroundRoom,
|
||||
initEmptyParagraphState,
|
||||
} from './actions/misc.js';
|
||||
import { currentEditorIndex, scope } from './multiple-editor.js';
|
||||
|
||||
const istanbulTempDir = process.env.ISTANBUL_TEMP_DIR
|
||||
? path.resolve(process.env.ISTANBUL_TEMP_DIR)
|
||||
: path.join(process.cwd(), '.nyc_output');
|
||||
|
||||
function generateUUID() {
|
||||
return crypto.randomUUID();
|
||||
}
|
||||
|
||||
const enableCoverage = !!process.env.CI || !!process.env.COVERAGE;
|
||||
export const scoped = (stringsArray: TemplateStringsArray) => {
|
||||
return `${scope ?? ''}${stringsArray.join()}`;
|
||||
};
|
||||
export const test = baseTest.extend<{}>({
|
||||
context: async ({ context }, use) => {
|
||||
if (enableCoverage) {
|
||||
await context.addInitScript(() =>
|
||||
window.addEventListener('beforeunload', () =>
|
||||
// @ts-expect-error
|
||||
window.collectIstanbulCoverage(JSON.stringify(window.__coverage__))
|
||||
)
|
||||
);
|
||||
|
||||
await fs.promises.mkdir(istanbulTempDir, { recursive: true });
|
||||
await context.exposeFunction(
|
||||
'collectIstanbulCoverage',
|
||||
(coverageJSON?: string) => {
|
||||
if (coverageJSON)
|
||||
fs.writeFileSync(
|
||||
path.join(
|
||||
istanbulTempDir,
|
||||
`playwright_coverage_${generateUUID()}.json`
|
||||
),
|
||||
coverageJSON
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
await use(context);
|
||||
if (enableCoverage) {
|
||||
for (const page of context.pages()) {
|
||||
await page.evaluate(() =>
|
||||
// @ts-expect-error
|
||||
window.collectIstanbulCoverage(JSON.stringify(window.__coverage__))
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
if (scope) {
|
||||
test.beforeEach(async ({ browser }, testInfo) => {
|
||||
if (scope && !testInfo.title.startsWith(scope)) {
|
||||
testInfo.fn = () => {
|
||||
testInfo.skip();
|
||||
};
|
||||
testInfo.skip();
|
||||
await browser.close();
|
||||
}
|
||||
});
|
||||
|
||||
let page: Page;
|
||||
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage();
|
||||
});
|
||||
|
||||
// eslint-disable-next-line no-empty-pattern
|
||||
test.afterAll(async ({}, testInfo) => {
|
||||
if (!scope || !testInfo.title.startsWith(scope)) {
|
||||
return;
|
||||
}
|
||||
const focusInSecondEditor = await page.evaluate(
|
||||
([currentEditorIndex]) => {
|
||||
const editor = document.querySelectorAll('affine-editor-container')[
|
||||
currentEditorIndex
|
||||
];
|
||||
const selection = getSelection();
|
||||
if (!selection || selection.rangeCount === 0) {
|
||||
return true;
|
||||
}
|
||||
// once the range exists, it must be in the corresponding editor
|
||||
return editor.contains(selection.getRangeAt(0).startContainer);
|
||||
},
|
||||
[currentEditorIndex]
|
||||
);
|
||||
expect(focusInSecondEditor).toBe(true);
|
||||
});
|
||||
|
||||
test('ensure enable two editor', async ({ page }) => {
|
||||
await enterPlaygroundRoom(page);
|
||||
await initEmptyParagraphState(page);
|
||||
const count = await page.evaluate(() => {
|
||||
return document.querySelectorAll('affine-editor-container').length;
|
||||
});
|
||||
|
||||
expect(count).toBe(2);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import { expect, type Page } from '@playwright/test';
|
||||
|
||||
import { waitNextFrame } from './actions/misc.js';
|
||||
import { assertAlmostEqual } from './asserts.js';
|
||||
|
||||
export function getFormatBar(page: Page) {
|
||||
const formatBar = page.locator('.affine-format-bar-widget');
|
||||
const boldBtn = formatBar.getByTestId('bold');
|
||||
const italicBtn = formatBar.getByTestId('italic');
|
||||
const underlineBtn = formatBar.getByTestId('underline');
|
||||
const strikeBtn = formatBar.getByTestId('strike');
|
||||
const codeBtn = formatBar.getByTestId('code');
|
||||
const linkBtn = formatBar.getByTestId('link');
|
||||
// highlight
|
||||
const highlightBtn = formatBar.locator('.highlight-icon');
|
||||
const redForegroundBtn = formatBar.getByTestId(
|
||||
'var(--affine-text-highlight-foreground-red)'
|
||||
);
|
||||
const createLinkedDocBtn = formatBar.getByTestId('convert-to-linked-doc');
|
||||
const defaultColorBtn = formatBar.getByTestId('unset');
|
||||
const highlight = {
|
||||
highlightBtn,
|
||||
redForegroundBtn,
|
||||
defaultColorBtn,
|
||||
};
|
||||
|
||||
const paragraphBtn = formatBar.locator(`.paragraph-button`);
|
||||
const openParagraphMenu = async () => {
|
||||
await expect(formatBar).toBeVisible();
|
||||
await paragraphBtn.hover();
|
||||
};
|
||||
|
||||
const textBtn = formatBar.getByTestId('affine:paragraph/text');
|
||||
const h1Btn = formatBar.getByTestId('affine:paragraph/h1');
|
||||
const bulletedBtn = formatBar.getByTestId('affine:list/bulleted');
|
||||
const codeBlockBtn = formatBar.getByTestId('affine:code/');
|
||||
|
||||
const moreBtn = formatBar.getByRole('button', { name: 'More' });
|
||||
const copyBtn = formatBar.getByRole('button', { name: 'Copy' });
|
||||
const duplicateBtn = formatBar.getByRole('button', { name: 'Duplicate' });
|
||||
const deleteBtn = formatBar.getByRole('button', { name: 'Delete' });
|
||||
const openMoreMenu = async () => {
|
||||
await expect(formatBar).toBeVisible();
|
||||
await moreBtn.click();
|
||||
};
|
||||
|
||||
const assertBoundingBox = async (x: number, y: number) => {
|
||||
const boundingBox = await formatBar.boundingBox();
|
||||
if (!boundingBox) {
|
||||
throw new Error("formatBar doesn't exist");
|
||||
}
|
||||
assertAlmostEqual(boundingBox.x, x, 6);
|
||||
assertAlmostEqual(boundingBox.y, y, 6);
|
||||
};
|
||||
|
||||
return {
|
||||
formatBar,
|
||||
boldBtn,
|
||||
italicBtn,
|
||||
underlineBtn,
|
||||
strikeBtn,
|
||||
codeBtn,
|
||||
linkBtn,
|
||||
highlight,
|
||||
createLinkedDocBtn,
|
||||
|
||||
openParagraphMenu,
|
||||
textBtn,
|
||||
h1Btn,
|
||||
bulletedBtn,
|
||||
codeBlockBtn,
|
||||
|
||||
moreBtn,
|
||||
openMoreMenu,
|
||||
copyBtn,
|
||||
duplicateBtn,
|
||||
deleteBtn,
|
||||
|
||||
assertBoundingBox,
|
||||
};
|
||||
}
|
||||
|
||||
export function getEmbedCardToolbar(page: Page) {
|
||||
const embedCardToolbar = page.locator('.embed-card-toolbar');
|
||||
function createButtonLocator(name: string) {
|
||||
return embedCardToolbar.getByRole('button', { name });
|
||||
}
|
||||
const copyButton = createButtonLocator('copy');
|
||||
const editButton = createButtonLocator('edit');
|
||||
const cardStyleButton = createButtonLocator('card style');
|
||||
const captionButton = createButtonLocator('caption');
|
||||
const moreButton = createButtonLocator('more');
|
||||
|
||||
const cardStyleHorizontalButton = embedCardToolbar.getByRole('button', {
|
||||
name: 'Large horizontal style',
|
||||
});
|
||||
const cardStyleListButton = embedCardToolbar.getByRole('button', {
|
||||
name: 'Small horizontal style',
|
||||
});
|
||||
|
||||
const openCardStyleMenu = async () => {
|
||||
await expect(embedCardToolbar).toBeVisible();
|
||||
await cardStyleButton.click();
|
||||
await waitNextFrame(page);
|
||||
};
|
||||
|
||||
const openMoreMenu = async () => {
|
||||
await expect(embedCardToolbar).toBeVisible();
|
||||
await moreButton.click();
|
||||
await waitNextFrame(page);
|
||||
};
|
||||
|
||||
return {
|
||||
embedCardToolbar,
|
||||
copyButton,
|
||||
editButton,
|
||||
cardStyleButton,
|
||||
captionButton,
|
||||
moreButton,
|
||||
openCardStyleMenu,
|
||||
openMoreMenu,
|
||||
cardStyleHorizontalButton,
|
||||
cardStyleListButton,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user