test(editor): move blocksuite test to tests folder (#10917)
This commit is contained in:
Saul-Mirone
223
tests/blocksuite/e2e/edgeless/note/resize.spec.ts
Normal file
223
tests/blocksuite/e2e/edgeless/note/resize.spec.ts
Normal file
@@ -0,0 +1,223 @@
|
||||
import { expect } from '@playwright/test';
|
||||
|
||||
import {
|
||||
activeNoteInEdgeless,
|
||||
enterPlaygroundRoom,
|
||||
getNoteRect,
|
||||
initEmptyEdgelessState,
|
||||
redoByClick,
|
||||
resizeElementByHandle,
|
||||
selectNoteInEdgeless,
|
||||
setEdgelessTool,
|
||||
switchEditorMode,
|
||||
triggerComponentToolbarAction,
|
||||
type,
|
||||
undoByClick,
|
||||
waitForInlineEditorStateUpdated,
|
||||
waitNextFrame,
|
||||
zoomResetByKeyboard,
|
||||
} from '../../utils/actions/index.js';
|
||||
import {
|
||||
assertBlockCount,
|
||||
assertEdgelessSelectedRect,
|
||||
assertNoteRectEqual,
|
||||
assertRectEqual,
|
||||
assertRichTexts,
|
||||
} from '../../utils/asserts.js';
|
||||
import { NOTE_MIN_HEIGHT, NOTE_MIN_WIDTH } from '../../utils/bs-alternative.js';
|
||||
import { test } from '../../utils/playwright.js';
|
||||
|
||||
test('resize note in edgeless mode', async ({ page }) => {
|
||||
await enterPlaygroundRoom(page);
|
||||
const { noteId } = await initEmptyEdgelessState(page);
|
||||
await switchEditorMode(page);
|
||||
await zoomResetByKeyboard(page);
|
||||
await activeNoteInEdgeless(page, noteId);
|
||||
await waitNextFrame(page, 400);
|
||||
await type(page, 'hello');
|
||||
await assertRichTexts(page, ['hello']);
|
||||
|
||||
// unselect note
|
||||
await page.mouse.click(50, 50);
|
||||
|
||||
expect(noteId).toBe('2'); // 0 for page, 1 for surface
|
||||
await selectNoteInEdgeless(page, noteId);
|
||||
|
||||
const initRect = await getNoteRect(page, noteId);
|
||||
await resizeElementByHandle(page, { x: -100, y: 0 }, 'bottom-left');
|
||||
|
||||
const draggedRect = await getNoteRect(page, noteId);
|
||||
assertRectEqual(draggedRect, {
|
||||
x: initRect.x - 100,
|
||||
y: initRect.y,
|
||||
w: initRect.w + 100,
|
||||
h: initRect.h,
|
||||
});
|
||||
|
||||
await switchEditorMode(page);
|
||||
await switchEditorMode(page);
|
||||
const newRect = await getNoteRect(page, noteId);
|
||||
assertRectEqual(newRect, draggedRect);
|
||||
});
|
||||
|
||||
test('resize note then collapse note', async ({ page }) => {
|
||||
await enterPlaygroundRoom(page);
|
||||
const { noteId } = await initEmptyEdgelessState(page);
|
||||
await switchEditorMode(page);
|
||||
await zoomResetByKeyboard(page);
|
||||
await activeNoteInEdgeless(page, noteId);
|
||||
await waitNextFrame(page, 400);
|
||||
await type(page, 'hello');
|
||||
await assertRichTexts(page, ['hello']);
|
||||
|
||||
// unselect note
|
||||
await page.mouse.click(50, 50);
|
||||
|
||||
expect(noteId).toBe('2'); // 0 for page, 1 for surface
|
||||
await selectNoteInEdgeless(page, noteId);
|
||||
|
||||
const initRect = await getNoteRect(page, noteId);
|
||||
|
||||
await resizeElementByHandle(page, { x: 0, y: 100 }, 'bottom-right');
|
||||
let noteRect = await getNoteRect(page, noteId);
|
||||
await expect(page.getByTestId('edgeless-note-collapse-button')).toBeVisible();
|
||||
assertRectEqual(noteRect, {
|
||||
x: initRect.x,
|
||||
y: initRect.y,
|
||||
w: initRect.w,
|
||||
h: initRect.h + 100,
|
||||
});
|
||||
|
||||
await page.getByTestId('edgeless-note-collapse-button')!.click();
|
||||
let domRect = await page.locator('affine-edgeless-note').boundingBox();
|
||||
expect(domRect!.height).toBeCloseTo(NOTE_MIN_HEIGHT);
|
||||
|
||||
await page.getByTestId('edgeless-note-collapse-button')!.click();
|
||||
domRect = await page.locator('affine-edgeless-note').boundingBox();
|
||||
expect(domRect!.height).toBeCloseTo(initRect.h + 100);
|
||||
|
||||
await selectNoteInEdgeless(page, noteId);
|
||||
await resizeElementByHandle(page, { x: 0, y: -150 }, 'bottom-right');
|
||||
|
||||
noteRect = await getNoteRect(page, noteId);
|
||||
assertRectEqual(noteRect, {
|
||||
x: initRect.x,
|
||||
y: initRect.y,
|
||||
w: initRect.w,
|
||||
h: NOTE_MIN_HEIGHT,
|
||||
});
|
||||
|
||||
await switchEditorMode(page);
|
||||
await switchEditorMode(page);
|
||||
const newRect = await getNoteRect(page, noteId);
|
||||
assertRectEqual(newRect, noteRect);
|
||||
});
|
||||
|
||||
test('resize note then auto size and custom size', async ({ page }) => {
|
||||
await enterPlaygroundRoom(page);
|
||||
const { noteId } = await initEmptyEdgelessState(page);
|
||||
await switchEditorMode(page);
|
||||
await zoomResetByKeyboard(page);
|
||||
await activeNoteInEdgeless(page, noteId);
|
||||
await waitNextFrame(page, 400);
|
||||
await type(page, 'hello');
|
||||
await assertRichTexts(page, ['hello']);
|
||||
// unselect note
|
||||
await page.mouse.click(50, 50);
|
||||
await selectNoteInEdgeless(page, noteId);
|
||||
|
||||
const initRect = await getNoteRect(page, noteId);
|
||||
|
||||
await resizeElementByHandle(page, { x: 0, y: 100 }, 'bottom-right');
|
||||
|
||||
const draggedRect = await getNoteRect(page, noteId);
|
||||
assertRectEqual(draggedRect, {
|
||||
x: initRect.x,
|
||||
y: initRect.y,
|
||||
w: initRect.w,
|
||||
h: initRect.h + 100,
|
||||
});
|
||||
|
||||
await triggerComponentToolbarAction(page, 'autoSize');
|
||||
await waitNextFrame(page, 200);
|
||||
const autoSizeRect = await getNoteRect(page, noteId);
|
||||
assertRectEqual(autoSizeRect, initRect);
|
||||
|
||||
await triggerComponentToolbarAction(page, 'autoSize');
|
||||
await waitNextFrame(page, 200);
|
||||
await assertNoteRectEqual(page, noteId, draggedRect);
|
||||
|
||||
await undoByClick(page);
|
||||
await page.mouse.click(50, 50);
|
||||
await waitNextFrame(page, 200);
|
||||
await assertNoteRectEqual(page, noteId, initRect);
|
||||
|
||||
await redoByClick(page);
|
||||
await waitNextFrame(page, 200);
|
||||
await assertNoteRectEqual(page, noteId, draggedRect);
|
||||
});
|
||||
|
||||
test('drag to add customized size note', async ({ page }) => {
|
||||
await enterPlaygroundRoom(page);
|
||||
await initEmptyEdgelessState(page);
|
||||
|
||||
await switchEditorMode(page);
|
||||
await zoomResetByKeyboard(page);
|
||||
await setEdgelessTool(page, 'note');
|
||||
// add note at 300,300
|
||||
await page.mouse.move(300, 300);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(900, 600, { steps: 10 });
|
||||
await page.mouse.up();
|
||||
// should wait for inline editor update and resizeObserver callback
|
||||
await waitForInlineEditorStateUpdated(page);
|
||||
|
||||
// assert add note success
|
||||
await assertBlockCount(page, 'edgeless-note', 2);
|
||||
|
||||
// click out of note
|
||||
await page.mouse.click(250, 200);
|
||||
// click on note to select it
|
||||
await page.mouse.click(600, 500);
|
||||
// assert selected note
|
||||
// note add on edgeless mode will have a offsetX of 30 and offsetY of 40
|
||||
await assertEdgelessSelectedRect(page, [270, 260, 600, 300]);
|
||||
});
|
||||
|
||||
test('drag to add customized size note: should clamp to min width and min height', async ({
|
||||
page,
|
||||
}) => {
|
||||
await enterPlaygroundRoom(page);
|
||||
await initEmptyEdgelessState(page);
|
||||
|
||||
await switchEditorMode(page);
|
||||
await zoomResetByKeyboard(page);
|
||||
await setEdgelessTool(page, 'note');
|
||||
|
||||
// add note at 300,300
|
||||
await page.mouse.move(300, 300);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(400, 360, { steps: 10 });
|
||||
await page.mouse.up();
|
||||
await waitNextFrame(page);
|
||||
|
||||
await waitNextFrame(page);
|
||||
|
||||
// should wait for inline editor update and resizeObserver callback
|
||||
await waitForInlineEditorStateUpdated(page);
|
||||
// assert add note success
|
||||
await assertBlockCount(page, 'edgeless-note', 2);
|
||||
|
||||
// click out of note
|
||||
await page.mouse.click(250, 200);
|
||||
// click on note to select it
|
||||
await page.mouse.click(320, 300);
|
||||
// assert selected note
|
||||
// note add on edgeless mode will have a offsetX of 30 and offsetY of 40
|
||||
await assertEdgelessSelectedRect(page, [
|
||||
270,
|
||||
260,
|
||||
NOTE_MIN_WIDTH,
|
||||
NOTE_MIN_HEIGHT,
|
||||
]);
|
||||
});
|
||||
Reference in New Issue
Block a user