From e207aa1cb5b51d96239f8bb38f87191a9931bbaa Mon Sep 17 00:00:00 2001 From: JimmFly Date: Tue, 7 Feb 2023 10:14:23 +0800 Subject: [PATCH 1/3] test: update quick-search test case --- tests/quick-search.spec.ts | 37 ++++++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/tests/quick-search.spec.ts b/tests/quick-search.spec.ts index b45e66ff94..82e5a4db78 100644 --- a/tests/quick-search.spec.ts +++ b/tests/quick-search.spec.ts @@ -8,14 +8,19 @@ loadPage(); const openQuickSearchByShortcut = async (page: Page) => await withCtrlOrMeta(page, () => page.keyboard.press('k', { delay: 50 })); -async function assertTitleTexts(page: Page, texts: string) { - const actual = await page.evaluate(() => { - const titleElement = ( - document.querySelector('.affine-default-page-block-title') - ); - return titleElement.value; - }); - expect(actual).toEqual(texts); +async function assertTitleTexts(page: Page, texts: string, isSearch?: boolean) { + if (isSearch) { + const actual = await page.evaluate(() => { + const titleElement = ( + document.querySelector('.affine-default-page-block-title') + ); + return titleElement.value; + expect(actual).toEqual(texts); + }); + } else { + const actual = await page.title(); + expect(actual).toEqual(texts); + } } async function assertResultList(page: Page, texts: string[]) { const actual = await page.locator('[cmdk-item]').allInnerTexts(); @@ -52,14 +57,13 @@ test.describe('Open quick search', () => { }); test.describe('Add new page in quick search', () => { - // FIXME: not working test('Create a new page without keyword', async ({ page }) => { await newPage(page); await openQuickSearchByShortcut(page); const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]'); await addNewPage.click(); - await page.waitForTimeout(200); - await assertTitleTexts(page, ''); + await page.waitForTimeout(300); + await assertTitleTexts(page, 'Untitled'); }); test('Create a new page with keyword', async ({ page }) => { @@ -68,7 +72,7 @@ test.describe('Add new page in quick search', () => { await page.keyboard.insertText('test123456'); const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]'); await addNewPage.click(); - await page.waitForTimeout(200); + await page.waitForTimeout(300); await assertTitleTexts(page, 'test123456'); }); }); @@ -80,11 +84,14 @@ test.describe('Search and select', () => { await page.keyboard.insertText('test123456'); const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]'); await addNewPage.click(); - await page.waitForTimeout(200); + await page.waitForTimeout(300); + await assertTitleTexts(page, 'test123456'); await openQuickSearchByShortcut(page); await page.keyboard.insertText('test123456'); + await page.waitForTimeout(300); await assertResultList(page, ['test123456']); - await page.keyboard.press('Enter', { delay: 50 }); - await assertTitleTexts(page, 'test123456'); + await page.keyboard.press('Enter'); + await page.waitForTimeout(300); + await assertTitleTexts(page, 'test123456', true); }); }); From c0a36d36cc28e9f8a16719d15018aef0e3bde8ee Mon Sep 17 00:00:00 2001 From: JimmFly Date: Tue, 7 Feb 2023 11:07:52 +0800 Subject: [PATCH 2/3] fix: update quick search close function --- .../app/src/components/quick-search/Footer.tsx | 9 +++------ .../app/src/components/quick-search/Input.tsx | 7 ++----- .../app/src/components/quick-search/Results.tsx | 12 ++++-------- .../app/src/components/quick-search/index.tsx | 15 +++++++++------ 4 files changed, 18 insertions(+), 25 deletions(-) diff --git a/packages/app/src/components/quick-search/Footer.tsx b/packages/app/src/components/quick-search/Footer.tsx index 14b37561b6..cc84003a5b 100644 --- a/packages/app/src/components/quick-search/Footer.tsx +++ b/packages/app/src/components/quick-search/Footer.tsx @@ -1,26 +1,23 @@ import React from 'react'; import { AddIcon } from '@blocksuite/icons'; import { StyledModalFooterContent } from './style'; -import { useModal } from '@/providers/GlobalModalProvider'; import { Command } from 'cmdk'; import { usePageHelper } from '@/hooks/use-page-helper'; import { useTranslation } from '@affine/i18n'; -export const Footer = (props: { query: string }) => { - const { triggerQuickSearchModal } = useModal(); +export const Footer = (props: { query: string; onClose: () => void }) => { const { openPage, createPage } = usePageHelper(); const { t } = useTranslation(); - const query = props.query; + const { query, onClose } = props; return ( { + onClose(); const pageId = await createPage({ title: query }); if (pageId) { openPage(pageId); } - - triggerQuickSearchModal(); }} > diff --git a/packages/app/src/components/quick-search/Input.tsx b/packages/app/src/components/quick-search/Input.tsx index e39d92e6b9..2a8778da05 100644 --- a/packages/app/src/components/quick-search/Input.tsx +++ b/packages/app/src/components/quick-search/Input.tsx @@ -28,12 +28,9 @@ export const Input = (props: { }, true ); + setInputValue(props.query); return inputRef.current?.focus(); - }, [inputRef]); - useEffect(() => { - return setInputValue(props.query); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [inputRef, props.query]); return ( diff --git a/packages/app/src/components/quick-search/Results.tsx b/packages/app/src/components/quick-search/Results.tsx index 9e23c5f7c6..d7c8eddb0b 100644 --- a/packages/app/src/components/quick-search/Results.tsx +++ b/packages/app/src/components/quick-search/Results.tsx @@ -1,6 +1,5 @@ import { Command } from 'cmdk'; import { StyledListItem, StyledNotFound } from './style'; -import { useModal } from '@/providers/GlobalModalProvider'; import { PaperIcon, EdgelessIcon } from '@blocksuite/icons'; import { Dispatch, SetStateAction, useEffect, useState } from 'react'; import { useAppState } from '@/providers/app-state-provider'; @@ -12,14 +11,11 @@ import usePageHelper from '@/hooks/use-page-helper'; export const Results = (props: { query: string; loading: boolean; + onClose: () => void; setLoading: Dispatch>; setShowCreatePage: Dispatch>; }) => { - const query = props.query; - const loading = props.loading; - const setLoading = props.setLoading; - const setShowCreatePage = props.setShowCreatePage; - const { triggerQuickSearchModal } = useModal(); + const { query, loading, setLoading, setShowCreatePage, onClose } = props; const { openPage } = usePageHelper(); const router = useRouter(); const { currentWorkspace, pageList } = useAppState(); @@ -55,8 +51,8 @@ export const Results = (props: { { + onClose(); openPage(result.id); - triggerQuickSearchModal(); }} value={result.id} > @@ -86,8 +82,8 @@ export const Results = (props: { key={link.title} value={link.title} onSelect={() => { + onClose(); router.push(link.href); - triggerQuickSearchModal(); }} > diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx index 7c24f0b970..15659e5558 100644 --- a/packages/app/src/components/quick-search/index.tsx +++ b/packages/app/src/components/quick-search/index.tsx @@ -31,11 +31,16 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { const [showCreatePage, setShowCreatePage] = useState(true); const { triggerQuickSearchModal } = useModal(); + const handleClose = () => { + setQuery(''); + onClose(); + }; // Add ‘⌘+K’ shortcut keys as switches useEffect(() => { const down = (e: KeyboardEvent) => { if ((e.key === 'k' && e.metaKey) || (e.key === 'k' && e.ctrlKey)) { const selection = window.getSelection(); + setQuery(''); if (selection?.toString()) { triggerQuickSearchModal(false); return; @@ -45,9 +50,6 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { } } }; - if (!open) { - setQuery(''); - } document.addEventListener('keydown', down, { capture: true }); return () => document.removeEventListener('keydown', down, { capture: true }); @@ -64,7 +66,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { return ( @@ -108,6 +110,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { query={query} loading={loading} setLoading={setLoading} + onClose={handleClose} setShowCreatePage={setShowCreatePage} /> ) : ( @@ -115,7 +118,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { query={query} loading={loading} setLoading={setLoading} - onClose={onClose} + onClose={handleClose} setPublishWorkspaceName={setPublishWorkspaceName} /> )} @@ -125,7 +128,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => { <> -