RenewCMS/features/relation_picker_loading_more.qa.md

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.
1. 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.