67 lines
4.8 KiB
Markdown
67 lines
4.8 KiB
Markdown
# QA: Integration screen
|
|
|
|
## Automated (Vitest + Vue Test Utils, `task test:web`)
|
|
|
|
Mount IntegrationPage inside DashboardShell with a resolved verified session and a test router at
|
|
/integration. Stub `window.location.origin` (or the equivalent composable/helper the coder uses to
|
|
read it) to a fixed value for the test, and stub `navigator.clipboard.writeText` per case. No
|
|
`/v1` mocks are needed; the screen makes no calls.
|
|
|
|
1. **Default** — mount at /integration with origin stubbed to a fixed value (e.g.
|
|
`https://cms.renew.example`, matching the design board's sample so the assertions read the same
|
|
as the visual reference); assert breadcrumb "Integration"; assert the PageHeader title
|
|
"Connect your website" and description "A guide for the developer who builds your public
|
|
site."; assert the intro paragraph text; assert the Base URL row shows exactly the stubbed
|
|
origin; assert the Base URL "Copy" button reads "Copy"; assert both EndpointCards render in
|
|
order (GET /v1/article/, GET /v1/article/{id}) with their descriptions and their fetch examples
|
|
containing the stubbed origin; assert the fetch tab is active by default on both cards; assert
|
|
the three info notes render in order.
|
|
2. **Copied** — from Default, use fake timers; click the Base URL row's "Copy" button; assert
|
|
`navigator.clipboard.writeText` was called with the stubbed origin; assert the button's icon is
|
|
check and its text is "Copied"; assert the change is exposed to assistive technology (e.g. an
|
|
aria-live region or a status role holds "Copied"); advance the fake timer by 2 s; assert the
|
|
button reverts to icon copy and text "Copy".
|
|
3. **EndpointCard's own Copy button is independent** — from Default, click the "/v1/article/"
|
|
card's "JavaScript" CodeBlock's "Copy" button; assert `navigator.clipboard.writeText` was called
|
|
with that card's exact code string; assert only that button reads "Copied"; assert the Base URL
|
|
button still reads "Copy" and the other card's Copy button still reads "Copy". This behavior is
|
|
Vitest-only; it has no visual-check state of its own (see Visual below).
|
|
4. **curl and Response tabs render, unchecked visually** — from Default, switch the "/v1/article/"
|
|
card to its curl tab; assert its content is a plain curl command built from the stubbed origin
|
|
(e.g. "curl https://cms.renew.example/v1/article/"); switch to its Response tab; assert its
|
|
content is a JSON sample built from the real domain Article fields. Neither tab's content is
|
|
asserted pixel-for-pixel anywhere, since the design board only ever shows the fetch tab active.
|
|
|
|
## Visual (`task visual:check -- integration`, desktop and mobile, light and dark)
|
|
|
|
Reference: `docs/design/screens/integration.md` and
|
|
`docs/design/source/RenewCMS Screens Back-office.dc.html`, group "Integration"; layout detail from
|
|
`docs/design/source/AppFrame.dc.html`'s `isInteg` block.
|
|
|
|
The visual-check setup for this screen serves the SPA under `https://cms.renew.example` via
|
|
Playwright request routing, so the real `window.location.origin` the running app reads matches the
|
|
board's sample text exactly; no production test hook or origin stub is needed in app code.
|
|
|
|
- [ ] Default state: PageHeader ("Connect your website" / description), intro paragraph, Base URL
|
|
row with monospace text and a "Copy" button (icon copy), two EndpointCards in order with
|
|
their GET badge, path, description, fetch/curl/Response tabs (fetch active), JavaScript
|
|
CodeBlock and its own "Copy" button, and the three info notes below — matches the board
|
|
exactly at desktop and mobile, light and dark. Sample data for the mocked run: origin
|
|
`https://cms.renew.example`, served as above.
|
|
- [ ] Copied state: the Base URL button shows the check icon and "Copied" text, in the success
|
|
color, matching the board's `copied: true` frame. This state is timer-driven, not
|
|
date-driven, so it is not clock-sensitive and gets a real visual check, not a skip.
|
|
- [ ] Keyboard/focus (manual, not a screenshot check): Tab order reaches the Base URL "Copy"
|
|
button, then each EndpointCard's tab strip (fetch/curl/Response, reachable and operable with
|
|
arrow keys per UTabs), then that card's own CodeBlock "Copy" button, then the pre's
|
|
`tabindex="0"` for scrolling; Enter/Space activates each Copy button.
|
|
- [ ] Hover (manual): ghost Copy buttons show a hover state consistent with other ghost buttons
|
|
elsewhere in the app (UserMenu, ArticleTable row menu).
|
|
|
|
## Manual verification
|
|
|
|
- Confirm the real running app's `window.location.origin` (e.g. `https://your-domain.example` in
|
|
production, or `http://localhost:8080` under `task dev`) renders correctly in the Base URL row
|
|
and in both fetch examples, since Vitest only ever exercises a stubbed origin, and
|
|
`visual:check` only ever exercises the routed `https://cms.renew.example` origin.
|