feat: fav page references (#2422)

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

tests/libs/page-logic.ts

@@ -1,4 +1,5 @@
 import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
 
 export async function waitMarkdownImported(page: Page) {
   await page.waitForSelector('v-line');
@@ -16,6 +17,30 @@ export function getBlockSuiteEditorTitle(page: Page) {
   return page.locator('v-line').nth(0);
 }
 
+export async function type(page: Page, content: string, delay = 50) {
+  await page.keyboard.type(content, { delay });
+}
+
+export async function pressEnter(page: Page) {
+  // avoid flaky test by simulate real user input
+  await page.keyboard.press('Enter', { delay: 50 });
+}
+
+export const createLinkedPage = async (page: Page, pageName?: string) => {
+  await page.keyboard.type('@', { delay: 50 });
+  const linkedPagePopover = page.locator('.linked-page-popover');
+  await expect(linkedPagePopover).toBeVisible();
+  if (pageName) {
+    await type(page, pageName);
+  } else {
+    pageName = 'Untitled';
+  }
+
+  await page.keyboard.press('ArrowUp');
+  await page.keyboard.press('ArrowUp');
+  await page.keyboard.press('Enter', { delay: 50 });
+};
+
 export async function clickPageMoreActions(page: Page) {
   return page
     .getByTestId('editor-header-items')

tests/parallels/local-first-favorites-items.spec.ts

@@ -4,6 +4,7 @@ import { expect } from '@playwright/test';
 import { openHomePage } from '../libs/load-page';
 import {
   clickPageMoreActions,
+  createLinkedPage,
   getBlockSuiteEditorTitle,
   newPage,
   waitMarkdownImported,
@@ -34,28 +35,39 @@ test('Show favorite items in sidebar', async ({ page }) => {
   );
 });
 
-test('Show favorite items in favorite list', async ({ page }) => {
+test('Show favorite reference in sidebar', async ({ page }) => {
   await openHomePage(page);
   await waitMarkdownImported(page);
   await newPage(page);
   await getBlockSuiteEditorTitle(page).click();
   await getBlockSuiteEditorTitle(page).fill('this is a new page to favorite');
-  await page.getByTestId('all-pages').click();
-  const cell = page.getByRole('cell', {
-    name: 'this is a new page to favorite',
-  });
-  expect(cell).not.toBeUndefined();
-  await cell.click();
+
+  // goes to main content
+  await page.keyboard.press('Enter', { delay: 50 });
+
+  await createLinkedPage(page, 'Another page');
+
+  const newPageId = page.url().split('/').reverse()[0];
+
   await clickPageMoreActions(page);
 
   const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
   await favoriteBtn.click();
 
-  await page.getByTestId('all-pages').click();
+  const favItemTestId = 'favorite-list-item-' + newPageId;
 
-  expect(
-    page.getByRole('cell', { name: 'this is a new page to favorite' })
-  ).not.toBeUndefined();
+  const favoriteListItemInSidebar = page.getByTestId(favItemTestId);
+  expect(await favoriteListItemInSidebar.textContent()).toBe(
+    'this is a new page to favorite'
+  );
 
-  await page.getByRole('cell').getByRole('button').nth(0).click();
+  const collapseButton = favoriteListItemInSidebar.locator(
+    '[data-testid="fav-collapsed-button"]'
+  );
+
+  await expect(collapseButton).toBeVisible();
+  await collapseButton.click();
+  await expect(
+    page.locator('[data-type="favorite-list-item"] >> text=Another page')
+  ).toBeVisible();
 });