feat: e2e tests for peek view (#7112)

fix AFF-1163

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -86,9 +86,18 @@ const usePatchSpecs = (page: Doc, specs: BlockSpec[]) => {
       patchReferenceRenderer(patched, reactToLit, referenceRenderer),
       confirmModal
     );
-    patched = patchPeekViewService(patched, peekViewService);
+    if (!page.readonly) {
+      patched = patchPeekViewService(patched, peekViewService);
+    }
     return patched;
-  }, [confirmModal, peekViewService, reactToLit, referenceRenderer, specs]);
+  }, [
+    confirmModal,
+    page.readonly,
+    peekViewService,
+    reactToLit,
+    referenceRenderer,
+    specs,
+  ]);
 
   return [
     patchedSpecs,

packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/switch-items.tsx

@@ -26,6 +26,7 @@ const HoverAnimateController = ({
     <StyledSwitchItem
       hide={hide}
       active={active}
+      data-active={active}
       trash={trash}
       onMouseEnter={() => {
         setStartAnimate(true);

packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/favourite-nav-item.tsx

@@ -100,6 +100,7 @@ export const FavouriteDocSidebarNavItem = ({
       <MenuLinkItem
         {...listeners}
         data-testid={`favourite-page-${pageId}`}
+        data-favourite-page-item
         icon={icon}
         data-draggable={true}
         data-dragging={isDragging}

packages/frontend/core/src/components/workspace/index.tsx

@@ -61,6 +61,7 @@ export const MainContainer = forwardRef<
       data-transparent={false}
       data-client-border={clientBorder}
       data-side-bar-open={appSideBarOpen}
+      data-testid="main-container"
       ref={ref}
     >
       {children}

packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx

@@ -42,7 +42,7 @@ export const PeekViewManagerModal = () => {
 
   return (
     <PeekViewModalContainer
-      open={show}
+      open={show && !!preview}
       target={
         activePeekView?.target instanceof HTMLElement
           ? activePeekView.target

packages/frontend/core/src/modules/workbench/view/workbench-link.tsx

@@ -18,11 +18,11 @@ export const WorkbenchLink = forwardRef<
     (typeof to === 'string' ? to : `${to.pathname}${to.search}${to.hash}`);
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
       if (onClick?.(event)) {
         return;
       }
-      event.preventDefault();
-      event.stopPropagation();
 
       if (event.ctrlKey || event.metaKey) {
         if (appSettings.enableMultiView && environment.isDesktop) {

tests/affine-local/e2e/peek-view.spec.ts

@@ -0,0 +1,198 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickPageModeButton,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  createLinkedPage,
+  waitForEmptyEditor,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await clickNewPageButton(page);
+  await waitForEmptyEditor(page);
+});
+
+test('can open peek view via link popover', async ({ page }) => {
+  await page.keyboard.press('Enter');
+  await createLinkedPage(page, 'Test Page');
+
+  await page.locator('affine-reference').hover();
+  await expect(
+    page.locator('.affine-reference-popover-container')
+  ).toBeVisible();
+
+  // click more button
+  await page
+    .locator('.affine-reference-popover-container')
+    .locator('icon-button')
+    .last()
+    .click();
+  await page.locator('icon-button:has-text("center peek")').click();
+
+  // verify peek view is opened
+  await expect(page.getByTestId('peek-view-modal')).toBeVisible();
+  await expect(page.getByTestId('peek-view-modal')).toContainText('Test Page');
+
+  // can use 'esc' to close peek view
+  await page.keyboard.press('Escape');
+  await expect(page.getByTestId('peek-view-modal')).not.toBeVisible();
+});
+
+test('can open peek view via shift+click link', async ({ page }) => {
+  await page.keyboard.press('Enter');
+  await createLinkedPage(page, 'Test Page');
+
+  await page.locator('affine-reference').click({ modifiers: ['Shift'] });
+
+  // verify peek view is opened
+  await expect(page.getByTestId('peek-view-modal')).toBeVisible();
+  await expect(page.getByTestId('peek-view-modal')).toContainText('Test Page');
+
+  // can use 'esc' to close peek view
+  await page.keyboard.press('Escape');
+  await expect(page.getByTestId('peek-view-modal')).not.toBeVisible();
+});
+
+test('can open peek view via db+click link card', async ({ page }) => {
+  await page.keyboard.press('Enter');
+  await createLinkedPage(page, 'Test Page');
+
+  await page.locator('affine-reference').hover();
+  await expect(
+    page.locator('.affine-reference-popover-container')
+  ).toBeVisible();
+
+  await page
+    .locator('.affine-reference-popover-container')
+    .locator('.affine-reference-popover-view-selector-button.embed.card-view')
+    .click();
+
+  await expect(
+    page.locator('affine-embed-linked-doc-block:has-text("Test Page")')
+  ).toBeVisible();
+
+  // double click to open peek view
+  await page.locator('affine-embed-linked-doc-block').dblclick();
+
+  // verify peek view is opened
+  await expect(page.getByTestId('peek-view-modal')).toBeVisible();
+  await expect(page.getByTestId('peek-view-modal')).toContainText('Test Page');
+
+  // verify peek view can be closed by clicking close button
+  await page
+    .locator('[data-testid="peek-view-control"][data-action-name="close"]')
+    .click();
+
+  await expect(page.getByTestId('peek-view-modal')).not.toBeVisible();
+
+  // double click to open peek view
+  await page.locator('affine-embed-linked-doc-block').dblclick();
+
+  // check if open-in-new button works
+  await page
+    .locator('[data-testid="peek-view-control"][data-action-name="open"]')
+    .click();
+
+  // verify page is routed to the linked page
+  await expect(
+    page
+      .getByTestId('main-container')
+      .locator('doc-title:has-text("Test Page")')
+  ).toBeVisible();
+});
+
+test('can open peek view for embedded frames', async ({ page }) => {
+  await page.keyboard.press('Enter');
+
+  // create a frame
+  await page.keyboard.insertText('```frame\nTest Frame\n```');
+
+  await clickEdgelessModeButton(page);
+
+  // select the note
+  await page
+    .locator('affine-note:has-text("Test Frame")')
+    .click({ force: true });
+  // enter F to create a frame
+  await page.keyboard.press('f');
+
+  // insert the frame to page
+  await page
+    .locator('edgeless-change-frame-button:has-text("Insert into Page")')
+    .click();
+
+  // switch back to page mode
+  await clickPageModeButton(page);
+
+  // hover the frame to trigger surface-ref-toolbar
+  await page.locator('affine-surface-ref .affine-surface-ref').hover();
+
+  await page
+    .locator('.surface-ref-toolbar-container')
+    .locator('icon-button:has-text("center peek")')
+    .click();
+
+  // verify peek view is opened
+  await expect(page.getByTestId('peek-view-modal')).toBeVisible();
+
+  // check if page is in edgeless mode
+  await expect(
+    page.locator('edgeless-editor').locator('edgeless-block-portal-frame')
+  ).toBeInViewport();
+
+  // close peek view
+  await page.keyboard.press('Escape');
+
+  // check if can open peek view by shift+click
+  await page
+    .locator('affine-surface-ref .affine-surface-ref')
+    .click({ modifiers: ['Shift'] });
+
+  // check if page is in edgeless mode
+  await expect(
+    page.locator('edgeless-editor').locator('edgeless-block-portal-frame')
+  ).toBeInViewport();
+
+  // close peek view
+  await page.keyboard.press('Escape');
+
+  // check if can open peek view by double click
+  await page.locator('affine-surface-ref .affine-surface-ref').dblclick();
+  // check if page is in edgeless mode
+  await expect(
+    page.locator('edgeless-editor').locator('edgeless-block-portal-frame')
+  ).toBeInViewport();
+
+  // can close modal when navigate
+  await openHomePage(page);
+  await expect(page.getByTestId('peek-view-modal')).not.toBeVisible();
+});
+
+test.skip('can open peek view for fav link', async ({ page }) => {
+  // give current page a title
+  await page.keyboard.insertText('test page title');
+  await page.getByTestId('pin-button').click();
+  await expect(page.locator('[data-testid="pin-button"].active')).toBeVisible();
+
+  await page
+    .getByTestId('favourites')
+    .locator('[data-favourite-page-item]:has-text("test page title")')
+    .click({
+      modifiers: ['Shift'],
+    });
+
+  // verify peek view is opened
+  await expect(page.getByTestId('peek-view-modal')).toBeVisible();
+  await expect(page.getByTestId('peek-view-modal')).toContainText(
+    'test page title'
+  );
+
+  // can close modal when navigate
+  await openHomePage(page);
+  await expect(page.getByTestId('peek-view-modal')).not.toBeVisible();
+});

tests/kit/utils/editor.ts

@@ -1,13 +1,21 @@
-import type { Page } from '@playwright/test';
+import { expect, type Page } from '@playwright/test';
 
 export async function clickEdgelessModeButton(page: Page) {
   await page.getByTestId('switch-edgeless-mode-button').click({
     delay: 50,
   });
+  await expect(
+    page.locator(
+      '[data-testid="switch-edgeless-mode-button"][data-active="true"]'
+    )
+  ).toBeVisible();
 }
 
 export async function clickPageModeButton(page: Page) {
-  return page.getByTestId('switch-page-mode-button').click({
+  page.getByTestId('switch-page-mode-button').click({
     delay: 50,
   });
+  await expect(
+    page.locator('[data-testid="switch-page-mode-button"][data-active="true"]')
+  ).toBeVisible();
 }

tests/kit/utils/page-logic.ts

@@ -45,11 +45,7 @@ export const createLinkedPage = async (page: Page, pageName?: string) => {
   await page.keyboard.type('@', { delay: 50 });
   const linkedPagePopover = page.locator('.linked-doc-popover');
   await expect(linkedPagePopover).toBeVisible();
-  if (pageName) {
-    await type(page, pageName);
-  } else {
-    pageName = 'Untitled';
-  }
+  await type(page, pageName || 'Untitled');
 
   await page.keyboard.press('ArrowUp');
   await page.keyboard.press('ArrowUp');