RenewCMS/features/editor_image_upload.qa.md

QA: Wiring the editor's image upload flow

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

Mock XMLHttpRequest (a fake implementing open/setRequestHeader/send/abort and firing upload.progress, load, error) for POST /v1/article/{id}/image; useApi/fetch is not involved in this slice. Mount EditorPage inside DashboardShell at /article/12/edit with the editor_core.qa.md fixture article (id 12, title "How we price a bathroom renovation", is_online false), GET already resolved 200.

1. Toolbar button opens the idle state — click the toolbar's "Image" button; assert ImageUploader opens titled "Add an image", showing "Drop an image here", "Choose file", "PNG, JPEG, WEBP, SVG · max 10 MB", cancel "Cancel"; assert no XHR was created.
2. Dragging over shows "Drop to upload" — with the uploader open idle, fire a dragover on the drop zone; assert the text changes to "Drop to upload".
3. Dropping a file on the editor opens the uploader already uploading — with the uploader closed, dispatch a drop event with a file before.png (image/png, 3.9 MB) on the editor surface; assert ImageUploader opens and an XHR to /v1/article/12/image is created with that file, and the uploading state (not idle) is shown.
4. Rejected — Examples-driven on type, extension mismatch, and size — for each of plan.pdf (application/pdf, 1.2 MB), disguised.png (application/pdf, 1.2 MB), and north-wall.tif (image/png, 14.2 MB), choose the file via the UFileUpload; assert no XHR is created and the rejected state shows the exact title/text/confirm/cancel copy from the feature's Examples.
5. "Choose another file" returns to idle — from the rejected state, click "Choose another file"; assert the idle state re-renders.
6. Uploading shows live progress and "Cancel upload" — choose north-wall.jpg (image/jpeg, 3.9 MB); assert the XHR is created with that file under field file; assert cancel reads "Cancel upload"; fire an upload.progress event with loaded: 2.4 * 1024 * 1024, total: 3.9 * 1024 * 1024; assert the text reads "north-wall.jpg 62%" and "Uploading 2.4 of 3.9 MB".
7. Closing during an upload aborts the XHR — from the uploading state, click "Cancel upload"; assert the fake XHR's abort was called, the modal closes, and the editor's body and dirty state are unchanged from before the upload started.
8. A 201 inserts at the cursor and marks the draft dirty — from the uploading state, resolve the fake XHR with status 201 and body {"location": "/static/uploadedImages/north-wall.jpg"}; assert insertImage (or the editor's exposed method) was called with that location; assert SaveStatus now reads "Unsaved changes" and Save is enabled; assert a toast appears with color success, icon i-lucide-circle-check, title "Image added", description "Save to keep it in the article."; advance fake timers 600 ms and assert the modal has closed.
9. A 500 or network failure shows "Upload failed" and keeps the article unchanged, Examples- driven — for (a) the fake XHR firing load with status 500 and (b) firing error; assert the failed state shows title "Upload failed", text "The server didn't accept the file. Your article hasn't changed.", confirm "Try again"; assert no insertImage call and the editor's body/dirty state is unchanged.
10. "Try again" resends the same file — from the failed state for north-wall.jpg, click "Try again"; assert a new XHR is created for /v1/article/12/image with the same file, and the uploading state is shown again.
11. A server 400 for a type the client should have caught shows the rejected copy — from an uploading state for notes.pdf, resolve the fake XHR with status 400; assert the rejected state shows title ""notes.pdf" can't be used", text "Use a PNG, JPEG, WEBP or SVG image, up to 10 MB.", confirm "Choose another file"; assert no insertImage call.
12. A server 400 for a size the client should have caught shows the size-named rejected copy — from an uploading state for north-wall.tif, resolve the fake XHR with status 400; assert the rejected state shows title ""north-wall.tif" can't be used", text "north-wall.tif is 14.2 MB. Images can be up to 10 MB.", confirm "Choose another file"; assert no insertImage call.

Visual (manual verification — desktop and mobile, light and dark)

Reference: docs/design/screens/editor.md states "Upload: choose", "Upload: in progress", "Upload: rejected", "Upload: inserted", and docs/design/source/RenewCMS Screens Back- office.dc.html. Run task visual:check -- editor for each state below; add each state's mock setup to web/visual/states.ts first, reusing editor_core.qa.md's fixture article (id 12, title "How we price a bathroom renovation", draft, "Today, 11:02", 3 images) plus the sample file data from the board: filename "north-wall.jpg", size 3.9 MB, progress 62% / 2.4 of 3.9 MB uploaded.

• Upload: choose — modal "Add an image", idle state, cancel "Cancel".
• Upload: in progress — modal "Add an image", uploading "north-wall.jpg 62%" / "Uploading 2.4 of 3.9 MB", cancel "Cancel upload".
• Upload: rejected — modal "Add an image", rejected state for a sample rejected file per the board's script, cancel "Cancel", confirm "Choose another file".
• Upload: inserted — toast "Image added" / "Save to keep it in the article.", editor status "draft", save "dirty".
• Mobile (all of the above at 390×844): same modal layout constraints as other editor modals (leading arrow-left button, trailing ellipsis in the header behind it).
• Keyboard/focus: the drop zone is reachable by Tab and Enter opens the file picker; focus moves into the modal on open and is trapped there; Esc during "Upload: in progress" behaves like "Cancel upload" (aborts, closes); the progress bar's role="progressbar" / aria-valuenow updates are announced without spamming on every progress tick.
  • Motion: modal open/close follows the standard 240 ms timing; the success state's 600 ms auto-close is not visually checked as a capture (it's a timing behavior, not a static state) — cover only via the Vitest fake-timer assertion above.

Manual verification

• Real POST round trip against a running server — Vitest only mocks XMLHttpRequest; confirm a real upload (200/400/401/404/500) against task dev with a live SQLite file and the real POST /v1/article/{id}/image handler, since features/upload_article_image.feature's httptest suite covers the handler in isolation but never through this SPA flow.
• Real drag-and-drop from the OS file picker — jsdom's drop event is synthetic; confirm a real OS-level drag of an image file onto the editor in a real browser.