refactor(component): virtual rendering page list (#4775)

Co-authored-by: Joooye_34 <Joooye1991@gmail.com>

tests/affine-local/e2e/all-page.spec.ts

@@ -4,11 +4,11 @@ import {
   checkDatePicker,
   checkDatePickerMonth,
   checkFilterName,
-  checkPagesCount,
   clickDatePicker,
   createFirstFilter,
   createPageWithTag,
   fillDatePicker,
+  getPagesCount,
   selectDateFromDatePicker,
   selectMonthFromMonthPicker,
   selectTag,
@@ -89,8 +89,7 @@ test('allow creation of filters by created time', async ({ page }) => {
   await clickNewPageButton(page);
   await clickSideBarAllPageButton(page);
   await waitForAllPagesLoad(page);
-  const pages = await page.locator('[data-testid="page-list-item"]').all();
-  const pageCount = pages.length;
+  const pageCount = await getPagesCount(page);
   expect(pageCount).not.toBe(0);
   await createFirstFilter(page, 'Created');
   await checkFilterName(page, 'after');
@@ -98,11 +97,11 @@ test('allow creation of filters by created time', async ({ page }) => {
   const yesterday = new Date();
   yesterday.setDate(yesterday.getDate() - 1);
   await checkDatePicker(page, yesterday);
-  await checkPagesCount(page, 1);
+  expect(await getPagesCount(page)).toBe(1);
   // change date
   const today = new Date();
   await fillDatePicker(page, today);
-  await checkPagesCount(page, 0);
+  expect(await getPagesCount(page)).toBe(0);
   // change filter
   await page.getByTestId('filter-name').click();
   await page.getByTestId('filler-tag-before').click();
@@ -110,7 +109,7 @@ test('allow creation of filters by created time', async ({ page }) => {
   tomorrow.setDate(tomorrow.getDate() + 1);
   await fillDatePicker(page, tomorrow);
   await checkDatePicker(page, tomorrow);
-  await checkPagesCount(page, pageCount);
+  expect(await getPagesCount(page)).toBe(pageCount);
 });
 
 test('creation of filters by created time, then click date picker to modify the date', async ({
@@ -121,8 +120,7 @@ test('creation of filters by created time, then click date picker to modify the
   await clickNewPageButton(page);
   await clickSideBarAllPageButton(page);
   await waitForAllPagesLoad(page);
-  const pages = await page.locator('[data-testid="page-list-item"]').all();
-  const pageCount = pages.length;
+  const pageCount = await getPagesCount(page);
   expect(pageCount).not.toBe(0);
   await createFirstFilter(page, 'Created');
   await checkFilterName(page, 'after');
@@ -130,11 +128,11 @@ test('creation of filters by created time, then click date picker to modify the
   const yesterday = new Date();
   yesterday.setDate(yesterday.getDate() - 1);
   await checkDatePicker(page, yesterday);
-  await checkPagesCount(page, 1);
+  expect(await getPagesCount(page)).toBe(1);
   // change date
   const today = new Date();
   await selectDateFromDatePicker(page, today);
-  await checkPagesCount(page, 0);
+  expect(await getPagesCount(page)).toBe(0);
   // change filter
   await page.locator('[data-testid="filter-name"]').click();
   await page.getByTestId('filler-tag-before').click();
@@ -142,7 +140,7 @@ test('creation of filters by created time, then click date picker to modify the
   tomorrow.setDate(tomorrow.getDate() + 1);
   await selectDateFromDatePicker(page, tomorrow);
   await checkDatePicker(page, tomorrow);
-  await checkPagesCount(page, pageCount);
+  expect(await getPagesCount(page)).toBe(pageCount);
 });
 
 test('use monthpicker to modify the month of datepicker', async ({ page }) => {
@@ -174,8 +172,7 @@ test('allow creation of filters by tags', async ({ page }) => {
   await waitForEditorLoad(page);
   await clickSideBarAllPageButton(page);
   await waitForAllPagesLoad(page);
-  const pages = await page.locator('[data-testid="page-list-item"]').all();
-  const pageCount = pages.length;
+  const pageCount = await getPagesCount(page);
   expect(pageCount).not.toBe(0);
   await createFirstFilter(page, 'Tags');
   await checkFilterName(page, 'is not empty');
@@ -188,12 +185,12 @@ test('allow creation of filters by tags', async ({ page }) => {
   await createPageWithTag(page, { title: 'Page B', tags: ['B'] });
   await clickSideBarAllPageButton(page);
   await checkFilterName(page, 'is not empty');
-  await checkPagesCount(page, pagesWithTagsCount + 2);
+  expect(await getPagesCount(page)).toBe(pagesWithTagsCount + 2);
   await changeFilter(page, 'contains all');
-  await checkPagesCount(page, pageCount + 2);
+  expect(await getPagesCount(page)).toBe(pageCount + 2);
   await selectTag(page, 'A');
-  await checkPagesCount(page, 1);
+  expect(await getPagesCount(page)).toBe(1);
   await changeFilter(page, 'does not contains all');
   await selectTag(page, 'B');
-  await checkPagesCount(page, pageCount + 1);
+  expect(await getPagesCount(page)).toBe(pageCount + 1);
 });

tests/affine-local/e2e/local-first-workspace-list.spec.ts

@@ -1,4 +1,5 @@
 import { test } from '@affine-test/kit/playwright';
+import { getPagesCount } from '@affine-test/kit/utils/filter';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import { waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
 import { clickSideBarAllPageButton } from '@affine-test/kit/utils/sidebar';
@@ -48,13 +49,11 @@ test('create one workspace in the workspace list', async ({
   await page.keyboard.press('Escape');
   await clickSideBarAllPageButton(page);
   await page.waitForTimeout(2000);
-  const pageList = page.locator('[data-testid=page-list-item]');
-  const result = await pageList.count();
+  const result = await getPagesCount(page);
   expect(result).toBe(13);
   await page.reload();
   await page.waitForTimeout(4000);
-  const pageList1 = page.locator('[data-testid=page-list-item]');
-  const result1 = await pageList1.count();
+  const result1 = await getPagesCount(page);
   expect(result1).toBe(13);
   const currentWorkspace = await workspace.current();
 

tests/kit/utils/filter.ts

@@ -38,10 +38,17 @@ const dateFormat = (date: Date) => {
   return `${month} ${day}`;
 };
 
-export const checkPagesCount = async (page: Page, count: number) => {
-  expect(
-    (await page.locator('[data-testid="page-list-item"]').all()).length
-  ).toBe(count);
+// fixme: there could be multiple page lists in the Page
+export const getPagesCount = async (page: Page) => {
+  const locator = page.locator('[data-testid="virtualized-page-list"]');
+  const pageListCount = await locator.count();
+
+  if (pageListCount === 0) {
+    return 0;
+  }
+
+  const count = await locator.getAttribute('data-total-count');
+  return count ? parseInt(count) : 0;
 };
 
 export const checkDatePicker = async (page: Page, date: Date) => {

tests/storybook/src/stories/page-list.stories.tsx

@@ -280,7 +280,6 @@ export const FloatingToolbarStory: StoryFn<typeof FloatingToolbar> = props => {
         style={{ position: 'fixed', bottom: '20px', width: '100%' }}
         {...props}
         open={open}
-        onOpenChange={setOpen}
       >
         <FloatingToolbar.Item>10 Selected</FloatingToolbar.Item>
         <FloatingToolbar.Separator />