test(core): add tests for card view with edgeless mode link (#8887)

Close [BS-1881](https://linear.app/affine-design/issue/BS-1881/page内的edgeless-embed-缩放和坐标定位不太对), [BS-1907](https://linear.app/affine-design/issue/BS-1907/mode=edgeless的cardview转成embed，丢失了mode信息), related PR https://github.com/toeverything/blocksuite/pull/8785, https://github.com/toeverything/blocksuite/pull/8790 This PR adds a test for the fit-to-content feature of the viewport for the embed doc block in edgeless mode.
2026-02-13 21:05:19 +00:00 · 2024-12-04 08:59:33 +00:00
parent f4f005bffb
commit f7d20880af
1 changed files with 133 additions and 0 deletions
--- a/tests/affine-local/e2e/links.spec.ts
+++ b/tests/affine-local/e2e/links.spec.ts
@@ -1,4 +1,5 @@
 import { test } from '@affine-test/kit/playwright';
+import { locateModeSwitchButton } from '@affine-test/kit/utils/editor';
 import {
  pasteByKeyboard,
  writeTextToClipboard,
@@ -447,3 +448,135 @@ test('linked doc should show markdown preview in the backlink section', async ({
  );
  await expect(page.locator('text-renderer')).toContainText('Test Page');
 });
+
+test('the viewport should be fit when the linked document is with edgeless mode', async ({
+  page,
+}) => {
+  await page.keyboard.press('Enter');
+
+  await locateModeSwitchButton(page, 'edgeless').click();
+
+  const note = page.locator('affine-edgeless-note');
+  const noteBoundingBox = await note.boundingBox();
+  expect(noteBoundingBox).not.toBeNull();
+  if (!noteBoundingBox) return;
+
+  // move viewport
+  const { x, y } = noteBoundingBox;
+  await page.mouse.click(x, y);
+  await page.keyboard.down('Space');
+  await page.waitForTimeout(50);
+  await page.mouse.down();
+  await page.mouse.move(x + 1000, y);
+  await page.mouse.up();
+  await page.keyboard.up('Space');
+
+  // create edgeless text
+  await page.keyboard.press('t');
+  await page.mouse.click(x, y);
+  await page.locator('affine-edgeless-text').waitFor({ state: 'visible' });
+  await page.keyboard.type('Edgeless Text');
+
+  const url = new URL(page.url());
+
+  await clickNewPageButton(page);
+  await page.keyboard.press('Enter');
+
+  await writeTextToClipboard(page, url.toString());
+  await pasteByKeyboard(page);
+
+  // Inline
+  await page.locator('affine-reference').hover();
+  await page.getByLabel('Switch view').click();
+  await page.getByTestId('link-to-embed').click();
+
+  const viewport = await page
+    .locator('affine-embed-synced-doc-block')
+    .boundingBox();
+  expect(viewport).not.toBeNull();
+  if (!viewport) return;
+
+  const edgelessText = await page
+    .locator('affine-embed-synced-doc-block affine-edgeless-text')
+    .boundingBox();
+  expect(edgelessText).not.toBeNull();
+  if (!edgelessText) return;
+
+  // the edgeless text should be in the viewport
+  expect(viewport.x).toBeLessThanOrEqual(edgelessText.x);
+  expect(viewport.y).toBeLessThanOrEqual(edgelessText.y);
+  expect(viewport.x + viewport.width).toBeGreaterThanOrEqual(
+    edgelessText.x + edgelessText.width
+  );
+  expect(viewport.y + viewport.height).toBeGreaterThanOrEqual(
+    edgelessText.y + edgelessText.height
+  );
+});
+
+test('should show edgeless content when switching card view of linked mode doc in edgeless', async ({
+  page,
+}) => {
+  await page.keyboard.press('Enter');
+
+  await locateModeSwitchButton(page, 'edgeless').click();
+
+  const note = page.locator('affine-edgeless-note');
+  const noteBoundingBox = await note.boundingBox();
+  expect(noteBoundingBox).not.toBeNull();
+  if (!noteBoundingBox) return;
+
+  // move viewport
+  const { x, y } = noteBoundingBox;
+  await page.mouse.click(x, y);
+  await page.keyboard.down('Space');
+  await page.waitForTimeout(50);
+  await page.mouse.down();
+  await page.mouse.move(x + 1000, y);
+  await page.mouse.up();
+  await page.keyboard.up('Space');
+
+  // create edgeless text
+  await page.keyboard.press('t');
+  await page.mouse.click(x, y);
+  await page.locator('affine-edgeless-text').waitFor({ state: 'visible' });
+  await page.keyboard.type('Edgeless Text');
+
+  const url = new URL(page.url());
+
+  await clickNewPageButton(page);
+  await locateModeSwitchButton(page, 'edgeless').click();
+
+  await page.mouse.move(x, y);
+  await writeTextToClipboard(page, url.toString());
+  await pasteByKeyboard(page);
+
+  // Inline
+  await page
+    .locator('affine-embed-edgeless-linked-doc-block')
+    .waitFor({ state: 'visible' });
+  await page.mouse.click(x - 50, y - 50);
+  await page.getByLabel('Switch view').click();
+  await page.getByTestId('link-to-embed').click();
+
+  const viewport = await page
+    .locator('affine-embed-edgeless-synced-doc-block')
+    .boundingBox();
+  expect(viewport).not.toBeNull();
+  if (!viewport) return;
+
+  const edgelessText = await page
+    .locator('affine-embed-edgeless-synced-doc-block affine-edgeless-text')
+    .boundingBox();
+  expect(edgelessText).not.toBeNull();
+  if (!edgelessText) return;
+
+  // the edgeless text should be in the viewport
+  expect(viewport.x).toBeLessThanOrEqual(edgelessText.x);
+  expect(viewport.y).toBeLessThanOrEqual(edgelessText.y);
+  expect(viewport.x + viewport.width).toBeGreaterThanOrEqual(
+    edgelessText.x + edgelessText.width
+  );
+  expect(viewport.y + viewport.height).toBeGreaterThanOrEqual(
+    edgelessText.y + edgelessText.height
+  );
+});