RenewCMS/features/image_variants_editor_picker.qa.md

QA: Editor picker Variant select and block warnings

Implementation note for coder (informational, not a QA assertion)

No Go change. The variant of a block is read from the v query parameter of the image node's src; the lookup is by name against GET /v1/image-variants (all variants, enabled or not). The hosted rev= cache-bust parameter from withMediaRevision is appended after ?v= and is ignored by the server. A broken variant block must not use the existing "This image is no longer available" message, which says the image was deleted. Only enabled variants are offered in the select. New strings need English and French entries in web/src/i18n/messages.ts.

Automated (Vitest + Vue Test Utils, task test:web)

Reuse web/src/views/__tests__/EditorMediaPicker.spec.ts and its fixtures. Mock useApi's request per case (GET /v1/media/, GET /v1/image-variants). Mount EditorView at /article/12/edit with a resolved verified session (role "owner"). Mock matchMedia for the 640 px breakpoint, run layout cases at both widths. Fake timers only for the 150 ms skeletons and 120 ms debounce already used there. No test freezes the system date.

1. Select, default - selecting "north-wall.jpg" sends GET /v1/image-variants once; the panel order is thumbnail row, "Variant" label, select, url line, alt text; Original is chosen; "Insert image" enabled.
2. Options - the six options in order and format labels; "Print" (disabled) absent; the open style (primary border, check); the url line for Original and for a variant; the choice resets when another image is selected; the list is not requested again within one opening.
3. No variants - {"items": []} and all-disabled: only Original, the help line and its link target, no url line.
4. SVG - only "Original · Vector · SVG" and no help.
5. List failure, Examples-driven - 500, 403 and network failure: Original only, no alert, insert works.
6. Keyboard - Enter and Space open, arrows move, Enter chooses, Escape closes and returns focus.
7. Insert, Examples-driven - Original, Hero, Thumb: insertImage arguments, data-image-id, dirty state, toast, closing, no write request. Upload tab unchanged. Inserting an image already in the article twice. The rev= parameter after ?v=.
8. Cancel paths - Cancel, x, Escape leave the editor untouched.
9. Block states - deleted variant (title, text, button, border, dimmed placeholder with image-off, no "no longer available"), disabled variant (title), enabled variant (no warning, chip text hero · 1200×630, chip classes), disabled variant chip, deleted variant no chip, plain src unchanged.
10. When the list is requested - not requested for a body without ?v=; requested once for several blocks; failure Examples (500, 403, network): no warning, editor usable.
11. Pick another variant - the select opens on the block, Escape closes with focus back; choosing Thumb rewrites only that block's src to ?v=thumb, keeps data-image-id and alt, the warning disappears and the chip shows, dirty state set; choosing Original removes the parameter and shows no chip; a second block of the same image is untouched.
12. Save - the saved HTML contains the img element and no warning markup.
13. Accessibility - role or live region on the warning, 44 px button class on mobile, vocabulary scan.
14. French - setLocale('fr'); every new key exists in messages.ts and the dialog and block render without missing keys.

Visual (task visual:check -- image-variants , desktop and mobile, light and dark)

Reference: docs/design/screens/image-variants.md, exact values in docs/design/source/VariantsFrame.dc.html (Picker, VSel, Editor). Add each state to web/visual/states.ts with the board's data: the article "How we price a bathroom renovation", the library tiles north-wall.jpg (selected), the five enabled variants in board order thumb, card, hero, square, og, and the block chip "hero · 1200×630". The gate is hard: every non-skipped capture within 10 %. None is clock-sensitive.

• 6a Variant select (Hero chosen, url line shows ?v=hero as drawn with the real path)
• 6b Select open (Original plus five enabled variants)
• 6c No variants defined (Original only, help line)
• 6d Variant deleted (block warning "Variant 'hero' no longer exists.")
• 6e Variant disabled (block warning "Variant 'hero' is disabled.")
• Layout from the board frame: select label and control heights (40 px / 44 px, 16 px text on mobile), option height (36 px / 44 px), the block box (1 px warning border around the dimmed image and the alert), chip position (8 px from the top-left).
• The board draws the url line as /media/north-wall.jpg?v=hero; the capture will differ by that string only. If the 10 % gate fails on it, ask the user for a per-state exception (needs approvedBy), do not edit the board.
• Not drawn, no visual state: the Alt text field under the select, list failure, SVG, keyboard.
• Not covered by screenshots: keyboard and focus order, focus return after the select closes, hover, motion.

Manual verification

• Round trip against task dev: insert an image with a variant, save the article, open the public article and confirm the image loads from the variant url; delete or disable that variant in Settings, reload the editor and check the warning; use "Pick another variant" and save again.
• French: read the select, its help and the block warning.
• Real browser at mobile width: select list and block warning touch targets.