snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

tests/affine-local/e2e/blocksuite/embed/embed-iframe.spec.ts

@@ -0,0 +1,263 @@
+import {
+  clickEdgelessModeButton,
+  locateEditorContainer,
+  locateToolbar,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  type,
+  waitForEmptyEditor,
+} from '@affine-test/kit/utils/page-logic';
+import { expect, type Page, test } from '@playwright/test';
+
+const TEST_SPOTIFY_URL =
+  'https://open.spotify.com/episode/7makk4oTQel546B0PZlDM5';
+
+const TEST_AFFINE_URL = 'https://app.affine.pro/';
+
+const EMBED_IFRAME_BLOCK = 'affine-embed-iframe-block';
+const EMBED_EDGELESS_IFRAME_BLOCK = 'affine-embed-edgeless-iframe-block';
+const IDLE_CARD = 'embed-iframe-idle-card';
+const LINK_INPUT_POPUP = 'embed-iframe-link-input-popup';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await clickNewPageButton(page);
+  await waitForEmptyEditor(page);
+  await page.locator('affine-paragraph v-line div').click();
+});
+
+test.describe('embed iframe block', () => {
+  async function addEmbedIframeBlock(page: Page) {
+    await type(page, '/embed');
+    const embedItem = page.getByTestId('Embed');
+    await embedItem.click();
+
+    const embedIframeBlock = page.locator(EMBED_IFRAME_BLOCK);
+    await expect(embedIframeBlock).toBeVisible();
+
+    const embedIframeIdleCard = page.locator(IDLE_CARD);
+    await expect(embedIframeIdleCard).toBeVisible();
+
+    const embedIframeLinkInputPopup = page.locator(LINK_INPUT_POPUP);
+    await expect(embedIframeLinkInputPopup).toBeVisible();
+
+    const input = embedIframeLinkInputPopup.locator('input');
+    await expect(input).toBeFocused();
+
+    return {
+      embedIframeBlock,
+      embedIframeIdleCard,
+      embedIframeLinkInputPopup,
+      input,
+    };
+  }
+
+  async function openToolbarAndSwitchView(page: Page) {
+    // expect toolbar to be visible
+    const toolbar = locateToolbar(page);
+    await expect(toolbar).toBeVisible();
+
+    // switch to inline view
+    await page.getByRole('button', { name: 'Switch view' }).click();
+  }
+
+  test('add embed iframe block using slash menu', async ({ page }) => {
+    const {
+      embedIframeBlock,
+      embedIframeIdleCard,
+      embedIframeLinkInputPopup,
+      input,
+    } = await addEmbedIframeBlock(page);
+
+    await input.fill(TEST_SPOTIFY_URL);
+    await input.press('Enter');
+    await page.waitForTimeout(100);
+
+    await expect(embedIframeLinkInputPopup).not.toBeVisible();
+    await expect(embedIframeIdleCard).not.toBeVisible();
+
+    // expect the embed iframe block count is 1
+    await expect(embedIframeBlock).toHaveCount(1);
+  });
+
+  test('add bookmark when the url cannot be embedded', async ({ page }) => {
+    const {
+      embedIframeBlock,
+      embedIframeIdleCard,
+      embedIframeLinkInputPopup,
+      input,
+    } = await addEmbedIframeBlock(page);
+
+    await input.fill(TEST_AFFINE_URL);
+    await input.press('Enter');
+
+    await expect(embedIframeLinkInputPopup).not.toBeVisible();
+    await expect(embedIframeIdleCard).not.toBeVisible();
+
+    // expect the embed iframe block count is 0
+    await expect(embedIframeBlock).toHaveCount(0);
+
+    // expect the bookmark block count is 1
+    const bookmarkBlock = page.locator('affine-bookmark');
+    await expect(bookmarkBlock).toHaveCount(1);
+  });
+
+  test('add embed iframe url by clicking the idle card', async ({ page }) => {
+    const {
+      embedIframeBlock,
+      embedIframeIdleCard,
+      embedIframeLinkInputPopup,
+      input,
+    } = await addEmbedIframeBlock(page);
+    // click somewhere else to close the link input popup
+    // click position below the popup
+    const popupBoundingBox = await embedIframeLinkInputPopup.boundingBox();
+    expect(popupBoundingBox).not.toBeNull();
+    if (!popupBoundingBox) return;
+    await page.mouse.click(popupBoundingBox.x - 50, popupBoundingBox.y + 100);
+    await page.waitForTimeout(100);
+
+    await expect(embedIframeLinkInputPopup).not.toBeVisible();
+
+    // click the idle card
+    await embedIframeIdleCard.click();
+    await expect(embedIframeLinkInputPopup).toBeVisible();
+
+    // fill the url
+    await input.fill(TEST_SPOTIFY_URL);
+    await input.press('Enter');
+
+    await expect(embedIframeLinkInputPopup).not.toBeVisible();
+    await expect(embedIframeIdleCard).not.toBeVisible();
+    await expect(embedIframeBlock).toHaveCount(1);
+  });
+
+  test.describe('conversions', () => {
+    async function setupEmbedIframe(page: Page) {
+      const { embedIframeBlock, input } = await addEmbedIframeBlock(page);
+
+      // fill the url
+      await input.fill(TEST_SPOTIFY_URL);
+      await input.press('Enter');
+
+      // wait until iframe is loaded
+      await expect(embedIframeBlock).toBeVisible();
+
+      // click to select embed iframe block
+      await embedIframeBlock.click();
+
+      return { embedIframeBlock };
+    }
+
+    test('embed iframe block to link text', async ({ page }) => {
+      const { embedIframeBlock } = await setupEmbedIframe(page);
+
+      await openToolbarAndSwitchView(page);
+      await page.getByRole('button', { name: 'Inline view' }).click();
+
+      const affineLink = page.locator('affine-link');
+      await expect(affineLink).toBeVisible();
+
+      // hover affine link
+      await affineLink.hover();
+      await page.waitForTimeout(100);
+
+      // convert back to embed iframe block
+      await openToolbarAndSwitchView(page);
+      await page.getByRole('button', { name: 'Embed view' }).click();
+
+      // expect the embed iframe block count is 1
+      await expect(embedIframeBlock).toHaveCount(1);
+
+      // expect the link text content is the url
+      await expect(affineLink).toHaveCount(0);
+    });
+
+    test('embed iframe block to bookmark card', async ({ page }) => {
+      const { embedIframeBlock } = await setupEmbedIframe(page);
+
+      await openToolbarAndSwitchView(page);
+      await page.getByRole('button', { name: 'Card view' }).click();
+
+      // expect the embed iframe block count is 0
+      await expect(embedIframeBlock).toHaveCount(0);
+
+      // expect the bookmark block count is 1
+      const bookmarkBlock = page.locator('affine-bookmark');
+      await expect(bookmarkBlock).toHaveCount(1);
+
+      // click the bookmark block
+      await bookmarkBlock.click();
+
+      // convert back to embed iframe block
+      await openToolbarAndSwitchView(page);
+      await page.getByRole('button', { name: 'Embed view' }).click();
+
+      // expect the embed iframe block count is 1
+      await expect(embedIframeBlock).toHaveCount(1);
+      await expect(bookmarkBlock).toHaveCount(0);
+    });
+  });
+
+  test.describe('edgeless mode', () => {
+    // add embed iframe block to edgeless mode by cmdk menu
+    async function addEmbedEdgelessIframeBlock(page: Page) {
+      // switch to edgeless mode
+      await clickEdgelessModeButton(page);
+      const container = locateEditorContainer(page);
+      await container.click();
+
+      // press @ to trigger the menu
+      await page.keyboard.press('@');
+
+      // type spotify url
+      await page.keyboard.type(TEST_SPOTIFY_URL);
+
+      // click item which data-testid='cmdk-label'
+      await page
+        .locator(
+          `[data-testid="cmdk-label"][data-value="external-link:${TEST_SPOTIFY_URL}"]`
+        )
+        .click();
+
+      // expect the embed iframe block count is 1
+      const embedEdgelessIframeBlock = page.locator(
+        EMBED_EDGELESS_IFRAME_BLOCK
+      );
+      await expect(embedEdgelessIframeBlock).toHaveCount(1);
+    }
+
+    test('insert embed iframe block to edgeless directly', async ({ page }) => {
+      await addEmbedEdgelessIframeBlock(page);
+    });
+
+    test('convert between embed view and card view', async ({ page }) => {
+      await addEmbedEdgelessIframeBlock(page);
+
+      await openToolbarAndSwitchView(page);
+      await page.getByRole('button', { name: 'Card view' }).click();
+
+      // expect the embed iframe block count is 0
+      const embedEdgelessIframeBlock = page.locator(
+        EMBED_EDGELESS_IFRAME_BLOCK
+      );
+      await expect(embedEdgelessIframeBlock).toHaveCount(0);
+
+      // expect the bookmark block count is 1
+      const bookmarkEdgelessBlock = page.locator('affine-edgeless-bookmark');
+      await expect(bookmarkEdgelessBlock).toHaveCount(1);
+
+      // click the bookmark block
+      await bookmarkEdgelessBlock.click();
+
+      // convert back to embed view
+      await openToolbarAndSwitchView(page);
+      await page.getByRole('button', { name: 'Embed view' }).click();
+
+      // expect the embed iframe block count is 1
+      await expect(embedEdgelessIframeBlock).toHaveCount(1);
+    });
+  });
+});

