31 lines
2.4 KiB
Markdown
31 lines
2.4 KiB
Markdown
# QA procedure: Relation picker loading more
|
|
|
|
Spec: features/relation_picker_loading_more.feature. Vitest + Vue Test Utils under `task test:web`, /v1 mocked in the style of views/__tests__/EntryEditorRelationStates.spec.ts (a `search` callback per page).
|
|
|
|
## Honesty rules
|
|
0. Baseline `task test:web` first. 1. Runner cannot execute: NOT RUN. 2. Report new and edited specs and baseline failures.
|
|
3. The skeleton row count is read from the board frame; assert it only if the frame gives it.
|
|
|
|
## Automated (Vitest)
|
|
| Spec | Cases |
|
|
|---|---|
|
|
| views/__tests__/EntryEditorRelationStates.spec.ts (extend "Load more") | request URL `page=2&size=25`; during the pending promise skeleton rows exist after the last option, the button is disabled with text "Loading…", the footer text unchanged, a second click sends nothing; after resolve rows replaced, footer "Showing 50 of 62", button enabled; last page footer and no button; failure restores the button and keeps the results; focus on the first new option; focus back on the button after a failure |
|
|
| composables/__tests__/useRelationSearch.spec.ts (extend) | loadingMore true only for page above 1, a stale page is ignored after a new search, hasMore and total |
|
|
| i18n/roleMessages.spec.ts or the messages spec (extend) | "Loading…" EN and FR |
|
|
|
|
Mocks to reuse: 62 venues for "rue", 25 per page, the board's venue names from the frame script.
|
|
|
|
## Visual (task visual:check)
|
|
Run `task visual:check -- schema-later` (screen name as the script lists it), states "Relation picker: loading more" and "Relation in the entry form". Sample data: the board's 25 venues for "rue", "Showing 25 of 62". The pending state needs a never-resolving mock for the second page. Light, dark, desktop, mobile within 10 %.
|
|
|
|
## Manual checks
|
|
1. A disabled button loses keyboard focus in some browsers: verify in Chrome, Firefox and Safari that focus stays on the button (or moves as designed) and a screen reader announces the change; if not, use aria-disabled and document it.
|
|
2. Throttle the network to see the skeleton; reduced motion on.
|
|
3. Mobile 390 px, dark, FR.
|
|
4. `task lint:web` green; `task test:web` exit 0.
|
|
|
|
## Design gaps and notes
|
|
- G1 The design says "Focus stays on the button, then moves to the first new row"; disabled-button focus is browser-dependent (manual item 1).
|
|
- G2 The failure of the next page is not drawn.
|
|
- G3 The group is "Later" in the design (API "not built") but the app has the picker; the coder reuses it.
|