111 lines
7.6 KiB
Markdown
111 lines
7.6 KiB
Markdown
## [E2E-5] Config edit saves and persists after page reload
|
|
|
|
**Where found:**
|
|
The `/config` page allows editing jail settings, filter definitions, and server-level options. It is covered by unit tests (`frontend/src/pages/__tests__/ConfigPage.test.tsx`, `backend/tests/test_routers/test_config.py`) but no E2E test verifies that a change made in the UI actually persists through the backend, survives a page reload, and reflects the new value.
|
|
|
|
**Why this is needed:**
|
|
The config page uses an auto-save mechanism (`useAutoSave`) that debounces writes. A regression in the debounce logic, the PATCH endpoint, or the GET-on-mount rehydration would silently discard user edits. Only a full round-trip test can catch this.
|
|
|
|
**Goal:**
|
|
Change a config field value via the UI, wait for the auto-save indicator to confirm the save, reload the page, and assert the new value is still present.
|
|
|
|
**What to do:**
|
|
1. Create `e2e/tests/04_config_edit.robot`.
|
|
2. Suite Setup: `Login As Admin`.
|
|
3. Choose a safe, low-risk config field to edit — e.g., the `[DEFAULT]` `bantime` value, or a per-jail `maxretry` setting.
|
|
4. Record the original value before editing so it can be restored in teardown.
|
|
5. Test case:
|
|
```robot
|
|
*** Settings ***
|
|
Library Browser
|
|
Resource ../resources/auth.resource
|
|
Test Teardown Restore Original Config Value
|
|
|
|
*** Test Cases ***
|
|
Config Field Edit Persists After Reload
|
|
Login As Admin
|
|
Go To ${FRONTEND_URL}/config
|
|
Wait For Elements State css=[role="tablist"] visible timeout=15s
|
|
# Read current value for teardown
|
|
${original}= Get Text css=[data-field="bantime"]
|
|
Set Suite Variable ${ORIGINAL_BANTIME} ${original}
|
|
# Edit the field
|
|
Fill Text css=[data-field="bantime"] 7200
|
|
# Wait for auto-save indicator to show "Saved"
|
|
Wait For Elements State css=[data-autosave="saved"] visible timeout=15s
|
|
# Reload and verify persistence
|
|
Reload
|
|
Wait For Elements State css=[data-field="bantime"] visible timeout=15s
|
|
Get Text css=[data-field="bantime"] == 7200
|
|
|
|
*** Keywords ***
|
|
Restore Original Config Value
|
|
Go To ${FRONTEND_URL}/config
|
|
Fill Text css=[data-field="bantime"] ${ORIGINAL_BANTIME}
|
|
Wait For Elements State css=[data-autosave="saved"] visible timeout=15s
|
|
```
|
|
6. Also verify via the API that the value was actually written:
|
|
```robot
|
|
${resp}= GET ${BACKEND_URL}/api/config expected_status=200
|
|
Should Contain ${resp.text} 7200
|
|
```
|
|
|
|
**Possible traps and issues:**
|
|
- The config page auto-save uses a debounce delay. The test must wait for the "Saved" indicator rather than a fixed `Sleep`, otherwise the reload may happen before the PATCH request fires.
|
|
- The selectors `[data-field="bantime"]` and `[data-autosave="saved"]` do not exist in the current frontend components (no `data-*` attributes on production elements). These must be added to the components before the test can work. See [E2E-6] for the prerequisite task.
|
|
- Config fields are rendered inside a tab panel. The correct tab must be activated before the target field is interactable. The test must click the right tab first.
|
|
- If the backend validates the new value and rejects it (e.g., bantime must be a positive integer), the test will fail at the API assertion. Use a value that is guaranteed to be valid.
|
|
- Editing config files on disk via the API may restart the fail2ban service inside the container, causing a brief health-check failure and destabilising subsequent tests in the suite. Run config edit tests last or use a test-only jail that is isolated from the main config.
|
|
- Teardown must restore the original value even if the test fails mid-way. Ensure `Test Teardown` is set, not just a final keyword call.
|
|
|
|
**Docs changes needed:**
|
|
- Document the auto-save debounce behaviour and the "Saved" indicator semantics in [Web-Development.md](Web-Development.md) so E2E test authors know what to wait for.
|
|
- Note in [Testing-Requirements.md](Testing-Requirements.md) that config edit tests must restore state in teardown.
|
|
|
|
**Doc references:**
|
|
- [Web-Development.md](Web-Development.md)
|
|
- [CONFIGURATION.md](CONFIGURATION.md)
|
|
- [Testing-Requirements.md](Testing-Requirements.md)
|
|
- `frontend/src/components/config/__tests__/AutoSaveIndicator.test.tsx`
|
|
- `frontend/src/hooks/__tests__/useAutoSave.test.ts`
|
|
- `backend/tests/test_routers/test_config.py`
|
|
|
|
---
|
|
|
|
## [E2E-6] Add `data-testid` / `data-*` attributes to production frontend components
|
|
|
|
**Where found:**
|
|
Inspecting the frontend source, `data-testid` attributes appear only in test mock files (e.g., `MapPage.test.tsx` line 57: `<div data-testid="world-map" />`). The production components in `frontend/src/components/` and `frontend/src/pages/` have no `data-testid` or `data-*` attributes. E2E tests [E2E-2], [E2E-4], and [E2E-5] all require stable selectors that survive CSS and class-name refactors.
|
|
|
|
**Why this is needed:**
|
|
CSS class selectors and `aria-label` text are brittle — they break when styles change or text is translated. `data-testid` attributes are the idiomatic, refactor-safe way to locate elements in E2E tests. Without them, every UI change risks breaking the E2E suite for reasons unrelated to correctness.
|
|
|
|
**Goal:**
|
|
Key interactive and landmark elements across all pages and the config form have `data-testid` (or semantic `data-*`) attributes that the Robot Framework E2E suite can rely on.
|
|
|
|
**What to do:**
|
|
1. Identify the minimum set of elements needed by the four E2E suites:
|
|
- `data-testid="page-error-boundary"` on the `PageErrorBoundary` fallback render.
|
|
- `data-testid="dashboard"`, `data-testid="map-page"`, `data-testid="jails-page"`, `data-testid="history-page"`, `data-testid="blocklists-page"`, `data-testid="config-page"` on each page's root element.
|
|
- `data-testid="history-table"` on the History page table body.
|
|
- `data-testid="blocklist-import-button"` on the manual import trigger.
|
|
- `data-testid="autosave-status"` on the auto-save indicator, with `data-status="saved" | "saving" | "error"`.
|
|
- `data-field="<fieldname>"` on config input fields that E2E tests will edit.
|
|
2. Add the attributes directly to the JSX — no wrappers, no extra elements.
|
|
3. Do not add `data-testid` to elements that already have stable semantic roles (e.g., `<button type="submit">` with unique text, landmark `<main>`, `<nav>`).
|
|
4. Update the existing vitest component tests to use the new `data-testid` selectors instead of text queries where appropriate.
|
|
|
|
**Possible traps and issues:**
|
|
- `data-testid` attributes are visible in production HTML. This is standard practice and not a security concern, but some teams prefer to strip them in production builds via a Babel/Vite plugin. Decide on a policy before adding them.
|
|
- Adding attributes to components that are also tested by vitest may require updating those unit tests if they query by `data-testid`.
|
|
- The `PageErrorBoundary` component wraps lazy-loaded pages. The fallback element must carry the `data-testid` on the rendered fallback JSX, not on the wrapper itself.
|
|
- Config fields are rendered dynamically from API data. The `data-field` value must be derived from the field's API key name, not a hardcoded index.
|
|
|
|
**Docs changes needed:**
|
|
- Add a "Selector conventions" section to [Web-Development.md](Web-Development.md) documenting when to use `data-testid` vs. semantic selectors vs. ARIA roles, and listing all reserved `data-testid` values used by the E2E suite.
|
|
|
|
**Doc references:**
|
|
- [Web-Development.md](Web-Development.md)
|
|
- [Testing-Requirements.md](Testing-Requirements.md)
|
|
- `frontend/src/components/ErrorBoundary.tsx`
|
|
- `frontend/src/components/config/__tests__/AutoSaveIndicator.test.tsx` |