Fix E2E Test Configuration for Drag and Drop Testing

[Diplow]

Note: This issue was created by Claude AI working with @Diplow

Problem

E2E tests are not properly configured for testing complex interactions like drag and drop. This blocks proper testing of the drag and drop feature (#29).

Current Issues

1. E2E test setup may not support drag and drop simulation
2. Playwright configuration might need updates for complex mouse interactions
3. Missing helpers for simulating drag operations in tests

Requirements

• Verify Playwright supports HTML5 drag and drop events
• Create test helpers for drag and drop operations
• Ensure offline mode works with drag interactions
• Add example E2E test for drag and drop scenario

Proposed Test Helper

// tests/e2e/helpers/drag-and-drop.ts
export async function dragTile(
  page: Page,
  sourceTileId: string,
  targetPosition: string
) {
  const source = page.locator(`[data-tile-id="${sourceTileId}"]`);
  const target = page.locator(`[data-drop-zone="${targetPosition}"]`);
  
  await source.dragTo(target);
  
  // Wait for optimistic update
  await page.waitForSelector(`[data-tile-id="${sourceTileId}"][data-position="${targetPosition}"]`);
}

Example E2E Test

test('can drag tile to empty sibling position', async ({ page }) => {
  // Setup
  await page.goto('/map/test-user/test-group');
  
  // Find a draggable tile
  const tile = page.locator('[data-tile-id="tile-1"]');
  await expect(tile).toHaveAttribute('draggable', 'true');
  
  // Drag to empty position
  await dragTile(page, 'tile-1', 'empty-west');
  
  // Verify move completed
  await expect(tile).toHaveAttribute('data-position', 'west');
});

Success Criteria

• E2E tests can simulate drag and drop operations
• Tests run reliably in CI/CD pipeline
• Documentation for writing drag and drop E2E tests
• At least one working drag and drop E2E test

Related to: #29, #30