Expand Playwright E2E tests for critical user flows

[kitikonti]

Description

The current Playwright E2E test suite covers only basic smoke tests (page loads, logo visible, mobile block screen). No actual user flows are tested — none of the core features like task creation, editing, drag & drop, or file operations are covered by E2E tests.

While the 834+ unit tests provide strong coverage of isolated logic, they cannot catch integration bugs that only surface in the real browser: focus loss, keyboard shortcuts not firing, drag & drop visual glitches, dialogs not closing, or undo leaving the UI in an inconsistent state.

Current State

3 test files, 0 functional coverage:

• smoke.spec.ts — page loads, root div visible, a button exists
• branding.spec.ts — favicon, logo, manifest, theme color
• mobile-block.spec.ts — mobile block screen shown/dismissed

Proposed E2E Test Coverage

1. Task Creation

• Click placeholder row, type task name, press Enter → task appears in table
• Verify task also appears as bar in timeline

2. Task Inline Editing

• Double-click task name → edit mode → change name → Enter
• Edit start date, end date, progress via table cells
• Escape cancels edit

3. Keyboard Navigation

• Tab/Shift+Tab between editable cells
• Enter to confirm, Escape to cancel
• Arrow keys for cell navigation

4. Timeline Drag & Drop

• Drag task bar to move start/end dates
• Drag task bar edge to resize duration
• Multi-select drag (all selected tasks move together)

5. File Save & Load

• Create tasks → save file → reload page → open file → verify all tasks restored
• Verify view settings (zoom, scroll position, column widths) persist

6. Undo / Redo

• Create task → Ctrl+Z → task gone → Ctrl+Shift+Z → task back
• Edit task → undo → original value restored
• Delete task → undo → task restored

7. Hierarchy (Indent / Outdent)

• Select task → indent → becomes child of above task
• Summary task auto-created with correct date range
• Outdent → task moves back to root level

8. Export Dialogs

• File → Export PNG → dialog opens with preview
• Change export options → preview updates
• Close dialog with Escape or X button

9. Context Menu

• Right-click task row → context menu appears with correct actions
• Select action → action executes correctly
• Click outside → menu closes

10. Toolbar & Ribbon

• Switch ribbon tabs (File, Task, View, Help)
• Toolbar buttons trigger correct actions
• Toggle buttons reflect current state (e.g., dependencies on/off)

Design Considerations

• Focus on happy paths — not edge case coverage (that's what unit tests are for)
• Use Playwright's getByRole, getByText, getByTestId for resilient selectors
• Add data-testid attributes to key interactive elements where needed
• Keep tests independent — each test starts with a clean app state
• Consider shared test fixtures (e.g., "app with 5 sample tasks loaded")

Acceptance Criteria

• E2E tests cover all 10 areas listed above
• Tests pass on Chromium, Firefox, and WebKit (existing playwright.config.ts)
• Tests run in CI via npm run test:e2e
• No flaky tests — use proper waits and assertions instead of timeouts
• Shared fixtures/helpers for common setup (navigate, create task, load file)
• Tests complete in under 2 minutes total