# QA: Creating a new article from NewArticleModal

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

Only HomeView.vue is wired as a real `created` consumer in this slice: it listens for
`@created="article => { router.push(...); useToast().add(...) }"`. The Articles-page trigger and
the `/article/new` route stay pointed at the current ArticleView.vue placeholder until that page
exists; don't wire a `created` handler there yet.

The modal is title-only: the First paragraph field is removed and the POST body is `{"title": "..."}`
with no `body` key (see features/article_body_unlimited.feature).

The confirm button's label is the design's "Create draft".

The Created toast uses `useToast().add({ id: 'article-created-{id}', color: 'success', icon:
'i-lucide-circle-check', title: 'Draft created', description: '"{title}" is saved as a draft.' })`,
per docs/design/components.md's toast-id convention (action + article id) and the Toast rules
section (success/info close after 5 s).

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

Mock `useApi`'s `request` for `POST /v1/article/` per case; no real backend, no httptest server.
Mount HomePage (which owns NewArticleModal) inside DashboardShell with a resolved verified session,
and a test router at `/home`. Sample data throughout: title "Choosing tiles for a small bathroom",
created article id 42, is_online false.

1. **Default state on open** — click "New article"; assert the modal shows title "New article",
   the intro text, an empty focused Title field with counter "0 / 200" and help "3 to 200
   characters.", "Cancel" and "Create draft", and no First paragraph field.
2. **Blur validation** — type "Ti" into Title and blur; assert the error "Use at least 3
   characters." replaces the help text and the counter "2 / 200" is in its error style; assert no
   `request` call.
3. **Submit with an invalid title** — Title "Ti", click "Create draft"; assert the error shows and
   `request` is never called.
4. **Submitting state** — fill Title validly, click "Create draft"; assert `request` is called
   once with `POST /v1/article/` and the JSON body exactly `{"title": "Choosing tiles for a small
   bathroom"}`; assert Title and Cancel become disabled, the confirm button reads "Creating…";
   assert pressing Escape and clicking the backdrop do not close the modal while unresolved.
5. **Successful create hands off** — from Submitting, resolve `request` 201 with the fixture
   article (id 42); assert the modal closes; assert the router navigated to `/article/42/edit`;
   assert a toast was raised with id "article-created-42", color success, icon
   "i-lucide-circle-check", title "Draft created", and description "\"Choosing tiles for a small
   bathroom\" is saved as a draft."
6. **Title rejected (400)** — from Submitting, resolve `request` rejecting with `ApiError(400)`;
   assert the title is kept, the Title field shows "Check this title and try again.", and an alert
   reads "Something in the form isn't valid. Check the highlighted fields."
7. **Error, Examples-driven** — from Submitting, (a) resolve `request` rejecting with
   `ApiError(500)`, (b) resolve it rejecting with `NetworkError`; in each, assert the title is
   kept, the alert reads "Couldn't create the article. Your text is still here. Try again in a
   moment.", and the field shows no error.
8. **Retry after Error succeeds** — from the Error state (500), click "Create draft" again; assert
   `request` is called a second time with the same JSON body; resolve 201 with the fixture; assert
   the modal closes, the router navigated to `/article/42/edit`, and the same "Draft created" toast
   (id "article-created-42") is raised.
9. **Cancel discards** — fill Title, click "Cancel"; assert the modal closes immediately with no
   confirmation UI, and `request` was never called.

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

Reference: `docs/design/screens/new-article.md` and `docs/design/source/RenewCMS Screens
Back-office.dc.html`, group "New article". Run `task visual:check -- new-article` for each state
below and compare against the board frame; add each state's mock setup to `web/visual/states.ts`
first, reusing this slice's sample data (title "Choosing tiles for a small bathroom"). This screen
has no time-dependent content, so no fixed `now` is needed. The board frames may still draw a body
line in Submitting, Title rejected and Error; the design .md files are authoritative for the
title-only modal and the boards are a known follow-up.

- [ ] Default: empty, focused Title with counter "0 / 200", help text, "Cancel" / "Create draft".
- [ ] Validation: Title "Ti" with counter "2 / 200" in error and "Use at least 3 characters."
- [ ] Submitting: Title filled and disabled, confirm reads "Creating…" with its loading state.
- [ ] Title rejected (400): Title filled, error "Check this title and try again.", alert
      "Something in the form isn't valid. Check the highlighted fields."
- [ ] Error: Title filled, alert "Couldn't create the article. Your text is still here. Try
      again in a moment.", no field-level error.
- [ ] Created: no board frame; verified by Vitest (toast copy + navigation).
- [ ] Keyboard/focus: Tab reaches Title (already focused on open) → Cancel → Create draft; Esc
      closes the modal in every dismissible state and is blocked while Submitting; the counter's
      live region announces only when its error threshold is crossed, not on every keystroke,
      per CharacterCounter's a11y spec.
- [ ] Motion: modal open/close follows the standard 240 ms timing and stops under reduced motion.

## Manual verification

- **Real POST /v1/article/ round trip against a running server** — Vitest only mocks `useApi`;
  confirm the real 201/400/500 responses, that a title-only create returns 201 with an empty body,
  and that the created article is retrievable at `/article/{id}/edit` against `task dev` with a
  live SQLite file, since automated tests never exercise the real Go handler or
  `CreateArticleUseCase`.
- **Toast placement and stacking on a live app** — confirm the "Draft created" toast's real
  position, duration and stacking behavior (per docs/design/components.md's Toast rules) against
  a running app, since Vitest only asserts that `useToast().add` was called with the right
  arguments, not the rendered/animated toast region.