feat: e2e tests for peek view (#7112)

fix AFF-1163
2026-09-22 03:33:06 +08:00 · 2024-05-31 10:28:42 +00:00
parent ea0059fa1b
commit 002b9e80f8
9 changed files with 226 additions and 12 deletions
@@ -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();
+});
@@ -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();
 }
@@ -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');