snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

tests/blocksuite/e2e/database/calendar.spec.ts

@@ -0,0 +1,487 @@
+import type { DatabaseBlockModel } from '@blocksuite/affine/model';
+import type { DeltaInsert } from '@blocksuite/store';
+import { expect, type Page } from '@playwright/test';
+
+import {
+  enterPlaygroundRoom,
+  getEditorHostLocator,
+  waitNextFrame,
+} from '../utils/actions/index.js';
+import { scoped, test } from '../utils/playwright.js';
+
+const currentMonthAnchor = () => {
+  const date = new Date();
+  date.setHours(0, 0, 0, 0);
+  date.setDate(1);
+  return date.getTime();
+};
+
+const timestampFromMonthAnchor = ({
+  monthAnchor,
+  day,
+}: {
+  monthAnchor: number;
+  day: number;
+}) => {
+  const date = new Date(monthAnchor);
+  date.setDate(day);
+  return date.getTime();
+};
+
+const getMonthTimestamp = (page: Page, monthAnchor: number, day: number) =>
+  page.evaluate(timestampFromMonthAnchor, { monthAnchor, day });
+
+const createCalendarDatabase = async (
+  page: Page,
+  options?: {
+    withDateColumn?: boolean;
+    mapDateColumn?: boolean;
+    readonly?: boolean;
+    rowCount?: number;
+    linkedDocTitle?: string;
+    withEndDateColumn?: boolean;
+  }
+) => {
+  const monthAnchor = await page.evaluate(currentMonthAnchor);
+  const dateTimestamp = await getMonthTimestamp(page, monthAnchor, 15);
+  const endDateTimestamp = await getMonthTimestamp(page, monthAnchor, 17);
+
+  return page.evaluate(
+    ({
+      withDateColumn,
+      mapDateColumn,
+      readonly,
+      rowCount,
+      linkedDocTitle,
+      withEndDateColumn,
+      dateTimestamp,
+      endDateTimestamp,
+      monthAnchor,
+    }) => {
+      const { doc } = window;
+      const rows = rowCount ?? 1;
+      const linkedDocId = linkedDocTitle ? `doc:${linkedDocTitle}` : undefined;
+      doc.captureSync();
+      const rootId = doc.addBlock('affine:page', {
+        title: new window.$blocksuite.store.Text(),
+      });
+      const noteId = doc.addBlock('affine:note', {}, rootId);
+      const databaseId = doc.addBlock(
+        'affine:database',
+        {
+          title: new window.$blocksuite.store.Text('Calendar database'),
+        },
+        noteId
+      );
+      if (linkedDocId && linkedDocTitle) {
+        const linkedDoc = window.collection.createDoc(linkedDocId).getStore();
+        linkedDoc.load();
+        const linkedRootId = linkedDoc.addBlock('affine:page', {
+          title: new window.$blocksuite.store.Text(linkedDocTitle),
+        });
+        linkedDoc.addBlock('affine:surface', {}, linkedRootId);
+        linkedDoc.addBlock('affine:note', {}, linkedRootId);
+      }
+      const rowIds = Array.from({ length: rows }, (_, index) => {
+        const text =
+          index === 0 && linkedDocId
+            ? new window.$blocksuite.store.Text([
+                {
+                  insert: ' ',
+                  attributes: {
+                    reference: {
+                      type: 'LinkedPage',
+                      pageId: linkedDocId,
+                    },
+                  },
+                },
+              ] as unknown as DeltaInsert[])
+            : new window.$blocksuite.store.Text(`Task ${index + 1}`);
+        return doc.addBlock(
+          'affine:paragraph',
+          {
+            type: 'text',
+            text,
+          },
+          databaseId
+        );
+      });
+      const rowId = rowIds[0];
+      const model = doc.getModelById(databaseId) as DatabaseBlockModel;
+      const datasource =
+        new window.$blocksuite.blocks.database.DatabaseBlockDataSource(model);
+      const dateColumnId = withDateColumn
+        ? datasource.propertyAdd('end', {
+            type: 'date',
+            name: 'Date',
+          })
+        : undefined;
+      const endDateColumnId = withEndDateColumn
+        ? datasource.propertyAdd('end', {
+            type: 'date',
+            name: 'End Date',
+          })
+        : undefined;
+      for (const id of rowIds) {
+        if (dateColumnId) {
+          datasource.cellValueChange(id, dateColumnId, dateTimestamp);
+        }
+        if (endDateColumnId) {
+          datasource.cellValueChange(id, endDateColumnId, endDateTimestamp);
+        }
+      }
+      const viewId = datasource.viewManager.viewAdd('calendar');
+      datasource.viewManager.setCurrentView(viewId);
+      if (dateColumnId && mapDateColumn) {
+        const view = datasource.viewManager.viewGet(viewId) as
+          | {
+              setDateColumn: (propertyId: string) => void;
+              setEndDateColumn: (propertyId: string) => void;
+            }
+          | undefined;
+        view?.setDateColumn(dateColumnId);
+        if (endDateColumnId) {
+          view?.setEndDateColumn(endDateColumnId);
+        }
+      }
+      if (readonly) {
+        doc.readonly = true;
+      }
+      doc.captureSync();
+      return {
+        databaseId,
+        rowId,
+        rowIds,
+        dateColumnId,
+        endDateColumnId,
+        viewId,
+        linkedDocId,
+        monthAnchor,
+      };
+    },
+    { ...options, dateTimestamp, endDateTimestamp, monthAnchor }
+  );
+};
+
+test(scoped`database calendar setup and row interactions`, async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  const ids = await createCalendarDatabase(page, {
+    withDateColumn: true,
+    mapDateColumn: false,
+  });
+
+  const editorHost = getEditorHostLocator(page);
+  await expect(editorHost.getByTestId('dv-calendar-view')).toBeVisible();
+  await expect(
+    page.getByRole('button', { name: 'Select or create date property' })
+  ).toBeVisible();
+
+  await page
+    .getByRole('button', { name: 'Select or create date property' })
+    .click();
+  await page.getByText('Date', { exact: true }).click();
+  await expect(
+    page.locator('.calendar-entry').filter({ hasText: 'Task 1' })
+  ).toBeVisible();
+
+  await page.locator('.calendar-entry').filter({ hasText: 'Task 1' }).click();
+  await expect(page.locator('affine-data-view-record-detail')).toBeVisible();
+
+  await page.evaluate(({ databaseId, dateColumnId }) => {
+    if (!dateColumnId) {
+      throw new Error('dateColumnId is required');
+    }
+    const model = window.doc.getModelById(databaseId) as DatabaseBlockModel;
+    const datasource =
+      new window.$blocksuite.blocks.database.DatabaseBlockDataSource(model);
+    datasource.propertyDelete(dateColumnId);
+  }, ids);
+  await expect(
+    page.getByRole('button', { name: 'Select or create date property' })
+  ).toBeVisible();
+});
+
+test(
+  scoped`database calendar creates date property from setup`,
+  async ({ page }) => {
+    await enterPlaygroundRoom(page);
+    await createCalendarDatabase(page);
+
+    await page
+      .getByRole('button', { name: 'Select or create date property' })
+      .click();
+    await page.getByText('Create date property', { exact: true }).click();
+
+    await expect(
+      page.getByRole('button', { name: 'Select or create date property' })
+    ).toBeHidden();
+  }
+);
+
+test(scoped`database calendar creates row from empty day`, async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  const ids = await createCalendarDatabase(page, {
+    withDateColumn: true,
+    mapDateColumn: true,
+  });
+
+  const targetDay = page
+    .locator('.calendar-day')
+    .filter({ has: page.locator('.calendar-day-number', { hasText: '20' }) })
+    .first();
+  await targetDay.hover();
+  await targetDay.getByRole('button', { name: '+ New row' }).click();
+
+  await expect(page.locator('affine-data-view-record-detail')).toBeVisible();
+
+  const expectedDate = await getMonthTimestamp(page, ids.monthAnchor, 20);
+  await expect
+    .poll(() =>
+      page.evaluate(
+        ({ databaseId, dateColumnId, expectedDate }) => {
+          if (!dateColumnId) {
+            throw new Error('dateColumnId is required');
+          }
+          const model = window.doc.getModelById(
+            databaseId
+          ) as DatabaseBlockModel;
+          const datasource =
+            new window.$blocksuite.blocks.database.DatabaseBlockDataSource(
+              model
+            );
+          return datasource.rows$.value.some(
+            rowId =>
+              datasource.cellValueGet(rowId, dateColumnId) === expectedDate
+          );
+        },
+        { ...ids, expectedDate }
+      )
+    )
+    .toBe(true);
+});
+
+test(
+  scoped`database calendar opens linked doc row via row detail`,
+  async ({ page }) => {
+    await enterPlaygroundRoom(page);
+    const ids = await createCalendarDatabase(page, {
+      withDateColumn: true,
+      mapDateColumn: true,
+      linkedDocTitle: 'Calendar linked doc',
+    });
+
+    await page.evaluate(({ databaseId }) => {
+      const database = document.querySelector(
+        `affine-database[data-block-id="${databaseId}"]`
+      ) as any;
+      database.dataViewRootLogic.value.openDetailPanel = ({
+        rowId,
+      }: {
+        rowId: string;
+      }) => {
+        (window as any).__calendarRowOpen = rowId;
+      };
+    }, ids);
+
+    const entry = page.locator('.calendar-entry.row').first();
+    await expect(entry).toContainText('Calendar linked doc');
+    await entry.click();
+
+    await expect
+      .poll(() => page.evaluate(() => (window as any).__calendarRowOpen))
+      .toBe(ids.rowId);
+  }
+);
+
+test(
+  scoped`database calendar hides setup create action in readonly`,
+  async ({ page }) => {
+    await enterPlaygroundRoom(page);
+    await createCalendarDatabase(page, { readonly: true });
+
+    await page
+      .getByRole('button', { name: 'Select or create date property' })
+      .click();
+
+    await expect(
+      page.getByText('Create date property', { exact: true })
+    ).toBeHidden();
+
+    await page.evaluate(() => {
+      window.doc.readonly = false;
+    });
+  }
+);
+
+test(scoped`database calendar shows all day entries`, async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await createCalendarDatabase(page, {
+    withDateColumn: true,
+    mapDateColumn: true,
+    rowCount: 4,
+  });
+
+  const may15 = page
+    .locator('.calendar-day')
+    .filter({ has: page.locator('.calendar-day-number', { hasText: '15' }) })
+    .first();
+
+  await expect(may15.locator('.calendar-entry')).toHaveCount(4);
+  await expect(may15.locator('.calendar-overflow')).toHaveCount(0);
+});
+
+test(
+  scoped`database calendar drag updates date cell and readonly disables drag`,
+  async ({ page }) => {
+    await enterPlaygroundRoom(page);
+    const ids = await createCalendarDatabase(page, {
+      withDateColumn: true,
+      mapDateColumn: true,
+    });
+    await waitNextFrame(page);
+
+    const entry = page.locator('.calendar-entry').filter({ hasText: 'Task 1' });
+    const targetDay = page
+      .locator('.calendar-day')
+      .filter({ has: page.locator('.calendar-day-number', { hasText: '20' }) })
+      .first();
+    await entry.dragTo(targetDay);
+
+    const expectedDate = await getMonthTimestamp(page, ids.monthAnchor, 20);
+    await expect
+      .poll(async () =>
+        page.evaluate(({ databaseId, rowId, dateColumnId }) => {
+          if (!dateColumnId) {
+            throw new Error('dateColumnId is required');
+          }
+          const model = window.doc.getModelById(
+            databaseId
+          ) as DatabaseBlockModel;
+          const datasource =
+            new window.$blocksuite.blocks.database.DatabaseBlockDataSource(
+              model
+            );
+          return datasource.cellValueGet(rowId, dateColumnId);
+        }, ids)
+      )
+      .toBe(expectedDate);
+
+    const readonlyIds = await createCalendarDatabase(page, {
+      withDateColumn: true,
+      mapDateColumn: true,
+      readonly: true,
+    });
+    await waitNextFrame(page);
+    const readonlyCalendar = page.getByTestId('dv-calendar-view').last();
+    await expect(
+      readonlyCalendar
+        .locator('.calendar-entry')
+        .filter({ hasText: 'Task 1' })
+        .first()
+    ).toHaveAttribute('draggable', 'false');
+
+    await page.evaluate(() => {
+      window.doc.readonly = false;
+    });
+    expect(readonlyIds.databaseId).toBeTruthy();
+  }
+);
+
+test(
+  scoped`database calendar drags row range preserving duration`,
+  async ({ page }) => {
+    await enterPlaygroundRoom(page);
+    const ids = await createCalendarDatabase(page, {
+      withDateColumn: true,
+      withEndDateColumn: true,
+      mapDateColumn: true,
+    });
+    await waitNextFrame(page);
+
+    const entry = page
+      .locator('.calendar-entry.row')
+      .filter({ hasText: 'Task 1' })
+      .first();
+    const targetDay = page
+      .locator('.calendar-day')
+      .filter({ has: page.locator('.calendar-day-number', { hasText: '20' }) })
+      .first();
+    await entry.dragTo(targetDay);
+
+    const expectedStart = await getMonthTimestamp(page, ids.monthAnchor, 20);
+    const expectedEnd = await getMonthTimestamp(page, ids.monthAnchor, 22);
+    await expect
+      .poll(() =>
+        page.evaluate(
+          ({ databaseId, rowId, dateColumnId, endDateColumnId }) => {
+            if (!dateColumnId || !endDateColumnId) {
+              throw new Error('date columns are required');
+            }
+            const model = window.doc.getModelById(
+              databaseId
+            ) as DatabaseBlockModel;
+            const datasource =
+              new window.$blocksuite.blocks.database.DatabaseBlockDataSource(
+                model
+              );
+            return [
+              datasource.cellValueGet(rowId, dateColumnId),
+              datasource.cellValueGet(rowId, endDateColumnId),
+            ];
+          },
+          ids
+        )
+      )
+      .toEqual([expectedStart, expectedEnd]);
+  }
+);
+
+test(scoped`database calendar resizes row range end date`, async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  const ids = await createCalendarDatabase(page, {
+    withDateColumn: true,
+    withEndDateColumn: true,
+    mapDateColumn: true,
+  });
+  await waitNextFrame(page);
+
+  const entry = page
+    .locator('.calendar-entry.row')
+    .filter({ hasText: 'Task 1' })
+    .filter({ has: page.locator('.calendar-resize-handle.right') })
+    .first();
+  await entry.hover();
+  const handle = entry.locator('.calendar-resize-handle.right');
+  const targetDay = page
+    .locator('.calendar-day')
+    .filter({ has: page.locator('.calendar-day-number', { hasText: '20' }) })
+    .first();
+  const handleBox = await handle.boundingBox();
+  const targetBox = await targetDay.boundingBox();
+  if (!handleBox || !targetBox) {
+    throw new Error('resize target is not visible');
+  }
+
+  await page.mouse.move(
+    handleBox.x + handleBox.width / 2,
+    handleBox.y + handleBox.height / 2
+  );
+  await page.mouse.down();
+  await page.mouse.move(targetBox.x + targetBox.width / 2, targetBox.y + 16);
+  await page.mouse.up();
+
+  const expectedEnd = await getMonthTimestamp(page, ids.monthAnchor, 20);
+  await expect
+    .poll(() =>
+      page.evaluate(({ databaseId, rowId, endDateColumnId }) => {
+        if (!endDateColumnId) {
+          throw new Error('endDateColumnId is required');
+        }
+        const model = window.doc.getModelById(databaseId) as DatabaseBlockModel;
+        const datasource =
+          new window.$blocksuite.blocks.database.DatabaseBlockDataSource(model);
+        return datasource.cellValueGet(rowId, endDateColumnId);
+      }, ids)
+    )
+    .toBe(expectedEnd);
+});