feat: replace menu with new design (#4012)

Co-authored-by: Alex Yang <himself65@outlook.com>

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

@@ -29,7 +29,7 @@ function getAllPage(page: Page) {
     .locator('table')
     .getByRole('button', { name: 'New Page' });
   const newPageDropdown = newPageButton.locator('svg');
-  const edgelessBlockCard = page.locator('table').getByText('New Edgeless');
+  const edgelessBlockCard = page.getByTestId('new-edgeless-button-in-all-page');
 
   async function clickNewPageButton() {
     return newPageButton.click();
@@ -106,11 +106,8 @@ test('allow creation of filters by created time', async ({ page }) => {
   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();
+  await page.getByTestId('filter-name').click();
+  await page.getByTestId('filler-tag-before').click();
   const tomorrow = new Date();
   tomorrow.setDate(tomorrow.getDate() + 1);
   await fillDatePicker(page, tomorrow);
@@ -142,10 +139,7 @@ test('creation of filters by created time, then click date picker to modify the
   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();
+  await page.getByTestId('filler-tag-before').click();
   const tomorrow = new Date();
   tomorrow.setDate(tomorrow.getDate() + 1);
   await selectDateFromDatePicker(page, tomorrow);
@@ -196,11 +190,11 @@ test('allow creation of filters by tags', async ({ page }) => {
   await createFirstFilter(page, 'Tags');
   await checkFilterName(page, 'is not empty');
   await checkPagesCount(page, pagesWithTagsCount + 2);
-  await changeFilter(page, /^contains all/);
+  await changeFilter(page, 'contains all');
   await checkPagesCount(page, pageCount + 2);
   await selectTag(page, 'A');
   await checkPagesCount(page, 1);
-  await changeFilter(page, /^does not contains all/);
+  await changeFilter(page, 'does not contains all');
   await selectTag(page, 'B');
   await checkPagesCount(page, pageCount + 1);
 });

tests/affine-local/e2e/local-first-collections-items.spec.ts

@@ -29,10 +29,7 @@ const createAndPinCollection = async (
   });
   await expect(cell).toBeVisible();
   await page.getByTestId('create-first-filter').click();
-  await page
-    .getByTestId('variable-select')
-    .locator('button', { hasText: 'Created' })
-    .click();
+  await page.getByTestId(`filler-tag-Created`).click();
   await page.getByTestId('save-as-collection').click();
   const title = page.getByTestId('input-collection-title');
   await title.isVisible();
@@ -156,7 +153,8 @@ test('create temporary filter by click tag', async ({ page }) => {
   await expect(cell).toBeVisible();
   expect(await page.getByTestId('title').count()).toBe(1);
   await page.getByTestId('filter-arg').click();
-  await page.getByRole('tooltip').getByText('TODO Tag').click();
+
+  await page.getByTestId('multi-select-TODO Tag').click();
   expect(await page.getByTestId('title').count()).toBeGreaterThanOrEqual(2);
 });
 

tests/affine-local/e2e/local-first-favorite-page.spec.ts

@@ -38,7 +38,7 @@ test('Export to html, markdown and png', async ({ page }) => {
   await waitForEditorLoad(page);
   {
     await clickPageMoreActions(page);
-    await page.getByTestId('export-menu').click();
+    await page.getByTestId('export-menu').hover();
     const downloadPromise = page.waitForEvent('download');
     await page.getByTestId('export-to-markdown').click();
     await downloadPromise;

tests/affine-local/e2e/local-first-openpage-newtab.spec.ts

@@ -25,7 +25,7 @@ test('click btn bew page and open in tab', async ({ page, workspace }) => {
     .click();
   const [newTabPage] = await Promise.all([
     page.waitForEvent('popup'),
-    page.getByRole('button', { name: 'Open in new tab' }).click(),
+    page.getByRole('menuitem', { name: 'Open in new tab' }).click(),
   ]);
 
   expect(newTabPage.url()).toBe(newPageUrl);

tests/affine-local/e2e/settings.spec.ts

@@ -39,18 +39,6 @@ test('change language using keyboard', async ({ page }) => {
     const newName = await locator.textContent();
     expect(oldName).not.toBe(newName);
   }
-  await locator.click();
-  await page.waitForTimeout(200);
-  await page.keyboard.press('ArrowUp', {
-    delay: 50,
-  });
-  await page.keyboard.press('Enter', {
-    delay: 50,
-  });
-  {
-    const newName = await locator.textContent();
-    expect(oldName).toBe(newName);
-  }
 });
 
 test('Change theme', async ({ page }) => {

tests/kit/utils/filter.ts

@@ -200,20 +200,12 @@ export const createPageWithTag = async (
   await page.keyboard.press('Escape');
 };
 
-export const changeFilter = async (page: Page, to: string | RegExp) => {
+export const changeFilter = async (page: Page, to: string) => {
   await page.getByTestId('filter-name').click();
-  await page
-    .getByTestId('filter-name-select')
-    .locator('button', { hasText: to })
-    .click();
+  await page.getByTestId(`filler-tag-${to}`).click();
 };
 
 export async function selectTag(page: Page, name: string | RegExp) {
   await page.getByTestId('filter-arg').click();
-  await page
-    .getByTestId('multi-select')
-    .getByTestId('select-option')
-    .getByText(name, { exact: true })
-    .click();
-  await page.getByTestId('filter-arg').click();
+  await page.getByTestId(`multi-select-${name}`).click();
 }