# 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.