93 lines
6.3 KiB
Markdown
93 lines
6.3 KiB
Markdown
# 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.
|