69 lines
2.3 KiB
JavaScript
69 lines
2.3 KiB
JavaScript
|
import { test, expect } from '@playwright/test';
|
||
|
|
|
||
|
|
test.describe('Kanban Engine', () => {
|
||
|
|
test.beforeEach(async ({ page }) => {
|
||
|
|
await page.goto('http://127.0.0.1:5173/test/index.html');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('should render columns and items correctly', async ({ page }) => {
|
||
|
|
const kanban = page.locator('web-kanban');
|
||
|
|
await expect(kanban).toBeVisible();
|
||
|
|
|
||
|
|
const columns = kanban.locator('.column');
|
||
|
|
await expect(columns).toHaveCount(3);
|
||
|
|
|
||
|
|
const items = kanban.locator('.item');
|
||
|
|
await expect(items).toHaveCount(3);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('should handle drag and drop between columns', async ({ page }) => {
|
||
|
|
const kanban = page.locator('web-kanban');
|
||
|
|
|
||
|
|
// Get initial counts
|
||
|
|
const todoColumn = kanban.locator('.column[data-id="todo"] .items-container');
|
||
|
|
const doneColumn = kanban.locator('.column[data-id="done"] .items-container');
|
||
|
|
|
||
|
|
await expect(todoColumn.locator('.item')).toHaveCount(2);
|
||
|
|
await expect(doneColumn.locator('.item')).toHaveCount(0);
|
||
|
|
|
||
|
|
// Perform drag and drop
|
||
|
|
const firstItem = todoColumn.locator('.item').first();
|
||
|
|
await firstItem.dragTo(doneColumn);
|
||
|
|
|
||
|
|
// Verify counts after move
|
||
|
|
await expect(todoColumn.locator('.item')).toHaveCount(1);
|
||
|
|
await expect(doneColumn.locator('.item')).toHaveCount(1);
|
||
|
|
|
||
|
|
// Verify @update event was triggered (check console if needed, but here we check DOM)
|
||
|
|
const movedItem = doneColumn.locator('.item');
|
||
|
|
await expect(movedItem).toContainText('设计看板原型');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('should measure render performance', async ({ page }) => {
|
||
|
|
const start = await page.evaluate(() => performance.now());
|
||
|
|
|
||
|
|
await page.evaluate(() => {
|
||
|
|
const kanban = document.getElementById('kanban');
|
||
|
|
const largeData = [];
|
||
|
|
for (let i = 0; i < 10; i++) {
|
||
|
|
largeData.push({
|
||
|
|
id: `col-${i}`,
|
||
|
|
title: `Column ${i}`,
|
||
|
|
items: Array.from({ length: 20 }, (_, j) => ({
|
||
|
|
id: `item-${i}-${j}`,
|
||
|
|
content: `Item ${i}-${j}`
|
||
|
|
}))
|
||
|
|
});
|
||
|
|
}
|
||
|
|
kanban.data = largeData;
|
||
|
|
});
|
||
|
|
|
||
|
|
const end = await page.evaluate(() => performance.now());
|
||
|
|
const duration = end - start;
|
||
|
|
console.log(`Render 10 columns with 200 items took: ${duration.toFixed(2)}ms`);
|
||
|
|
|
||
|
|
// Expect reasonable performance
|
||
|
|
expect(duration).toBeLessThan(100);
|
||
|
|
});
|
||
|
|
});
|