tests/affine-local/e2e/blocksuite/embed/synced.spec.ts

@@ -0,0 +1,170 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickView,
+  createEdgelessNoteBlock,
+  dblclickNoteBody,
+  fitViewportToContent,
+  focusDocTitle,
+  getSelectedXYWH,
+  locateEditorContainer,
+  resizeElementByHandle,
+  scaleElementByHandle,
+} from '@affine-test/kit/utils/editor';
+import { pressEnter } from '@affine-test/kit/utils/keyboard';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  createLinkedPage,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+const title = 'Synced Block Test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page, title);
+  await pressEnter(page);
+  await page.keyboard.type('test content');
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+test('should not show hidden note in embed view page mode', async ({
+  page,
+}) => {
+  await dblclickNoteBody(page);
+  await page.keyboard.type('visible content');
+  await createEdgelessNoteBlock(page, [100, 100]);
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('hidden content');
+  await page.keyboard.press('Enter');
+
+  // create a new page and navigate
+  await createLinkedPage(page, 'Test Page');
+  const inlineLink = page.locator('affine-reference');
+  await inlineLink.dblclick();
+
+  // reference the previous page
+  await focusDocTitle(page);
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('@' + title);
+  const docPopover = page.locator('.linked-doc-popover');
+  await docPopover.getByText(/^Synced Block Test$/).click();
+
+  // switch to embed view
+  await inlineLink.hover();
+  const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
+  await toolbar.getByLabel('Switch view').click();
+  await toolbar.getByLabel('Embed view').click();
+
+  // check the content
+  const embedLink = page.locator('affine-embed-synced-doc-block');
+  await expect(embedLink.getByText(/visible content/)).toBeVisible();
+  await expect(embedLink.getByText(/hidden content/)).toBeHidden();
+});
+
+test.describe('edgeless', () => {
+  test.beforeEach(async ({ page }) => {
+    await clickNewPageButton(page);
+    await clickEdgelessModeButton(page);
+    await clickView(page, [0, 0]);
+    await page.keyboard.type('@' + title);
+    await page
+      .getByTestId('cmdk-quick-search')
+      .getByText(/^Synced Block Test$/)
+      .click();
+
+    await fitViewportToContent(page);
+  });
+
+  test.describe('header of edgeless embed synced doc', () => {
+    test('should fold button works', async ({ page }) => {
+      const embedBlock = page.locator('affine-embed-edgeless-synced-doc-block');
+      const foldButton = embedBlock.getByTestId(
+        'edgeless-embed-synced-doc-fold-button'
+      );
+      const content = embedBlock.locator('editor-host');
+
+      await expect(foldButton).toHaveAttribute('data-folded', 'false');
+      await expect(content).toBeInViewport();
+
+      await foldButton.click();
+
+      await expect(content).not.toBeInViewport();
+      await expect(foldButton).toHaveAttribute('data-folded', 'true');
+    });
+
+    test('should show title in header', async ({ page }) => {
+      const embedBlock = page.locator('affine-embed-edgeless-synced-doc-block');
+      const headerTitle = embedBlock.getByTestId(
+        'edgeless-embed-synced-doc-title'
+      );
+      await expect(headerTitle).toHaveText(title);
+    });
+  });
+
+  test.describe('size adjustment of embed synced doc', () => {
+    test.beforeEach(async ({ page }) => {
+      await scaleElementByHandle(page, [10, 10], 'bottom-right');
+    });
+
+    test('should fold embed synced doc when adjust height to smallest', async ({
+      page,
+    }) => {
+      const [, , , h] = await getSelectedXYWH(page);
+      await resizeElementByHandle(page, [0, -(h - 10)], 'bottom-right');
+
+      const embedBlock = page.locator('affine-embed-edgeless-synced-doc-block');
+      const foldButton = embedBlock.getByTestId(
+        'edgeless-embed-synced-doc-fold-button'
+      );
+      const content = embedBlock.locator('editor-host');
+
+      await expect(foldButton).toHaveAttribute('data-folded', 'true');
+      await expect(content).not.toBeInViewport();
+
+      await foldButton.click();
+      await expect(foldButton).toHaveAttribute('data-folded', 'false');
+      await expect(content).toBeInViewport();
+
+      await embedBlock.click();
+      const [, , , h2] = await getSelectedXYWH(page);
+      expect(
+        h2,
+        'should recover height when unfold embed synced doc which was resized to smallest height directly'
+      ).toEqual(h);
+    });
+
+    test('should be able to adjust height the folded embed synced doc', async ({
+      page,
+    }) => {
+      const embedBlock = page.locator('affine-embed-edgeless-synced-doc-block');
+
+      const content = embedBlock.locator('editor-host');
+      const foldButton = embedBlock.getByTestId(
+        'edgeless-embed-synced-doc-fold-button'
+      );
+      await foldButton.click();
+
+      await resizeElementByHandle(page, [50, 0], 'bottom-right');
+      await expect(content).not.toBeInViewport();
+      await expect(foldButton).toHaveAttribute('data-folded', 'true');
+
+      await resizeElementByHandle(page, [-50, 0], 'bottom-right');
+      await expect(content).not.toBeInViewport();
+      await expect(foldButton).toHaveAttribute('data-folded', 'true');
+
+      await resizeElementByHandle(page, [0, 50], 'bottom-right');
+      await expect(
+        content,
+        'should unfold the embed synced doc when adjust height to greater'
+      ).toBeInViewport();
+      await expect(foldButton).toHaveAttribute('data-folded', 'false');
+      await expect(content).toBeInViewport();
+    });
+  });
+});