mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-18 06:47:02 +08:00
test(editor): collab table test (#10506)
1. **Table UI Enhancements - Test IDs Added**
- Added `data-testid` attributes to several table components for better testability:
- `add-column-button` for the column addition button
- `add-row-button` for the row addition button
- `drag-column-handle` for column drag handles
- `drag-row-handle` for row drag handles
2. **New Test Infrastructure**
- Added new testing utilities in `tests/kit/src/bs/`:
- `misc.ts`: Added `waitNextFrame` utility function for handling animation frame timing in tests
- `table.ts`: Added comprehensive table testing utilities including:
- `createTable`: Creates a new table with initial cells
- `getCellText`: Retrieves text from a specific table cell
- `inputToCell`: Inputs text into a specific table cell
- `clickDeleteButtonInTableMenu`: Handles table deletion operations
3. **New Collaboration Test**
- Added a new test file `tests/affine-local/e2e/blocksuite/table/collab.spec.ts` that tests table collaboration features:
- Tests synchronization between two pages (A and B)
- Verifies table operations sync correctly:
- Adding columns and rows
- Inputting cell content
- Deleting columns and rows
- Validates cell content consistency across both pages
- Tests the complete table manipulation workflow in a collaborative setting
4. **Package Configuration Update**
- Modified `tests/kit/package.json` to expose new test utilities:
- Added new export mapping: `"./bs/*": "./src/bs/*.ts"` to make the new table testing utilities accessible
This PR primarily focuses on improving table testing infrastructure and adding comprehensive collaboration tests for the table functionality, while also enhancing component testability through data-test-ids.
This commit is contained in:
7
tests/kit/src/bs/misc.ts
Normal file
7
tests/kit/src/bs/misc.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import type { Page } from '@playwright/test';
|
||||
|
||||
export async function waitNextFrame(page: Page) {
|
||||
await page.evaluate(
|
||||
() => new Promise(resolve => requestAnimationFrame(resolve))
|
||||
);
|
||||
}
|
||||
53
tests/kit/src/bs/table.ts
Normal file
53
tests/kit/src/bs/table.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { expect, type Locator, type Page } from '@playwright/test';
|
||||
|
||||
import { waitNextFrame } from './misc';
|
||||
|
||||
export async function createTable(page: Page) {
|
||||
await page.keyboard.press('/');
|
||||
await expect(page.locator('affine-slash-menu .slash-menu')).toBeVisible();
|
||||
await page.keyboard.type('table');
|
||||
await page.keyboard.press('Enter');
|
||||
await waitNextFrame(page);
|
||||
const table = page.locator('affine-table');
|
||||
|
||||
await expect(table).toBeVisible();
|
||||
const cells = table.locator('affine-table-cell');
|
||||
const cellCount = await cells.count();
|
||||
expect(cellCount).toBe(4);
|
||||
|
||||
for (let i = 0; i < cellCount; i++) {
|
||||
await inputToCell(page, i, `Cell${i + 1}`);
|
||||
}
|
||||
}
|
||||
|
||||
export async function getCellText(page: Page, nth: number, table?: Locator) {
|
||||
table = table ?? page.locator('affine-table');
|
||||
const cell = table.locator('affine-table-cell').nth(nth);
|
||||
await cell.hover();
|
||||
await waitNextFrame(page);
|
||||
return cell.locator('v-line').innerText();
|
||||
}
|
||||
|
||||
export async function inputToCell(
|
||||
page: Page,
|
||||
nth: number,
|
||||
text: string,
|
||||
table?: Locator
|
||||
) {
|
||||
table = table ?? page.locator('affine-table');
|
||||
const cell = table.locator('affine-table-cell').nth(nth);
|
||||
await cell.hover();
|
||||
await waitNextFrame(page);
|
||||
await cell.click();
|
||||
await cell.click();
|
||||
await waitNextFrame(page);
|
||||
await page.keyboard.type(text, { delay: 20 });
|
||||
}
|
||||
|
||||
export async function clickDeleteButtonInTableMenu(page: Page) {
|
||||
const menu = page.locator('affine-menu');
|
||||
await expect(menu).toBeVisible();
|
||||
const deleteButton = menu.getByText('Delete');
|
||||
await expect(deleteButton).toBeVisible();
|
||||
await deleteButton.click();
|
||||
}
|
||||
Reference in New Issue
Block a user