RenewCMS/features/integration.qa.md

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.