Issue #69: Add Playwright E2E tests for unit management and document features

State:

OPEN

Milestone:

Jalon 1: Sécurité & GDPR 🔒

Labels:

None

Assignees:

Unassigned

Created:

2025-10-31

Updated:

2025-11-13

URL:

View on GitHub

Description

## Description
Add comprehensive Playwright E2E tests for the new features developed:

### Features to test

#### 1. Unit Management
- [ ] **Unit Creation Modal** (`UnitCreateModal.svelte`)
  - Test opening modal from building detail page
  - Test form validation (number, type, floor, surface, quota)
  - Test successful unit creation
  - Test error handling
  - **Required testids**: `unit-create-modal`, `unit-create-form`, `unit-number-input`, `unit-type-select`, `unit-floor-input`, `unit-surface-input`, `unit-quota-input`, `unit-create-submit`

- [ ] **Unit Edit Modal** (`UnitEditModal.svelte`)
  - Test opening edit modal from unit list
  - Test editing all fields
  - Test quota validation
  - Test successful update
  - **Required testids**: `unit-edit-modal`, `unit-edit-form`, `unit-edit-submit`, `unit-edit-button-{id}`

#### 2. Multi-Owner Management
- [ ] **Add Owner to Unit** (`UnitOwnerAddModal.svelte`)
  - Test opening add owner modal
  - Test owner search functionality
  - Test ownership percentage validation (0.01-100%)
  - Test primary contact checkbox
  - Test successful owner assignment
  - **Required testids**: `owner-add-modal`, `owner-search-input`, `owner-select`, `ownership-percentage-input`, `primary-contact-checkbox`, `owner-add-submit`

- [ ] **Edit Unit Owner** (`UnitOwnerEditModal.svelte`)
  - Test opening edit modal from unit owners list
  - Test modifying ownership percentage
  - Test toggling primary contact
  - Test validation that total = 100%
  - **Required testids**: `owner-edit-modal`, `owner-edit-percentage`, `owner-edit-primary`, `owner-edit-submit`, `owner-edit-button-{id}`

- [ ] **Unit Owners Display** (`UnitOwners.svelte`)
  - Test displaying list of owners with percentages
  - Test visual validation (green for 100%, red for ≠100%)
  - Test responsive layout (320px width)
  - **Required testids**: `unit-owners-list`, `unit-owner-card-{id}`, `ownership-total`, `ownership-warning`

#### 3. Document Management
- [ ] **Expense Detail Page** (`expense-detail.astro`, `ExpenseDetail.svelte`)
  - Test navigation from expense list
  - Test displaying expense details
  - Test document upload for expense
  - Test document list display
  - **Required testids**: `expense-detail`, `expense-info`, `expense-documents`, `expense-upload-button`, `expense-document-list`

- [ ] **Meeting Detail Page** (`meeting-detail.astro`, `MeetingDetail.svelte`)
  - Test navigation from meeting list
  - Test displaying meeting details
  - Test document upload for meeting
  - Test document list display
  - **Required testids**: `meeting-detail`, `meeting-info`, `meeting-documents`, `meeting-upload-button`, `meeting-document-list`

- [ ] **Document Lists**
  - Test clickable expense cards linking to detail page
  - Test clickable meeting cards linking to detail page
  - Test document count badges
  - **Required testids**: `expense-card-{id}`, `meeting-card-{id}`, `document-count-{id}`

#### 4. Navigation & Footer
- [ ] **Responsive Navigation**
  - Test navigation on mobile (320px width)
  - Test role switcher in user dropdown menu
  - Test no horizontal scroll on all screen sizes
  - **Required testids**: Already exist (`navigation`, `role-selector`, `user-menu-dropdown`)

- [ ] **Footer**
  - Test language selector in footer
  - Test sync status indicator
  - Test footer responsive layout
  - **Required testids**: `footer`, `footer-language-selector`, `footer-sync-status`, `footer-copyright`

### Implementation Notes
1. Add all required `data-testid` attributes to components
2. Follow existing test patterns in `tests/e2e/` directory
3. Use testcontainers for database isolation
4. Test both happy paths and error scenarios
5. Ensure tests work on mobile viewports (320px, 375px, 768px)

### Acceptance Criteria
- [ ] All components have appropriate testid attributes
- [ ] Tests cover all user journeys for unit management
- [ ] Tests cover multi-owner workflows (add, edit, validation)
- [ ] Tests cover document management for expenses and meetings
- [ ] Tests verify responsive behavior on mobile
- [ ] All tests pass consistently
- [ ] Code coverage maintained or improved

### Related Components
- `frontend/src/components/UnitCreateModal.svelte`
- `frontend/src/components/UnitEditModal.svelte`
- `frontend/src/components/UnitOwnerAddModal.svelte`
- `frontend/src/components/UnitOwnerEditModal.svelte`
- `frontend/src/components/UnitOwners.svelte`
- `frontend/src/components/ExpenseDetail.svelte`
- `frontend/src/components/ExpenseDocuments.svelte`
- `frontend/src/components/MeetingDetail.svelte`
- `frontend/src/components/MeetingDocuments.svelte`
- `frontend/src/pages/expense-detail.astro`
- `frontend/src/pages/meeting-detail.astro`
- `frontend/src/layouts/Layout.astro`