mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-24 09:52:49 +08:00
aae65d231c
Closes: [BS-2403](https://linear.app/affine-design/issue/BS-2403/[improvement]-edgeless-拖出-connector-时，yuan素的-toolbar-需要消失)
101 lines
2.7 KiB
TypeScript
101 lines
2.7 KiB
TypeScript
import { test } from '@affine-test/kit/playwright';
|
|
import {
|
|
clickEdgelessModeButton,
|
|
clickView,
|
|
dragView,
|
|
locateEditorContainer,
|
|
locateToolbar,
|
|
setEdgelessTool,
|
|
toViewCoord,
|
|
} from '@affine-test/kit/utils/editor';
|
|
import { openHomePage } from '@affine-test/kit/utils/load-page';
|
|
import {
|
|
clickNewPageButton,
|
|
waitForEditorLoad,
|
|
} from '@affine-test/kit/utils/page-logic';
|
|
import { expect } from '@playwright/test';
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await openHomePage(page);
|
|
await waitForEditorLoad(page);
|
|
await clickNewPageButton(page);
|
|
await clickEdgelessModeButton(page);
|
|
const container = locateEditorContainer(page);
|
|
await container.click();
|
|
});
|
|
|
|
test('should hide toolbar when creating connector', async ({ page }) => {
|
|
await setEdgelessTool(page, 'shape');
|
|
await dragView(page, [100, 300], [200, 400]);
|
|
await clickView(page, [150, 350]);
|
|
|
|
const toolbar = locateToolbar(page);
|
|
|
|
await expect(toolbar).toBeVisible();
|
|
|
|
const autoComplete = page.locator('edgeless-auto-complete');
|
|
const rightArrowButton = autoComplete
|
|
.locator('.edgeless-auto-complete-arrow')
|
|
.nth(0);
|
|
|
|
const bounds = await rightArrowButton.boundingBox();
|
|
expect(bounds).not.toBeNull();
|
|
|
|
const { x, y, width: w, height: h } = bounds!;
|
|
const startPos = [x + w / 2, y + h / 2];
|
|
const endPos = [startPos[0] + 100, startPos[1] + 100];
|
|
|
|
await page.mouse.move(startPos[0], startPos[1]);
|
|
await page.mouse.down();
|
|
await page.mouse.move(endPos[0], endPos[1]);
|
|
|
|
await expect(toolbar).toBeHidden();
|
|
|
|
await page.mouse.up();
|
|
|
|
const autoCompletePanel = page
|
|
.locator('edgeless-auto-complete-panel')
|
|
.locator('.auto-complete-panel-container');
|
|
|
|
await expect(toolbar).toBeHidden();
|
|
await expect(autoCompletePanel).toBeVisible();
|
|
});
|
|
|
|
test('should toggle toolbar when connecting target', async ({ page }) => {
|
|
await setEdgelessTool(page, 'shape');
|
|
// source
|
|
await dragView(page, [100, 300], [200, 400]);
|
|
|
|
// target
|
|
await setEdgelessTool(page, 'shape');
|
|
await dragView(page, [300, 300], [400, 400]);
|
|
|
|
await clickView(page, [150, 350]);
|
|
|
|
const toolbar = locateToolbar(page);
|
|
|
|
await expect(toolbar).toBeVisible();
|
|
|
|
const autoComplete = page.locator('edgeless-auto-complete');
|
|
const rightArrowButton = autoComplete
|
|
.locator('.edgeless-auto-complete-arrow')
|
|
.nth(0);
|
|
|
|
const bounds = await rightArrowButton.boundingBox();
|
|
expect(bounds).not.toBeNull();
|
|
|
|
const { x, y, width: w, height: h } = bounds!;
|
|
const startPos = [x + w / 2, y + h / 2];
|
|
const endPos = await toViewCoord(page, [300, 350]);
|
|
|
|
await page.mouse.move(startPos[0], startPos[1]);
|
|
await page.mouse.down();
|
|
await page.mouse.move(endPos[0], endPos[1]);
|
|
|
|
await expect(toolbar).toBeHidden();
|
|
|
|
await page.mouse.up();
|
|
|
|
await expect(toolbar).toBeVisible();
|
|
});
|