Files
AFFiNE-Mirror/tests/affine-local/e2e/journal.spec.ts
Cats Juice 46a2ad750f feat(core): add a two-step confirm page to create new journal (#13240)
close AF-2750;

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Introduced a new workspace journals page with date-based navigation,
placeholder UI, and the ability to create daily journals directly from
the page.
* Added a "Today" button for quick navigation to the current day's
journal when viewing other dates.

* **Improvements**
* Enhanced the journal document title display with improved date
formatting and flexible styling.
* Expanded the active state for the journal sidebar button to cover all
journal-related routes.
* Updated journal navigation to open existing entries directly or
navigate to filtered journal listings.

* **Bug Fixes**
* Improved date handling and navigation logic for journal entries to
ensure accurate redirection and creation flows.

* **Style**
* Added new styles for the workspace journals page, including headers,
placeholders, and buttons.

* **Localization**
* Added English translations for journal placeholder text and create
journal prompts.

* **Tests**
* Added confirmation steps in journal creation flows to improve test
reliability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-07-17 02:32:01 +00:00

127 lines
4.4 KiB
TypeScript

import { test } from '@affine-test/kit/playwright';
import {
confirmCreateJournal,
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();
}
// add if not exists
if ((await getJournalRow(page).count()) === 0) {
const addPropertyButton = page.getByTestId('add-property-button');
if (!(await addPropertyButton.isVisible())) {
await page.getByTestId('property-collapsible-button').click();
}
await addPropertyButton.click();
await page
.locator('[role="menuitem"][data-property-type="journal"]')
.click();
await page.keyboard.press('Escape');
}
// expand if collapsed
else if (!(await getJournalRow(page).isVisible())) {
await page.getByTestId('property-collapsible-button').click();
}
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 confirmCreateJournal(page);
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();
});