feat(core): add basic tests for page journal property

packages/frontend/core/src/components/blocksuite/block-suite-editor/journal-doc-title.tsx

@@ -20,8 +20,8 @@ export const BlocksuiteEditorJournalDocTitle = ({ page }: { page: Doc }) => {
   const day = journalDate?.format('dddd') ?? null;
 
   return (
-    <div className="doc-title-container">
-      <span>{localizedJournalDate}</span>
+    <div className="doc-title-container" data-testid="journal-title">
+      <span data-testid="date">{localizedJournalDate}</span>
       {isTodayJournal ? (
         <span className={styles.titleTodayTag}>{t['com.affine.today']()}</span>
       ) : (

packages/frontend/core/src/components/blocksuite/block-suite-header/journal/date-picker.tsx

@@ -34,6 +34,7 @@ export const JournalWeekDatePicker = ({
 
   return (
     <WeekDatePicker
+      data-testid="journal-week-picker"
       handleRef={handleRef}
       style={weekStyle}
       value={date}

packages/frontend/core/src/components/doc-properties/table.tsx

@@ -318,6 +318,7 @@ export const DocPropertyRow = ({
       hideEmpty={hideEmpty}
       hide={hide}
       data-testid="doc-property-row"
+      data-info-id={propertyInfo.id}
     >
       <PropertyName
         defaultOpenMenu={defaultOpenEditMenu}
@@ -414,6 +415,7 @@ export const DocPropertiesTableBody = forwardRef<
               variant="plain"
               prefix={<PlusIcon />}
               className={styles.propertyActionButton}
+              data-testid="add-property-button"
             >
               {t['com.affine.page-properties.add-property']()}
             </Button>

packages/frontend/core/src/components/doc-properties/types/journal.tsx

@@ -99,6 +99,7 @@ export const JournalValue = () => {
               style: { padding: 20 },
             }}
             rootOptions={{
+              modal: true,
               open: showDatePicker,
               onOpenChange: setShowDatePicker,
             }}
@@ -112,12 +113,18 @@ export const JournalValue = () => {
               />
             }
           >
-            <div className={styles.date}>{displayDate}</div>
+            <div data-testid="date-selector" className={styles.date}>
+              {displayDate}
+            </div>
           </Menu>
         ) : null}
 
         {checked && conflict ? (
-          <div className={styles.duplicateTag} onClick={handleOpenDuplicate}>
+          <div
+            data-testid="conflict-tag"
+            className={styles.duplicateTag}
+            onClick={handleOpenDuplicate}
+          >
             {t['com.affine.page-properties.property.journal-duplicated']()}
           </div>
         ) : null}

packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/journal.tsx

@@ -64,6 +64,7 @@ const PageItem = ({
 
   return (
     <WorkbenchLink
+      data-testid="journal-conflict-item"
       aria-label={title}
       to={`/${docId}`}
       className={clsx(className, styles.pageItem)}
@@ -118,9 +119,6 @@ export const EditorJournalPanel = () => {
 
   const customDayRenderer = useCallback(
     (cell: DateCell) => {
-      // TODO(@catsjuice): add a dot to indicate journal
-      // has performance issue for now, better to calculate it in advance
-      // const hasJournal = !!getJournalsByDate(cell.date.format('YYYY-MM-DD'))?.length;
       const hasJournal = allJournalDates.has(cell.date.format('YYYY-MM-DD'));
       return (
         <button
@@ -145,7 +143,11 @@ export const EditorJournalPanel = () => {
   );
 
   return (
-    <div className={styles.journalPanel} data-is-journal={isJournal}>
+    <div
+      className={styles.journalPanel}
+      data-is-journal={isJournal}
+      data-testid="sidebar-journal-panel"
+    >
       <div data-mobile={mobile} className={styles.calendar}>
         <DatePicker
           weekDays={t['com.affine.calendar-date-picker.week-days']()}
@@ -330,7 +332,11 @@ const ConflictList = ({
   );
 
   return (
-    <div className={clsx(styles.journalConflictWrapper, className)} {...attrs}>
+    <div
+      data-testid="journal-conflict-list"
+      className={clsx(styles.journalConflictWrapper, className)}
+      {...attrs}
+    >
       {docRecords.map(docRecord => {
         const isCurrent = docRecord.id === currentDoc.id;
         return (
@@ -355,6 +361,7 @@ const ConflictList = ({
                         e.stopPropagation();
                         handleRemoveJournalMark(docRecord.id);
                       }}
+                      data-testid="journal-conflict-remove-mark"
                     >
                       {t[
                         'com.affine.page-properties.property.journal-remove'
@@ -367,7 +374,10 @@ const ConflictList = ({
                   </>
                 }
               >
-                <IconButton icon={<EditIcon />} />
+                <IconButton
+                  data-testid="journal-conflict-edit"
+                  icon={<EditIcon />}
+                />
               </Menu>
             }
           />

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

@@ -0,0 +1,113 @@
+import { test } from '@affine-test/kit/playwright';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import { waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
+import { expect, type Locator, type Page } from '@playwright/test';
+
+type MaybeDate = string | number | Date;
+function isSameDay(d1: MaybeDate, d2: MaybeDate) {
+  const date1 = new Date(d1);
+  const date2 = new Date(d2);
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
+}
+
+function getJournalRow(page: Page) {
+  return page.locator(
+    '[data-testid="doc-property-row"][data-info-id="journal"]'
+  );
+}
+async function isJournalEditor(page: Page, maybeDate?: string | number | Date) {
+  // journal header
+  const header = page.getByTestId('header');
+  const weekPicker = header.getByTestId('journal-week-picker');
+  await expect(weekPicker).toBeVisible();
+
+  // journal title
+  const journalTitle = page.getByTestId('journal-title');
+  await expect(journalTitle).toBeVisible();
+
+  if (maybeDate) {
+    const date = (await journalTitle.getByTestId('date').textContent()) ?? '';
+    expect(isSameDay(date, maybeDate)).toBeTruthy();
+  }
+}
+async function openPagePropertiesAndAddJournal(page: Page) {
+  const collapse = page.getByTestId('page-info-collapse');
+  const open = await collapse.getAttribute('aria-expanded');
+  if (open?.toLowerCase() !== 'true') {
+    await collapse.click();
+  }
+
+  if ((await getJournalRow(page).count()) === 0) {
+    await page.getByTestId('add-property-button').click();
+    await page
+      .locator('[role="menuitem"][data-property-type="journal"]')
+      .click();
+    await page.keyboard.press('Escape');
+  }
+
+  const journalRow = getJournalRow(page);
+  await expect(journalRow).toBeVisible();
+  return journalRow;
+}
+async function toggleJournal(row: Locator, value: boolean) {
+  const checkbox = row.locator('input[type="checkbox"]');
+  const state = await checkbox.inputValue();
+  const checked = state === 'on';
+  if (checked !== value) {
+    await checkbox.click();
+    const newState = await checkbox.inputValue();
+    const newChecked = newState === 'on';
+    expect(newChecked).toBe(value);
+  }
+}
+async function createPageAndTurnIntoJournal(page: Page) {
+  await page.getByTestId('sidebar-new-page-button').click();
+  await waitForEditorLoad(page);
+  const journalRow = await openPagePropertiesAndAddJournal(page);
+  await toggleJournal(journalRow, true);
+  return journalRow;
+}
+
+test('Create a journal from sidebar', async ({ page }) => {
+  await openHomePage(page);
+  await page.getByTestId('slider-bar-journals-button').click();
+  await waitForEditorLoad(page);
+  await isJournalEditor(page);
+});
+
+test('Create a page and turn it into a journal', async ({ page }) => {
+  await openHomePage(page);
+  await createPageAndTurnIntoJournal(page);
+  await isJournalEditor(page, new Date());
+});
+
+test('Should show duplicated tag when create journal on same day', async ({
+  page,
+}) => {
+  await openHomePage(page);
+  await createPageAndTurnIntoJournal(page);
+  const journalRow2 = await createPageAndTurnIntoJournal(page);
+  await expect(journalRow2.getByTestId('conflict-tag')).toBeVisible();
+});
+
+test('Resolve duplicated journal', async ({ page }) => {
+  await openHomePage(page);
+  await createPageAndTurnIntoJournal(page);
+  const journalRow2 = await createPageAndTurnIntoJournal(page);
+  await journalRow2.getByTestId('conflict-tag').click();
+  const journalPanel = page.getByTestId('sidebar-journal-panel');
+  await expect(journalPanel).toBeVisible();
+  const conflictList = journalPanel.getByTestId('journal-conflict-list');
+  await expect(conflictList).toBeVisible();
+  const conflictItems = conflictList.getByTestId('journal-conflict-item');
+  const first = conflictItems.first();
+  await first.getByTestId('journal-conflict-edit').click();
+  await page.getByTestId('journal-conflict-remove-mark').click();
+
+  await expect(journalRow2.getByTestId('conflict-tag')).not.toBeVisible();
+  await expect(conflictList).not.toBeVisible();
+});