Skip to content

Commit

Permalink
chore: update frame test
Browse files Browse the repository at this point in the history
  • Loading branch information
@L-Sun
L-Sun committed Oct 14, 2024
1 parent 4c84159 commit 9b0c75b
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 74 deletions.
170 changes: 97 additions & 73 deletions tests/edgeless/frame/frame.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
dragBetweenViewCoords,
edgelessCommonSetup,
getFirstContainerId,
getSelectedIds,
setEdgelessTool,
Shape,
shiftClickView,
Expand All @@ -19,11 +20,12 @@ import {
import {
pressBackspace,
pressEscape,
selectAllByKeyboard,
SHORT_KEY,
} from '../../utils/actions/keyboard.js';
import {
assertCanvasElementsCount,
assertContainerChildCount,
assertEdgelessElementBound,
assertSelectedBound,
} from '../../utils/asserts.js';
import { test } from '../../utils/playwright.js';
Expand All @@ -33,8 +35,10 @@ const createFrame = async (
coord1: [number, number],
coord2: [number, number]
) => {
await _createFrame(page, coord1, coord2);
const frameId = await _createFrame(page, coord1, coord2);
await autoFit(page);
await pressEscape(page);
return frameId;
};

test.beforeEach(async ({ page }) => {
Expand Down Expand Up @@ -122,34 +126,44 @@ test.describe('add element to frame and then move frame', () => {
test('element should be moved since it is created in frame', async ({
page,
}) => {
await createFrame(page, [50, 50], [550, 550]);
await createShapeElement(page, [100, 100], [200, 200], Shape.Square);
const frameId = await createFrame(page, [50, 50], [550, 550]);
const shapeId = await createShapeElement(
page,
[100, 100],
[200, 200],
Shape.Square
);

const noteCoord = await toViewCoord(page, [200, 200]);
await addNote(page, '', noteCoord[0], noteCoord[1]);
const noteId = await addNote(page, '', noteCoord[0], noteCoord[1]);

await pressEscape(page);

await clickView(page, [60, 60]);
await dragBetweenViewCoords(page, [60, 60], [110, 110]);

await selectAllByKeyboard(page);
await assertSelectedBound(page, [150, 150, 100, 100], 0); // shape
await assertSelectedBound(page, [100, 100, 500, 500], 1); // frame
await assertSelectedBound(page, [220, 210, 448, 92], 2); // note
await assertEdgelessElementBound(page, shapeId, [150, 150, 100, 100]);
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
await assertEdgelessElementBound(page, noteId, [220, 210, 448, 92]);
});

test('element should be not moved since it is created not in frame', async ({
page,
}) => {
await createFrame(page, [50, 50], [550, 550]);
await createShapeElement(page, [600, 600], [500, 500], Shape.Square);
const frameId = await createFrame(page, [50, 50], [550, 550]);
const shapeId = await createShapeElement(
page,
[600, 600],
[500, 500],
Shape.Square
);
await pressEscape(page);

await clickView(page, [60, 60]);
await dragBetweenViewCoords(page, [60, 60], [110, 110]);

await selectAllByKeyboard(page);
await assertSelectedBound(page, [500, 500, 100, 100], 0); // shape
await assertSelectedBound(page, [100, 100, 500, 500], 1); // frame
await assertEdgelessElementBound(page, shapeId, [500, 500, 100, 100]);
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
});
});

Expand All @@ -164,156 +178,167 @@ test.describe('add element to frame and then move frame', () => {
test('group should be moved since it is fully contained in frame', async ({
page,
}) => {
await createFrame(page, [50, 50], [550, 550]);
await createShapeElement(page, [100, 100], [200, 200], Shape.Square);
await createShapeElement(page, [150, 150], [250, 250], Shape.Square);
const [frameId, ...shapeIds] = [
await createFrame(page, [50, 50], [550, 550]),
await createShapeElement(page, [100, 100], [200, 200], Shape.Square),
await createShapeElement(page, [150, 150], [250, 250], Shape.Square),
];
await pressEscape(page);

await shiftClickView(page, [110, 110]);
await shiftClickView(page, [160, 160]);
await page.keyboard.press(`${SHORT_KEY}+g`);
const groupId = (await getSelectedIds(page))[0];
await pressEscape(page);

await clickView(page, [60, 60]);
await dragBetweenViewCoords(page, [60, 60], [110, 110]);

await selectAllByKeyboard(page);
await assertSelectedBound(page, [150, 150, 150, 150], 0); // group
await assertSelectedBound(page, [100, 100, 500, 500], 1); // frame
await assertEdgelessElementBound(page, shapeIds[0], [150, 150, 100, 100]);
await assertEdgelessElementBound(page, shapeIds[1], [200, 200, 100, 100]);
await assertEdgelessElementBound(page, groupId, [150, 150, 150, 150]);
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
});

test('group should be moved since its center is in frame', async ({
page,
}) => {
await createFrame(page, [50, 50], [550, 550]);
await createShapeElement(page, [450, 450], [550, 550], Shape.Square);
await createShapeElement(page, [500, 500], [600, 600], Shape.Square);
const [frameId, ...shapeIds] = [
await createFrame(page, [50, 50], [550, 550]),
await createShapeElement(page, [450, 450], [550, 550], Shape.Square),
await createShapeElement(page, [500, 500], [600, 600], Shape.Square),
];
await pressEscape(page);

await shiftClickView(page, [460, 460]);
await shiftClickView(page, [510, 510]);
await page.keyboard.press(`${SHORT_KEY}+g`);
const groupId = (await getSelectedIds(page))[0];
await pressEscape(page);

await clickView(page, [60, 60]);
await dragBetweenViewCoords(page, [60, 60], [110, 110]);

await selectAllByKeyboard(page);
// since the new group center is in the frame, so the group is not child of frame
await assertSelectedBound(page, [500, 500, 150, 150], 0); // group
await assertSelectedBound(page, [100, 100, 500, 500], 1); // frame
await assertEdgelessElementBound(page, shapeIds[0], [500, 500, 100, 100]);
await assertEdgelessElementBound(page, shapeIds[1], [550, 550, 100, 100]);
await assertEdgelessElementBound(page, groupId, [500, 500, 150, 150]);
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
});

test('group should not be moved since its center is not in frame', async ({
page,
}) => {
await createFrame(page, [50, 50], [550, 550]);
await createShapeElement(page, [500, 500], [600, 600], Shape.Square);
await createShapeElement(page, [550, 550], [650, 650], Shape.Square);
const [frameId, ...shapeIds] = [
await createFrame(page, [50, 50], [550, 550]),
await createShapeElement(page, [500, 500], [600, 600], Shape.Square),
await createShapeElement(page, [550, 550], [650, 650], Shape.Square),
];

await pressEscape(page);

await shiftClickView(page, [510, 510]);
await shiftClickView(page, [560, 560]);
await page.keyboard.press(`${SHORT_KEY}+g`);
const groupId = (await getSelectedIds(page))[0];

await clickView(page, [60, 60]);
await dragBetweenViewCoords(page, [60, 60], [110, 110]);

await selectAllByKeyboard(page);
// since the new group center is not in the frame, so the group is not child of frame
await assertSelectedBound(page, [500, 500, 150, 150], 0); // group
await assertSelectedBound(page, [100, 100, 500, 500], 1); // frame
await assertEdgelessElementBound(page, shapeIds[0], [500, 500, 100, 100]);
await assertEdgelessElementBound(page, shapeIds[1], [550, 550, 100, 100]);
await assertEdgelessElementBound(page, groupId, [500, 500, 150, 150]);
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
});
});

test.describe('add inner frame', () => {
test('the inner frame and its children should be moved since it is fully contained in frame', async ({
page,
}) => {
await createFrame(page, [50, 50], [550, 550]);
await pressEscape(page);
await createFrame(page, [100, 100], [300, 300]);
await pressEscape(page);
await createShapeElement(page, [150, 150], [250, 250], Shape.Square);
const [frameId, innerId, shapeId] = [
await createFrame(page, [50, 50], [550, 550]),
await createFrame(page, [100, 100], [300, 300]),
await createShapeElement(page, [150, 150], [250, 250], Shape.Square),
];
await pressEscape(page);

await clickView(page, [60, 60]);
await dragBetweenViewCoords(page, [60, 60], [110, 110]);

await selectAllByKeyboard(page);
await assertSelectedBound(page, [200, 200, 100, 100], 0); // shape
await assertSelectedBound(page, [100, 100, 500, 500], 1); // frame
await assertSelectedBound(page, [150, 150, 200, 200], 2); // inner frame
await assertEdgelessElementBound(page, shapeId, [200, 200, 100, 100]);
await assertEdgelessElementBound(page, innerId, [150, 150, 200, 200]);
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
});

test('the inner frame and its children should be moved since its center is in frame', async ({
page,
}) => {
await createFrame(page, [50, 50], [550, 550]);
await pressEscape(page);
await createFrame(page, [400, 400], [600, 600]);
await pressEscape(page);
await createShapeElement(page, [550, 550], [600, 600], Shape.Square);
const [frameId, innerId, shapeId] = [
await createFrame(page, [50, 50], [550, 550]),
await createFrame(page, [400, 400], [600, 600]),
await createShapeElement(page, [550, 550], [600, 600], Shape.Square),
];
await pressEscape(page);

await clickView(page, [60, 60]);
await dragBetweenViewCoords(page, [60, 60], [110, 110]);

await selectAllByKeyboard(page);
await assertSelectedBound(page, [600, 600, 50, 50], 0); // shape
await assertSelectedBound(page, [100, 100, 500, 500], 1); // frame
await assertSelectedBound(page, [450, 450, 200, 200], 2); // inner frame
await assertEdgelessElementBound(page, shapeId, [600, 600, 50, 50]);
await assertEdgelessElementBound(page, innerId, [450, 450, 200, 200]);
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
});

test('the inner frame and its children should also be moved even though its center is not in frame', async ({
page,
}) => {
await createFrame(page, [50, 50], [550, 550]);
await pressEscape(page);
await createFrame(page, [500, 500], [600, 600]);
await pressEscape(page);
await createShapeElement(page, [550, 550], [600, 600], Shape.Square);
await pressEscape(page);
const [frameId, innerId, shapeId] = [
await createFrame(page, [50, 50], [550, 550]),
await createFrame(page, [500, 500], [600, 600]),
await createShapeElement(page, [550, 550], [600, 600], Shape.Square),
];

await clickView(page, [60, 60]);
await dragBetweenViewCoords(page, [60, 60], [110, 110]);

await selectAllByKeyboard(page);
await assertSelectedBound(page, [600, 600, 50, 50], 0); // shape
await assertSelectedBound(page, [100, 100, 500, 500], 1); // frame
await assertSelectedBound(page, [550, 550, 100, 100], 2); // inner frame
await assertEdgelessElementBound(page, shapeId, [600, 600, 50, 50]);
await assertEdgelessElementBound(page, innerId, [550, 550, 100, 100]);
await assertEdgelessElementBound(page, frameId, [100, 100, 500, 500]);
});
});
});

test.describe('resize frame then move ', () => {
test('resize frame to warp shape', async ({ page }) => {
await createFrame(page, [50, 50], [150, 150]);
await createShapeElement(page, [200, 200], [300, 300], Shape.Square);
const [frameId, shapeId] = [
await createFrame(page, [50, 50], [150, 150]),
await createShapeElement(page, [200, 200], [300, 300], Shape.Square),
];
await pressEscape(page);

await clickView(page, [60, 60]);
await dragBetweenViewCoords(page, [150, 150], [450, 450]);

await dragBetweenViewCoords(page, [60, 60], [110, 110]);

await selectAllByKeyboard(page);
await assertSelectedBound(page, [250, 250, 100, 100], 0); // shape
await assertSelectedBound(page, [100, 100, 400, 400], 1); // frame
await assertEdgelessElementBound(page, shapeId, [250, 250, 100, 100]);
await assertEdgelessElementBound(page, frameId, [100, 100, 400, 400]);
});

test('resize frame to unwrap shape', async ({ page }) => {
await createFrame(page, [50, 50], [450, 450]);
await createShapeElement(page, [200, 200], [300, 300], Shape.Square);
const [frameId, shapeId] = [
await createFrame(page, [50, 50], [450, 450]),
await createShapeElement(page, [200, 200], [300, 300], Shape.Square),
];
await pressEscape(page);

await clickView(page, [60, 60]);
await dragBetweenViewCoords(page, [450, 450], [150, 150]);

await dragBetweenViewCoords(page, [60, 60], [110, 110]);

await selectAllByKeyboard(page);
await assertSelectedBound(page, [200, 200, 100, 100], 0); // shape
await assertSelectedBound(page, [100, 100, 100, 100], 1); // frame
await assertEdgelessElementBound(page, shapeId, [200, 200, 100, 100]);
await assertEdgelessElementBound(page, frameId, [100, 100, 100, 100]);
});
});

Expand All @@ -326,6 +351,5 @@ test('delete frame', async ({ page }) => {
await pressBackspace(page);
await expect(page.locator('affine-frame')).toHaveCount(0);

await selectAllByKeyboard(page);
await assertSelectedBound(page, [200, 200, 100, 100], 0);
await assertCanvasElementsCount(page, 0);
});
29 changes: 28 additions & 1 deletion tests/utils/actions/edgeless.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -498,6 +498,7 @@ export async function addBasicShapeElement(
) {
await setEdgelessTool(page, 'shape', shape);
await dragBetweenCoords(page, start, end, { steps: 50 });
return (await getSelectedIds(page))[0];
}

export async function addBasicConnectorElement(
Expand Down Expand Up @@ -1566,6 +1567,30 @@ export async function getConnectorPath(page: Page, index = 0): Promise<IVec[]> {
);
}

export async function getEdgelessElementBound(
page: Page,
elementId: string
): Promise<[number, number, number, number]> {
return page.evaluate(
([elementId]) => {
const container = document.querySelector('affine-edgeless-root');
if (!container) throw new Error('container not found');
const element = container.service.getElementById(elementId);
if (!element) throw new Error(`element not found: ${elementId}`);
return JSON.parse(element.xywh);
},
[elementId]
);
}

export async function getSelectedIds(page: Page) {
return page.evaluate(() => {
const container = document.querySelector('affine-edgeless-root');
if (!container) throw new Error('container not found');
return container.service.selection.selectedElements.map(e => e.id);
});
}

export async function getSelectedBoundCount(page: Page) {
return page.evaluate(() => {
const container = document.querySelector('affine-edgeless-root');
Expand Down Expand Up @@ -1727,6 +1752,7 @@ export async function createFrame(
) {
await page.keyboard.press('f');
await dragBetweenViewCoords(page, coord1, coord2);
return (await getSelectedIds(page))[0];
}

export async function createShapeElement(
Expand All @@ -1737,12 +1763,13 @@ export async function createShapeElement(
) {
const start = await toViewCoord(page, coord1);
const end = await toViewCoord(page, coord2);
await addBasicShapeElement(
const shapeId = await addBasicShapeElement(
page,
{ x: start[0], y: start[1] },
{ x: end[0], y: end[1] },
shape
);
return shapeId;
}

export async function createConnectorElement(
Expand Down
Loading

0 comments on commit 9b0c75b

Please sign in to comment.