feat: integration screen

features/integration.qa.md

@@ -0,0 +1,66 @@
+# 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.