mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-14 13:25:12 +00:00
<!-- 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 -->
123 lines
3.4 KiB
TypeScript
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);
|
|
};
|