Files
AFFiNE-Mirror/tests/affine-local/e2e/blocksuite/database/utils.ts
zzj3720 0f1a3c212d refactor(editor): add a layer of ui-logic to enhance type safety (#12511)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced modular UI logic layers for Kanban and Table views, enhancing maintainability and scalability.
  - Added new CSS-in-JS style modules for database blocks and table views, improving visual consistency.
  - Expanded telemetry event tracking for database views, properties, filters, and groups.
  - Added utility functions for lazy initialization and cached computed values.

- **Refactor**
  - Unified logic and state management across Kanban and Table views by replacing direct component dependencies with logic-centric architecture.
  - Updated components and widgets to use the new logic-based approach for state, selection, and event handling.
  - Replaced inline styles with CSS classes; updated class names to align with new component structure.
  - Centralized state access through UI logic instances, eliminating direct DOM queries and simplifying dependencies.
  - Consolidated Kanban and Table view presets effects for streamlined initialization.
  - Replaced Lit reactive state with Preact signals in multiple components for improved reactivity.
  - Split monolithic components into separate logic and UI classes for clearer separation of concerns.
  - Removed obsolete components and consolidated exports for cleaner API surface.

- **Bug Fixes**
  - Enhanced selection and interaction reliability in database cells and views.
  - Fixed scrolling issues on mobile table views for improved compatibility.

- **Chores**
  - Updated end-to-end test selectors to reflect new component names and structure.
  - Removed deprecated utilities and cleaned up unused imports.

- **Documentation**
  - Improved type definitions and public API exports for better developer experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-27 09:36:44 +00:00

123 lines
3.4 KiB
TypeScript

import { openHomePage } from '@affine-test/kit/utils/load-page';
import {
addDatabase,
clickNewPageButton,
waitForEditorLoad,
} from '@affine-test/kit/utils/page-logic';
import type { Page } from '@playwright/test';
import { expect } from '@playwright/test';
export async function createNewPage(page: Page) {
await clickNewPageButton(page);
}
export const gotoContentFromTitle = async (page: Page) => {
await page.keyboard.press('Enter');
};
export async function createDatabaseBlock(page: Page) {
await addDatabase(page);
}
export async function addRows(page: Page, rowCount: number) {
for (let i = 0; i < rowCount; i++) {
await addDatabaseRow(page);
}
}
export async function addDatabaseRow(page: Page) {
const addButton = page.locator('.data-view-table-group-add-row');
await addButton.click();
}
export async function pasteString(page: Page, data: string) {
await page.evaluate(data => {
const clipboardData = new DataTransfer();
clipboardData.setData('text/plain', data);
const pasteEvent = new ClipboardEvent('paste', {
clipboardData,
bubbles: true,
cancelable: true,
});
const activeElement = document.activeElement;
if (activeElement) {
pasteEvent.preventDefault();
activeElement.dispatchEvent(pasteEvent);
}
}, data);
}
export async function selectCell(page: Page, nth: number, editing = true) {
const firstCell = page.locator('dv-table-view-cell-container').nth(nth);
// First click for focus
await firstCell.click({ delay: 100 });
// Second click for edit mode
if (editing) {
await firstCell.click({ delay: 100 });
}
return firstCell;
}
export async function verifyCellContents(
page: Page,
expectedContents: string[]
) {
const cells = page.locator('dv-table-view-cell-container');
for (let i = 0; i < expectedContents.length; i++) {
const cell = cells.nth(i);
await expect(cell.locator('uni-lit > *:first-child')).toHaveText(
expectedContents[i]
);
}
}
export async function selectColumnType(
page: Page,
columnType: string,
nth: number = 1
) {
const typeMenu = page.locator('affine-menu').getByText('Type');
await page.waitForTimeout(100);
await typeMenu.hover();
await page.mouse.move(0, 0);
await page.waitForTimeout(100);
for (const char of columnType.split('')) {
await page.keyboard.type(char);
await page.waitForTimeout(10);
}
await page.waitForTimeout(100);
for (let i = 0; i < nth; i++) {
await page.keyboard.press('ArrowDown');
}
await page.waitForTimeout(100);
await page.keyboard.press('Enter');
await page.waitForTimeout(100);
}
export async function addColumn(page: Page, type: string, nth: number = 1) {
await clickAddColumnButton(page);
await selectColumnType(page, type, nth);
}
export async function clickAddColumnButton(page: Page) {
const addColumnButton = page.locator('.header-add-column-button');
await addColumnButton.click();
}
export async function changeColumnType(
page: Page,
columnIndex: number,
columnType: string
) {
const header = page.locator('affine-database-header-column').nth(columnIndex);
await header.click();
await selectColumnType(page, columnType);
}
export const initDatabaseByOneStep = async (page: Page) => {
await openHomePage(page);
await createNewPage(page);
await waitForEditorLoad(page);
await gotoContentFromTitle(page);
await createDatabaseBlock(page);
};