test: add test case for quick search

packages/app/src/components/quick-search/footer.tsx

@@ -12,6 +12,7 @@ export const Footer = (props: { query: string }) => {
 
   return (
     <Command.Item
+      data-testid="quickSearch-addNewPage"
       onSelect={async () => {
         const page = await createPage({ title: query });
         openPage(page.id);

packages/app/src/components/quick-search/index.tsx

@@ -48,7 +48,12 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   }, [open, triggerQuickSearchModal]);
 
   return (
-    <Modal open={open} onClose={onClose} wrapperPosition={['top', 'center']}>
+    <Modal
+      open={open}
+      onClose={onClose}
+      wrapperPosition={['top', 'center']}
+      data-testid="quickSearch"
+    >
       <ModalWrapper
         width={620}
         style={{

packages/app/src/components/workspace-slider-bar/index.tsx

@@ -74,15 +74,14 @@ export const WorkSpaceSliderBar = () => {
         <StyledListItemForWorkspace>
           <WorkspaceSelector />
         </StyledListItemForWorkspace>
-        <Tooltip content="Search and quickly jump to a page" placement="right">
-          <StyledListItem
-            onClick={() => {
-              triggerQuickSearchModal();
-            }}
-          >
-            <SearchIcon /> Quick search
-          </StyledListItem>
-        </Tooltip>
+        <StyledListItem
+          data-testid="sliderBar-quickSearchButton"
+          onClick={() => {
+            triggerQuickSearchModal();
+          }}
+        >
+          <SearchIcon /> Quick search
+        </StyledListItem>
         <Link href={{ pathname: '/page-list/all' }}>
           <StyledListItem active={router.pathname === '/page-list/all'}>
             <AllPagesIcon /> <span>All pages</span>
@@ -136,6 +135,7 @@ export const WorkSpaceSliderBar = () => {
         visible={showTip}
       >
         <StyledArrowButton
+          data-testid="sliderBar-arrowButton"
           isShow={show}
           onClick={() => {
             setShow(!show);

tests/libs/keyboard.ts

@@ -0,0 +1,82 @@
+import type { Page } from '@playwright/test';
+
+const IS_MAC = process.platform === 'darwin';
+// const IS_WINDOWS = process.platform === 'win32';
+// const IS_LINUX = !IS_MAC && !IS_WINDOWS;
+
+async function keyDownCtrlOrMeta(page: Page) {
+  if (IS_MAC) {
+    await page.keyboard.down('Meta');
+  } else {
+    await page.keyboard.down('Control');
+  }
+}
+
+async function keyUpCtrlOrMeta(page: Page) {
+  if (IS_MAC) {
+    await page.keyboard.up('Meta');
+  } else {
+    await page.keyboard.up('Control');
+  }
+}
+async function keyDownOptionMeta(page: Page) {
+  if (IS_MAC) {
+    await page.keyboard.down('Alt');
+  } else {
+    await page.keyboard.down('Shift');
+  }
+}
+
+async function keyUpOptionMeta(page: Page) {
+  if (IS_MAC) {
+    await page.keyboard.up('Alt');
+  } else {
+    await page.keyboard.up('Shift');
+  }
+}
+
+// It's not good enough, but better than calling keyDownCtrlOrMeta and keyUpCtrlOrMeta separately
+export const withCtrlOrMeta = async (page: Page, fn: () => Promise<void>) => {
+  await keyDownCtrlOrMeta(page);
+  await fn();
+  await keyUpCtrlOrMeta(page);
+};
+
+export async function pressEnter(page: Page) {
+  // avoid flaky test by simulate real user input
+  await page.keyboard.press('Enter', { delay: 50 });
+}
+
+export async function pressTab(page: Page) {
+  await page.keyboard.press('Tab', { delay: 50 });
+}
+
+export async function pressShiftTab(page: Page) {
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('Tab', { delay: 50 });
+  await page.keyboard.up('Shift');
+}
+
+export async function pressShiftEnter(page: Page) {
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('Enter', { delay: 50 });
+  await page.keyboard.up('Shift');
+}
+
+export async function copyByKeyboard(page: Page) {
+  await keyDownCtrlOrMeta(page);
+  await page.keyboard.press('c', { delay: 50 });
+  await keyUpCtrlOrMeta(page);
+}
+
+export async function cutByKeyboard(page: Page) {
+  await keyDownCtrlOrMeta(page);
+  await page.keyboard.press('x', { delay: 50 });
+  await keyUpCtrlOrMeta(page);
+}
+
+export async function pasteByKeyboard(page: Page) {
+  await keyDownCtrlOrMeta(page);
+  await page.keyboard.press('v', { delay: 50 });
+  await keyUpCtrlOrMeta(page);
+}

tests/quick-search.spec.ts

@@ -0,0 +1,66 @@
+import { test, expect, type Page } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+import { withCtrlOrMeta } from './libs/keyboard';
+
+loadPage();
+const IS_MAC = process.platform === 'darwin';
+// const IS_WINDOWS = process.platform === 'win32';
+// const IS_LINUX = !IS_MAC && !IS_WINDOWS;
+
+const openQuickSearchByShortcut = async (page: Page) =>
+  await withCtrlOrMeta(page, () => page.keyboard.press('k', { delay: 50 }));
+
+async function assertTitleTexts(
+  page: Page,
+  texts: string[],
+  option?: { delay: number }
+) {
+  await page.mouse.move(100, 100); // move mouse for focus
+  const actual = await page
+    .locator('[class=affine-default-page-block-title]')
+    .allInnerTexts();
+  setTimeout(() => {
+    expect(actual).toEqual(texts);
+  }, option?.delay);
+}
+
+test.describe('Open quick search', () => {
+  test('Click slider bar button', async ({ page }) => {
+    const quickSearchButton = page.locator(
+      '[data-testid=sliderBar-quickSearchButton]'
+    );
+    await quickSearchButton.click();
+    const quickSearch = page.locator('[data-testid=quickSearch]');
+    expect(quickSearch.isVisible()).toEqual(true);
+  });
+  test('Click arrowDown icon after title', async ({ page }) => {
+    //header-quickSearchButton
+    const quickSearchButton = page.locator(
+      '[data-testid=header-quickSearchButton]'
+    );
+    await quickSearchButton.click();
+    const quickSearch = page.locator('[data-testid=quickSearch]');
+    expect(quickSearch.isVisible()).toEqual(true);
+  });
+  test('Press the shortcut key cmd+k', async ({ page }) => {
+    await openQuickSearchByShortcut(page);
+    const quickSearch = page.locator('[data-testid=quickSearch]');
+    expect(quickSearch.isVisible()).toEqual(true);
+  });
+});
+
+test.describe('Add new page in quick search', () => {
+  test('Create a new page without keyword', async ({ page }) => {
+    await openQuickSearchByShortcut(page);
+    const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]');
+    await addNewPage.click();
+    await assertTitleTexts(page, [''], { delay: 50 });
+  });
+  test('Create a new page with keyword', async ({ page }) => {
+    await openQuickSearchByShortcut(page);
+    await page.keyboard.insertText('test');
+    const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]');
+    await addNewPage.click();
+    await assertTitleTexts(page, ['test'], { delay: 50 });
+  });
+});