test: add some e2e tests for all pages filter (#2674)

packages/component/src/components/page-list/filter/condition.tsx

@@ -68,7 +68,7 @@ const FunctionSelect = ({
     return filterMatcher.allMatchedData(type);
   }, [value.left.name]);
   return (
-    <div>
+    <div data-testid="filter-name-select">
       {list.map(v => (
         <MenuItem
           onClick={() => {
@@ -101,7 +101,7 @@ export const Arg = ({
     return null;
   }
   return (
-    <div style={{ marginLeft: 4 }}>
+    <div data-testid="filter-arg" style={{ marginLeft: 4 }}>
       {data.render({ type, value, onChange })}
     </div>
   );

packages/component/src/components/page-list/filter/vars.tsx

@@ -60,7 +60,7 @@ export const VariableSelect = ({
   onSelect: (value: Filter) => void;
 }) => {
   return (
-    <div>
+    <div data-testid="variable-select">
       <div className={styles.variableSelectTitleStyle}>Filter</div>
       <div className={styles.variableSelectDividerStyle}></div>
       {vars
@@ -74,7 +74,12 @@ export const VariableSelect = ({
             }}
             className={styles.menuItemStyle}
           >
-            <div className={styles.menuItemTextStyle}>{v.name}</div>
+            <div
+              data-testid="variable-select-item"
+              className={styles.menuItemTextStyle}
+            >
+              {v.name}
+            </div>
           </MenuItem>
         ))}
     </div>

tests/parallels/all-page.spec.ts

@@ -54,3 +54,93 @@ test('all page can create new edgeless page', async ({ page }) => {
   await clickNewEdgelessDropdown();
   await expect(page.locator('affine-edgeless-page')).toBeVisible();
 });
+
+const closeDownloadTip = async (page: Page) => {
+  await page
+    .locator('[data-testid="download-client-tip-close-button"]')
+    .click();
+};
+
+const createFirstFilter = async (page: Page, name: string) => {
+  await page
+    .locator('[data-testid="editor-header-items"]')
+    .locator('button', { hasText: 'Filter' })
+    .click();
+  await page
+    .locator('[data-testid="variable-select-item"]', { hasText: name })
+    .click();
+};
+
+const checkFilterName = async (page: Page, name: string) => {
+  await expect(
+    await page.locator('[data-testid="filter-name"]').textContent()
+  ).toBe(name);
+};
+
+test('allow creation of filters by favorite', async ({ page }) => {
+  await openHomePage(page);
+  await waitMarkdownImported(page);
+  await clickSideBarAllPageButton(page);
+  await closeDownloadTip(page);
+  await createFirstFilter(page, 'Is Favourited');
+  await page
+    .locator('[data-testid="filter-arg"]', { hasText: 'true' })
+    .locator('div')
+    .click();
+  await expect(
+    await page.locator('[data-testid="filter-arg"]').textContent()
+  ).toBe('false');
+});
+
+const dateFormat = (date: Date) => {
+  return `${date.getFullYear()}-${(date.getMonth() + 1)
+    .toString()
+    .padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
+};
+const checkPagesCount = async (page: Page, count: number) => {
+  await expect((await page.locator('[data-testid="title"]').all()).length).toBe(
+    count
+  );
+};
+const checkDatePicker = async (page: Page, date: Date) => {
+  expect(
+    await page
+      .locator('[data-testid="filter-arg"]')
+      .locator('input')
+      .inputValue()
+  ).toBe(dateFormat(date));
+};
+const fillDatePicker = async (page: Page, date: Date) => {
+  await page
+    .locator('[data-testid="filter-arg"]')
+    .locator('input')
+    .fill(dateFormat(date));
+};
+test('allow creation of filters by created time', async ({ page }) => {
+  await openHomePage(page);
+  await waitMarkdownImported(page);
+  await clickSideBarAllPageButton(page);
+  await closeDownloadTip(page);
+  await createFirstFilter(page, 'Created');
+  await checkFilterName(page, 'after');
+  // init date
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+  await checkDatePicker(page, yesterday);
+  await checkPagesCount(page, 1);
+  // change date
+  const today = new Date();
+  await fillDatePicker(page, today);
+  await checkPagesCount(page, 0);
+  // change filter
+  await page.locator('[data-testid="filter-name"]').click();
+  await page
+    .locator('[data-testid="filter-name-select"]')
+    .locator('button', { hasText: 'before' })
+    .click();
+  const tomorrow = new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  await fillDatePicker(page, tomorrow);
+  await checkDatePicker(page, tomorrow);
+  await checkPagesCount(page, 1);
+});