lukas.pupkalipinski/BanGUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

backup

Browse Source
This commit is contained in:
Lukas
2026-05-04 13:13:01 +02:00
parent 48d57c31e1
commit d25b56e7e1
22 changed files with 99 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
Docs/Web-Development.md
View File

@@ -1816,6 +1816,34 @@ The E2E test suite (`e2e/tests/01_page_loading.robot`) verifies every protected
**Vite SPA note:** All routes return HTTP 200 from the dev server (SPA routing). HTTP status checks are not meaningful — focus on DOM state after client-side navigation.
### Selector Conventions
**Principle:** Prefer semantic selectors (role, label, ARIA) over `data-testid`. Use `data-testid` only when semantic selectors are unavailable or too brittle for stable E2E selectors.
| Selector type | When to use | Example |
|---|---|---|
| Semantic / ARIA | Interactive elements with clear roles or labels | `button[name="Refresh"]`, `input[aria-label="Ban Time"]` |
| `data-testid` | Non-interactive landmarks; elements with no stable semantic cue; dynamically rendered content | Page root `div`, table bodies, blocklist import button |
| CSS class | Avoid in E2E — classes change with style refactors | — |
**Reserved `data-testid` values used by the E2E suite:**
| `data-testid` | Where | Purpose |
|---|---|---|
| `page-error-boundary` | `ErrorBoundary` fallback root | E2E-6: detects page-level error fallbacks |
| `dashboard` | `DashboardPage` root | E2E-2: dashboard page landmark |
| `map-page` | `MapPage` root | E2E-2: world map page landmark |
| `jails-page` | `JailsPage` root | E2E-2: jails page landmark |
| `history-page` | `HistoryPage` root | E2E-2: history page landmark |
| `blocklists-page` | `BlocklistsPage` root | E2E-2: blocklists page landmark |
| `config-page` | `ConfigPage` root | E2E-2: config page landmark |
| `history-table` | `HistoryPage` table body wrapper | E2E-2: history table body for row assertions |
| `blocklist-import-button` | Blocklist "Run Now" button | E2E-4: manual blocklist import trigger |
| `autosave-status` | `AutoSaveIndicator` root | E2E-5: auto-save state indicator, carries `data-status="idle\|saving\|saved\|error"` |
| `data-field="<fieldname>"` | Config input fields (`ban_time`, `find_time`, `max_retry`, etc.) | E2E-5: targeted field editing |
**`data-testid` in production:** `data-testid` attributes are visible in production HTML. This is standard practice — they are not a security concern. If your team prefers to strip them in production builds, use a Vite plugin (not done here).
### Auto-Save Indicator for E2E Tests
The config page (`/config`) uses `useAutoSave` to debounce edits before sending PATCH requests. E2E tests that edit config fields must wait for the "Saved" indicator rather than using fixed `Sleep`, otherwise the reload may fire before the HTTP request is sent.