feat: add navigation path in quick search (#1920)

tests/libs/load-page.ts

@@ -1,6 +1,14 @@
 import type { Page } from '@playwright/test';
 
+import { getMetas } from './utils';
+
 export async function openHomePage(page: Page) {
   await page.goto('http://localhost:8080');
   await page.waitForSelector('#__next');
 }
+
+export async function initHomePageWithPinboard(page: Page) {
+  await openHomePage(page);
+  await page.waitForSelector('[data-testid="sidebar-pinboard-container"]');
+  return (await getMetas(page)).find(m => m.isRootPinboard);
+}

tests/libs/page-logic.ts

@@ -27,3 +27,21 @@ export async function clickPageMoreActions(page: Page) {
     .getByTestId('editor-option-menu')
     .click();
 }
+
+export async function createPinboardPage(
+  page: Page,
+  parentId: string,
+  title: string
+) {
+  await newPage(page);
+  await page.focus('.affine-default-page-block-title');
+  await page.type('.affine-default-page-block-title', title, {
+    delay: 100,
+  });
+  await clickPageMoreActions(page);
+  await page.getByTestId('move-to-menu-item').click();
+  await page
+    .getByTestId('pinboard-menu')
+    .getByTestId(`pinboard-${parentId}`)
+    .click();
+}

tests/parallels/pin-board.spec.ts

@@ -1,31 +1,11 @@
 import type { Page } from '@playwright/test';
 import { expect } from '@playwright/test';
 
-import { openHomePage } from '../libs/load-page';
-import { clickPageMoreActions, newPage } from '../libs/page-logic';
+import { initHomePageWithPinboard } from '../libs/load-page';
+import { createPinboardPage } from '../libs/page-logic';
 import { test } from '../libs/playwright';
 import { getMetas } from '../libs/utils';
 
-async function createPinboardPage(page: Page, parentId: string, title: string) {
-  await newPage(page);
-  await page.focus('.affine-default-page-block-title');
-  await page.type('.affine-default-page-block-title', title, {
-    delay: 100,
-  });
-  await clickPageMoreActions(page);
-  await page.getByTestId('move-to-menu-item').click();
-  await page
-    .getByTestId('pinboard-menu')
-    .getByTestId(`pinboard-${parentId}`)
-    .click();
-}
-
-async function initHomePageWithPinboard(page: Page) {
-  await openHomePage(page);
-  await page.waitForSelector('[data-testid="sidebar-pinboard-container"]');
-  return (await getMetas(page)).find(m => m.isRootPinboard);
-}
-
 async function openPinboardPageOperationMenu(page: Page, id: string) {
   const node = await page
     .getByTestId('sidebar-pinboard-container')

tests/parallels/quick-search.spec.ts

@@ -1,8 +1,12 @@
 import { expect, type Page } from '@playwright/test';
 
 import { withCtrlOrMeta } from '../libs/keyboard';
-import { openHomePage } from '../libs/load-page';
-import { newPage, waitMarkdownImported } from '../libs/page-logic';
+import { initHomePageWithPinboard, openHomePage } from '../libs/load-page';
+import {
+  createPinboardPage,
+  newPage,
+  waitMarkdownImported,
+} from '../libs/page-logic';
 import { test } from '../libs/playwright';
 
 const openQuickSearchByShortcut = async (page: Page) =>
@@ -204,4 +208,54 @@ test.describe('Novice guidance for quick search', () => {
     await page.getByTestId('sliderBar-arrowButton-collapse').click();
     await expect(quickSearchTips).not.toBeVisible();
   });
+
+  test('Show navigation path if page is a subpage', async ({ page }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test1');
+    await openQuickSearchByShortcut(page);
+    expect(await page.getByTestId('navigation-path').count()).toBe(1);
+  });
+  test('Not show navigation path if page is not a subpage or current page is not in editor', async ({
+    page,
+  }) => {
+    await openHomePage(page);
+    await waitMarkdownImported(page);
+    await openQuickSearchByShortcut(page);
+    expect(await page.getByTestId('navigation-path').count()).toBe(0);
+  });
+  test('Navigation path item click will jump to page, but not current active item', async ({
+    page,
+  }) => {
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test1');
+    await openQuickSearchByShortcut(page);
+    const oldUrl = page.url();
+    expect(
+      await page.locator('[data-testid="navigation-path-link"]').count()
+    ).toBe(2);
+    await page.locator('[data-testid="navigation-path-link"]').nth(1).click();
+    expect(page.url()).toBe(oldUrl);
+    await page.locator('[data-testid="navigation-path-link"]').nth(0).click();
+    expect(page.url()).not.toBe(oldUrl);
+  });
+  test('Navigation path expand', async ({ page }) => {
+    //
+    const rootPinboardMeta = await initHomePageWithPinboard(page);
+    await createPinboardPage(page, rootPinboardMeta?.id ?? '', 'test1');
+    await openQuickSearchByShortcut(page);
+    const top = await page
+      .getByTestId('navigation-path-expand-panel')
+      .evaluate(el => {
+        return window.getComputedStyle(el).getPropertyValue('top');
+      });
+    expect(parseInt(top)).toBeLessThan(0);
+    await page.getByTestId('navigation-path-expand-btn').click();
+    await page.waitForTimeout(500);
+    const expandTop = await page
+      .getByTestId('navigation-path-expand-panel')
+      .evaluate(el => {
+        return window.getComputedStyle(el).getPropertyValue('top');
+      });
+    expect(expandTop).toBe('0px');
+  });
 });